Project 09 – Portrait

let img;
let smallPoint, largePoint;
 var angle = 0


function preload() {
  img = loadImage("https://i.imgur.com/43WGeu8.jpg");
}

function setup() {

  createCanvas(500,500);
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
  
}

function draw() {
  //retrive the image pixels in different sections to be able to assign specific 
  //pixel sizes for each section
  let x = floor(random(img.width));
  let y = floor(random(img.height/4));
  let y1 = floor(random(img.height/2));
  let y2 = floor(random(img.height/4*3));
  let y3 = floor(random(img.height));
  let pix = img.get(x, y);
  let pix1 = img.get(x, y1);
  let pix2 = img.get(x, y2);
  let pix3 = img.get(x, y3);
  //pixels are drawn where the mouse location is 
  let pixM = img.get(mouseX,mouseY);

//when the mouse is pressed, make the rectangles horizontally oriented,
//sizes change according to mouseY value
if (mouseIsPressed){
  fill(pix3);
  rectMode(CENTER)
  	rect(x,y3, 50, mouseY/50);
  fill(pix2)
  	rect(x,y2, 25,mouseY/100)
  fill(pix1)
	rect(x,y1, 10, mouseY/150)
  fill(pix)
	rect(x,y, 5, mouseY/200)
  fill(pixM)
	rect(mouseX,mouseY,5,10)
}
//naturally, rectangles are vertical. They are larger at the top of the canvas
//and towards the bottom, get smaller in size to get fading away/gradient effect.
//get larger proportionally (across different sections) as mouseX increases
 else{
  fill(pix);
  rectMode(CENTER)
  	rect(x,y, mouseX/50, 50);
  fill(pix1)
  	rect(x,y1, mouseX/100,25)
  fill(pix2)
	rect(x,y2, mouseX/150,10)
  fill(pix3)
	rect(x,y3, mouseX/200,5)
  fill(pixM)
	rect(mouseX,mouseY,5,10)
}
}
//when the mouse is clicked, the colors invert
function mousePressed(){
	filter(INVERT)

}