// 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 in line 36

// 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.

​

let img;

let gridSize;

let gridResolution = 12; // grid resolution

let label = "your-label-here";

​

function preload() {

  img = loadImage("assets/cyber1.jpg");

  // img = loadImage("assets/blue.jpg");

}

​

function setup() {

  createCanvas(540, 540);

​

  // dynamically getting the size of each cell

  gridSize = img.width / gridResolution;

  noStroke();

}

​

function draw() {

  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; // assigns a random x position every iteration

      let yPos = y * gridSize; //assigns a random y position every iteration

​

      //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!

​

      rect(x * gridSize, y * gridSize, gridSize, gridSize);

    }

  }

​

  if (mouseIsPressed) {

    // show the original image when mouse is pressed

    image(img, 0, 0, 540, 540);

  }

}

​

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

//

// Helper Functions

//

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

​

function keyPressed() {

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

  if (key === "s") {

    saveCanvas(label + ".png");

  }

}

​