# merlebac Project-09-Portrait

``````// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-09

var underlyingImage;

var myImageURL = "https://i.imgur.com/lcdPSVo.jpg";
// Loads the image and turns it into a variable
}

function setup() {
createCanvas(500, 480);
background(0);
frameRate(60);
// I increased the frame rate to 60 so it would appear faster
}

function draw() {
var px1 = random(width);
var py1 = random(height);
// Creates random location for small square
var px2 = random(width);
var py2 = random(height);
// Creates random location for large square
var ix1 = constrain(floor(px1), 0, width-1);
var iy1 = constrain(floor(py1), 0, height-1);
// Constrains px1 and py1
var ix2 = constrain(floor(px2), 0, width-1);
var iy2 = constrain(floor(py2), 0, height-1);
// Constrains px1 and py1
var theColorAtLocationXY = underlyingImage.get(ix1, iy1);
var theColorAtLocationXY = underlyingImage.get(ix2, iy2);

noStroke();
fill(theColorAtLocationXY);
// Fills the squares with portions of the image
rect(px1, py1, 6, 6);
rect(px2, py2, 9, 9);
// Generates random rectangles

var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
stroke(theColorAtTheMouse);
line(pmouseX, pmouseY, mouseX, mouseY);
}``````

Working on this project was extremely difficult for me. For some reason the image wouldn’t generate a large amount of the time. Some of the edits that I made were increasing the frame rate, and changing the ellipses to rectangles. I did this because I thought the rectangles looked more visually appealing and covered the screen more quickly.