// Prepared by Ong Kian Peng

// Activity 4.2 - Color picker composition

// Keywords: iteration, colours, conditions, pixels

//

// Slides

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

//

// level: basic

//

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

// 4. Decide how many shapes you want to draw and update that in line 45

// 5. Use a different shape / different shape size for each colour.

// 6. Save the image

​

// Notes

// The for loop draws an x amount of times (you decide!)

// Each iteration we assign a random x,y position

// Then we extract the colour information from this random x,y 

// Finally we compare colour the shape and decide on a shape

​

let img;

let label = "your-label-here";

​

function preload() {

  img = loadImage("image 4.png");

}

​

function setup() {

  createCanvas(746, 686);

  rectMode(CENTER);

  frameRate(10);

}

​

​

function draw() {

  // (un)comment the line below to see/hide image bg

  image(img, 0, 0, 746, 686);

  randomSeed(100);

  // for loop condition, draws 150 shapes

  // try a lower or higher number instead

  for (let i = 0; i < 100; i++) {

​

    let x = random(width); // assigns a random x position every iteration

    let y = random(height); //assigns a random y position every iteration

​

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

    let c = img.get(x, y);

​

    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); // fill the shape

    noStroke(); // disable a shape's outline, the stroke

​

    if (r > g && r > b) { // if red is larger than green and blue

    push();

      translate(x,y);

      //rotate(frameCount % PI/2)

      arc(x, y, 50,50, frameCount % 20, 20);

      pop();

    } else if (g > r && g > b) { // if green is larger than red and blue

​

      circle(x, y, 20);

    } else if (b > r && b > g) { // if blue is larger than red and green

      push(); //push is used to isolate the translate function below

      translate(x, y); // we use translate to move the entire triangle

      triangle(-10, 10, 0, -10, 10, 10);

      pop(); //to exit push

    } else {

      // in the event of pure black or pure white

      // add something here

      rect(x,y,20,20);

    }

  }

}

​

​

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

// 

// Helper Functions 

//

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

​

​

function keyPressed() {

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

  if (key === "s") {

      saveCanvas(label + ".png");

  }

}

​

​