// Prepared by Ong Kian Peng

// Activity 4.3 - Color picker > filter

// Keywords: iteration, colours, conditions, pixels

//

// Slides

// https://slides.com/sojamo/cid-1-2122/fullscreen

​

// On Filter

// We see them everywhere in our daily social lives,

// and the simplest way of understanding filters is the replacement

// of one graphic over another graphic. In this exercise we will explore

// how we can reconfigure an image and save it as a filtered image.

​

// 1. Select and upload an image of choice.

// 2. Make sure your image is resized to 540px by 540px

// 3. Make sure that your file name is reflected below

// 4. Define a grid by changing its gridResolution size

// 5. Replace the default shape, layer shapes or use images

// 6. Experiment with the conditions in activity 1 and 2

//    to display different shapes, sizes

// 7. Save the image

​

// Notes

// In this sketch we make use of a nested loop to 

// create a grid horizontally and vertically, extracting 

// color from pixels that can be used to colour the 

// shapes that we draw.

​

// Use the following keys 

// s     to save canvas to .png

// SPACE to move shape into original position

// e     to explode tiles

//

// use the mouse to drag and zoom tiles

//

​

let gridResolution = 30; // grid resolution

let label = "your-label-here";

​

let explode = 0, nexplode = 0;

let img;

let gridSize;

​

function preload() {

  img = loadImage("Hands.png");

}

​

function setup() {

  createCanvas(540, 540, WEBGL);

​

  // dynamically getting the size of each cell

  gridSize = img.width / gridResolution;

  noStroke();

}

​

function draw() {

  background(242, 213, 229);

  push();

  translate(0,0,mz);

  rotateX(mx);

  rotateY(my);

  translate(-width/2, -height/2, 0);

  for (let x = 0; x < gridResolution; x++) {

    // draws the horizontal iterations

​

    for (let y = 0; y < gridResolution; y++) {

      // draws the vertical iterations

​

      let xPos = x * gridSize; 

      let yPos = y * gridSize;

​

      //extracts red,green,blue,alpha from a single pixel

      let c = img.get(xPos, yPos);

​

      let r = red(c); // extract red from c

      let g = green(c); // extract green from c

      let b = blue(c); // extract blue from c

      fill(r, g, b); // fills the shape

      // change the shape, add layers or use images

      // challenge yourself by using the the conditions

      // in previous activities!

      let d =  gridSize * explode;

      let x0 = x * gridSize;

      let y0 = y * gridSize;

      let z0 = map(r,0,255,-d ,d);

      push();

      translate(x0, y0,z0);

      rotateX(map(r,0,255,-PI,PI) * explode);

      rotateY(map(g,0,255,-PI,PI) * explode);

      rotateZ(map(b,0,255,-PI,PI) * explode);

      // box(gridSize/4, gridSize*4, gridSize/4);

      triangle(gridSize,gridSize, gridSize*2, gridSize*2, gridSize*2,gridSize);

      //circle(gridSize,gridSize,gridSize)

      //rect(gridSize,gridSize,gridSize)

      pop();

    }

  }

  pop();

  explode += (nexplode - explode) * 0.10;

  updateMouse();

}

​

//////////////////////////////////////////////////////////////

//

// Helper Functions

//

//////////////////////////////////////////////////////////////

​

function keyPressed() {

  // save the canvas as image when key s is pressed

  if (key === "s") {

    saveCanvas(label + ".png");

  } else if(key == ' ') {

    mnx = 0;

    mny = 0;

  } else if(key === 'e') {

    nexplode = nexplode==0 ? 1:0;

  }

}

​

​

// below we are detecting user input

// 1. when the mouse is dragged

// 2. when the mousewheel or the trackpad-zoom is used

// 3. when the space bar is pressed

// changes have an effect on the value(s) of

// variables nx, ny, nz which we then use

// in together with variables x,y,z to control

// the orientation of the book.

​

function mouseDragged() {

  mnx += (pmouseY - mouseY) * 0.01;

  mny -= (pmouseX - mouseX) * 0.01;

}

​

function mouseWheel(theEvent) {

  mnz += theEvent.delta;

  mnz = constrain(mnz,-500,500);

  return false;

}

​

function updateMouse() {

  // here we are smoothen the 

  // movement of x,y and z which

  // we use to rotate the book and 

  // zoom in and out.

  mx += (mnx - mx) * 0.04;

  my += (mny - my) * 0.04;

  mz += (mnz - mz) * 0.04;

}

​

let mx = 0;

let my = 0;

let mz = 0;

let mnx = 0.5;

let mny = -0.5;

let mnz = 0;

​

​