7.11e_image_filters

// filter()

// In this sketch we learn how to apply filters to images.

​

// More info on filters here:

// https://p5js.org/reference/#/p5/filter

​

let originalImg;

let filteredImg;

​

function preload() {

  originalImg = loadImage("cn.jpg");

  filteredImg = loadImage("cn.jpg");

}

​

function setup() {

  // try different filters, like GRAY, INVERT, THRESHOLD, etc.. see the reference for a list

  filteredImg.filter(THRESHOLD);

​

  createCanvas(originalImg.width, originalImg.height); // make the canvas the same size as the original object (cn.jpg)

}

​

function draw() {

​

  // colourAlpha and grayAlpha will always be the opposite of 

  // each other, creating a "crossfade"   

  let originalAlpha = map(mouseX, 0, width, 255, 0);

  let filteredAlpha = map(mouseX, 0, width, 0, 255);

​

  tint(255, originalAlpha);

  image(originalImg, 0, 0);

​

  tint(255, filteredAlpha);

  image(filteredImg, 0, 0);

  fill(120);

}