Project 9, odh

odhP9

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 9

var underlyingImage;
var pict;

function preload() {
    //Loads two different images:
    //Image 1
    var myImageURL = "https://i.imgur.com/AOEHv7s.jpg";
    //Image 2
    var myImageURL2 = "https://i.imgur.com/iGOj0Sd.jpg"; 
    underlyingImage = loadImage(myImageURL);
    underlyingImage2 = loadImage(myImageURL2);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    underlyingImage2.loadPixels();
    frameRate(60);
    pict = random(1,2);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    //"gets" the pixels color in each image
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    //Draws Randomly sized, randomly located rectangles reflecting the colors in image 1
    noStroke();
    fill(theColorAtLocationXY);
    rect(px, py, random(1, 10), random(1, 10));

    //Draws a line the follows the mouses location that reflects the colors in image 2
    var theColorAtTheMouse = underlyingImage2.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    strokeWeight(10);
    line(pmouseX, pmouseY, mouseX, mouseY);
}

I chose to have different photos in my portrait, each revealed and shown in different ways. One image is revealed with random varying sized rectangles and the other with the mouse with ellipses. One appears cubist-like, and the other more expressionist.

Both shown finished: