Thought

The thought for this experiment stemmed from my growing interest in the capabilities of the web-camera on a modern-day personal computing machine. Each pixel on a screen stores RGB values, ranging from 0-255, for a displayed image. I wondered whether, instead of browsing through different colour palettes online to fit a project, one could pick up an existing object in real life and derive colours from it.

Logic

The sketch takes input from your webcam and lets you select a pixel that you want the colour value for. This is done by creating an object whenever you press the mouse and storing three things: the x & y position of the click & the RGBA (colour) values of the pixel being clicked; by using the p5 function get().

if (tog ==true){
  loadPixels ();
  p = get (mouseX, mouseY);
  m = createVector (mouseX, mouseY);

    for (let i = 0; i<1; i++){
    circs.push (new Dots (m.x, m.y, p));
    }

  tog = false;
}

Then, the program places a dot on that particular position, displaying the RGB value underneath.

class Dots{

  constructor (x, y, p){
  this.x = x;
  this.y = y;
  this.c = p;
  this.r = 40;
  this.tS = 16;
  }

  display(){
  fill (this.c);
  strokeWeight (1);
  stroke (0);

  ellipse (this.x, this.y, this.r, this.r);

  strokeWeight (0.8);
  stroke (0);
  fill (255);

  textSize (this.tS);
  textAlign (CENTER);
  text ('r=' + this.c[0] + '; g=' + this.c [1] + '; b=' + this.c [2] , this.x, this.y+this.r + this.tS);
  }

}