Project : 09

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
Image almost complete without mouse being pressed or on canvas
Image with words being displayed as the mouse is moved around screen
Image with mouse pressed

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

Leave a Reply