Project : 09

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