Can we generate colour palettes from live video?

Details

Tool to help people export colour palettes from live video input

Role

Self-led

Tools

p5.js

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.

You can try the palette generator by clicking here.

A short video of the tool in use.

Code

All the code is available here.

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

                 }

               }

̣̉̉̉̉̉