Christine Chen-Project-09-Portrait

Christine Chen-Project-09-Portrait

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-09
*/
var hiddenImage;

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

function setup(){
    createCanvas(480, 480);
    background(100);
    noStroke();
    imageMode(CENTER);
    hiddenImage.loadPixels();
    frameRate(150);
}

function draw() {
    //randomizes pixel location
    var pixelX = random(0, width);
    var pixelY = random(0, height);

    //constrains pixel x values
    var imageX = constrain(floor(pixelX), 0, width); 

    //constrains pixel y values
    var imageY = constrain(floor(pixelY), 0, height);

    //get hiddenImage data
    var locationXYcolor = hiddenImage.get(imageX, imageY);

    //rect size increases with increasing mouseX
    var size = map(mouseX, 0, width, 5, 20)

    stroke(135, 183, 237); //blue
    strokeWeight(0.1); //thin line
    fill(locationXYcolor);
    rect(pixelX, pixelY, size, size);

    //faster on right, slower on left
    //smaller pixels on right need to run faster to show imge
    if (mouseX > width/2){
        frameRate(10);
    } else {
        frameRate(250);
    }
}

//redraws background(start over)
function mousePressed(){
    background(100);
}

For this project, I used my brother’s photo, which I took for his high school senior d. I was playing around with pixel sizes and frame rates. The smaller mouse x is, the smaller the pixels are. Because smaller pixels take more time to draw out a bigger part of the image, I made the frame rate faster for them.I gave the pixels light blue outlines to give the image more of a “mosaic” feeling.