* Creative Coding Workshop #5 Demo - Move Mouse to Pick Color from an Image

 *

 * Jack B. Du (github@jackbdu.com)

 */

​

let graphics;

​

// everything in preload() will be loaded before setup() is run

function preload() {

  // load image into graphics variable

  graphics = loadImage("abstract-fluid.png");

}

​

function setup() {

  createCanvas(400, 400);

  // set pixel density to 1

  pixelDensity(1);

}

​

function draw() {

  background(220);

  // draw graphics to fit entire canvas

  image(graphics, 0, 0, width, height);

  // load all canvas pixels into pixels array

  loadPixels();

  // ensure picked coordinate is within canvas

  let x = constrain(mouseX, 0, width-1);

  let y = constrain(mouseY, 0, height-1);

  // calculate starting index for pixel at (x, y)

  let index = (y * width + x) * 4;

  let r = pixels[index];

  let g = pixels[index+1];

  let b = pixels[index+2];

  let a = pixels[index+3];

  // define a color based on retrieved color values

  let c = color(r, g, b, a);

  // set fill color to picked color

  fill(c);

  circle(x, y, 50);

}