Andy Warhol would love this?

As we dig into colouring pixels more and more, the first thing jumped into my mind is Andy Warhol's prints. I would be great if I could "cooperate" with Andy Warhol for this live video mirror project.

Me and my project partner Addison decided to tackle the project from different perspective, so we could get to know more about how images, pixels and other elements comprehensively in p5.js. The path I chose is to work with mapping of the brightness introduced by Mr. Dan Schiffman from his Coding Train Series. By drawing the rectangle with pixels, I could change the vScale easily to change the rectangle size, to get a different effect.

var video;

var vScale = 5;

function setup() {

createCanvas(windowWidth, windowHeight);

pixelDensity(1);

video = createCapture(VIDEO);

video.size(width / (vScale*2), height / (vScale*2));

}

function draw() {

background(51);

video.loadPixels();

for (var y = 0; y < video.height; y++) {

for (var x = 0; x < video.width; x++) {

var index = (video.width - x + 1 + (y * video.width)) * 4;

var r = video.pixels[index + 0];

var g = video.pixels[index + 1];

var b = video.pixels[index + 2];

var bright = (r + g + b) / 3;

var w = map(bright, 0, 255, 0, vScale);

noStroke();

rectMode(CENTER);

noStroke();

rect(x * vScale, y * vScale + height/2, w, w);

}

Since I need to manipulate different colours for each image, I created 3 functions to draw the different images, so I won't confuse myself by giving variables to different colours...And within each function, I hard coded the colours by trying with different brightness values. The process is definitely not smart, but it did help me understand better how the brightness works. Importing resources like face detection from ml5 sure is an easy way to apply colours for this self-portrait project, but by doing this way, I believe I got myself more familiar with the basics.

If more time is given, I wish the colours would change over time, or when mouse is pressed, there will be a slit-scan effect apply etc.

Link to the full code: https://editor.p5js.org/yz7720/sketches/RjnvQqKKZ