// Prepared by Ong Kian Peng

// Activity 4.1 - Color picker

// Keywords: colours, conditions, pixels

//

// Slides

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

// 

// Reading on color

// http://printingcode.runemadsen.com/lecture-color/

​

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

// 4. Use different shape(s) for each colour condition (line 54++)

// 5. Save the image

​

// Notes

// The mouse pointer picks up colour information from 

// corresponding pixel locations. The conditions starting from 

// line 52 compare the 3 colours red, green and blue. 

// When one colour is more dominant than the other two,

// the shape changes. You can use these conditions to 

// play with shapes and sizes.

​

let img;

let label = "your-label-here";

​

function preload() {

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

}

​

function setup() {

  createCanvas(868, 814); // 540 x 540

  rectMode(CENTER);

  background(0);

}

​

function draw() {

  // uncomment the line below to see image bg

  //image(img, 0, 0, 738, 1046); 

​

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

  let c = img.get(mouseX, mouseY); 

​

  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(c);

  noStroke();

​

   //console.log(g);

​

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

    arc(mouseX, mouseY, 50, 50, 0, HALF_PI);  

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

    ellipse(mouseX, mouseY, 100,70);

  } 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(mouseX, mouseY); //use translate to move the entire triangle

    rotate(frameCount%PI/0.01);

    rect(0, 0, 30);

    pop(); //to exit push

    // push and pop belong to the concept of 

    // transformations, although not easy to 

    // comprehend at first, it is preferred and

    // recommended over assigning coordinates

    // directly to a shape (as demonstrated in line 54 and 58)

    // for more details see 

    // https://slides.com/sojamo/101-getting-started-with-p5js/fullscreen#/7

  } else {

    // if non of the above matches:

    // add something here

    ellipse(mouseX, mouseY, 10,30)

  }

}

​

​

​

​

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

//

// Helper Functions 

//

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

​

​

function keyPressed() {

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

  if (key === "s") {

      saveCanvas(label + ".png");

  }

}