For this project I decided to create a clearer perception of the image of my aunt for the portrait and the background would start to fade away. Therefore I used smaller rectangles for the main portrait and bigger ones for the background. I also wanted to add a few interactive features so when the mouse is pressed the rectangles become bigger and rotate and when the mouse is moved around the canvas words that describe my aunt start to show up on the screen.
sketch
A couple minutes into the animation
//Aadya Bhartia
//Section A
//abhartia@andrew.cmu.edu
/*The program begins to create more details with smaller rectangles for the main portrait and bigger
rectnagles for the background. When the mouse is pressed the rectnagles rotated and scaled and when the mouse
is moved around the screen words that describe my aunt in the portrait show up */
var port = 20; //global avriable to help determine size of portraitwhich is in focus
var img;
var word = ['artist','ritika','mom','loving','fasion']; //words displayed when mouse is on canvas
function preload(){
var imgURL = "https://i.imgur.com/vhfzHA1.jpg" ;
img = loadImage(imgURL);
}
function setup() {
createCanvas(400, 340);
background(0);
img.loadPixels(); //loading pixels from image
frameRate(1000);
rectMode(CENTER);
}
function draw() {
var px = random(width); //x position of rectangles
var py = random(height); //y position of rectangles
var cx = constrain(floor(px), 0, width-1);
var cy = constrain(floor(py), 0, height-1);
//colour at current pixel
var positionColour = img.get(cx, cy);
//colour at mouse position
var mouseColour = img.get(mouseX, mouseY);
//varying width of rectangle based on brightness at current pixel
var rectL = map(brightness(positionColour),0,200,0,20);
if(mouseIsPressed){ //when mouse is pressed rectangles becomes twice the size at rotate at 90 degrees
push();
translate(px,py);
scale(2);
rotate(PI/4);
noStroke();
fill(positionColour); //setting fill to colour at that pixel
rect(0,0,rectL,8);
pop();
}
//for the main portrait the rectangles are smaller while for the background they ae bigger
else{
if(px > port*4 & px < port*15 && py> port && py < (height- port*2)){ //setting position of the portrait
strokeWeight(0.1);//very thin stroke to emphasizse the portrait
stroke(220); //setting stroke as a light grey to distinguish between pixels
fill(positionColour);
rect(px,py,rectL/2,4); //making rectnagles smaller
}
//for the background
else{
strokeWeight(0.5);
stroke(220); //setting stroke as a light grey to distinguish between pixels
fill(positionColour); //fill based on colour at curent pixel location
rect(px,py,rectL,8);
}
}
//text is displayed based on mouse position and colour
fill(mouseColour); //text colour based on pixel colour at current location
textSize(random(5,15));
text(random(word), mouseX, mouseY); //sectiong random text from arrray and displayiong at mouse position
}