Static p5_sys::global::filter

pub static filter: FilterInternalType

Applies a filter to the canvas. The presets options are:

THRESHOLD Converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The parameter must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.

GRAY Converts any colors in the image to grayscale equivalents. No parameter is used.

OPAQUE Sets the alpha channel to entirely opaque. No parameter is used.

INVERT Sets each pixel to its inverse value. No parameter is used.

POSTERIZE Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges.

BLUR Executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Gaussian blur of radius 1. Larger values increase the blur.

ERODE Reduces the light areas. No parameter is used.

DILATE Increases the light areas. No parameter is used.

filter() does not work in WEBGL mode. A similar effect can be achieved in WEBGL mode using custom shaders. Adam Ferriss has written a selection of shader examples that contains many of the effects present in the filter examples.

Examples

let img;
function preload() {
  img = loadImage('assets/bricks.jpg');
}
function setup() {
  image(img, 0, 0);
  filter(THRESHOLD);
}

let img;
function preload() {
  img = loadImage('assets/bricks.jpg');
}
function setup() {
  image(img, 0, 0);
  filter(GRAY);
}

let img;
function preload() {
  img = loadImage('assets/bricks.jpg');
}
function setup() {
  image(img, 0, 0);
  filter(OPAQUE);
}

let img;
function preload() {
  img = loadImage('assets/bricks.jpg');
}
function setup() {
  image(img, 0, 0);
  filter(INVERT);
}

let img;
function preload() {
  img = loadImage('assets/bricks.jpg');
}
function setup() {
  image(img, 0, 0);
  filter(POSTERIZE, 3);
}

let img;
function preload() {
  img = loadImage('assets/bricks.jpg');
}
function setup() {
  image(img, 0, 0);
  filter(DILATE);
}

let img;
function preload() {
  img = loadImage('assets/bricks.jpg');
}
function setup() {
  image(img, 0, 0);
  filter(BLUR, 3);
}

let img;
function preload() {
  img = loadImage('assets/bricks.jpg');
}
function setup() {
  image(img, 0, 0);
  filter(ERODE);
}

Parameters

filterType either THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE, DILATE or BLUR. See Filters.js for docs on each available filter

filterParam? an optional parameter unique to each filter, see above