aerubin-Project-09-Computational Portrait

For this project, I selected an image that describes my passion for music and playing the viola. The portrait created from the code can be altered depending on where the mouse is located as the picture is being drawn one square at a time. The placement of the mouse determines the size of the squares. Pictured above, this is what occurs when both large and small squares are utilized.

Pictured directly above is when only small squares are utilized. This can be drawn by putting the mouse in the upper left hand corner.
Pictured below is when only large squares are used. This can be drawn by putting the mouse in the lower right hand corner.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-09-Computational Portrait

var hiddenImage;

function preload() {
    var myImageURL = "https://i.imgur.com/7jZWZyX.jpg";
    hiddenImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(338, 450);
    background(255);
    hiddenImage.loadPixels();
    frameRate(100);
}

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);
    var ColXY = hiddenImage.get(ix, iy);

    noStroke();
    fill(ColXY);
    //if the mouse is in the upper half of the canvas, make 2x2 squares
    if(mouseY<height/2) {
        rectMode(CENTER);
        rect(px, py, 2, 2); 
    }
    //if the mouse is on the left side of the canvas, make 4X4 squares
    if(mouseX<width/2) {
        rectMode(CENTER);
        rect(px, py, 4, 4)
    }
    //if the mouse is on the right side of the canvas, make 8x8 squares
    if (mouseX>width/2) {
        rectMode(CENTER);
        rect(px, py, 8, 8);
    }
    //if the mouse is in the lower half of the canvas, make 12x12 squares
    if (mouseY>height/2) {
        rectMode(CENTER);
        rect(px, py, 12, 12);
    }
}