merlebac Project-09-Portrait

Pixel Portrait

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

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/lcdPSVo.jpg";
    underlyingImage = loadImage(myImageURL);
    // Loads the image and turns it into a variable
}

function setup() {
    createCanvas(500, 480);
    background(0);
    underlyingImage.loadPixels();
    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.