Christine Chen-Project-09-Portrait

Christine Chen-Project-09-Portrait

Christine Chen
Section E
var hiddenImage;

function preload() {
    var imageURL = "";
    hiddenImage = loadImage(imageURL);

function setup(){
    createCanvas(480, 480);

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
    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){
    } else {

//redraws background(start over)
function mousePressed(){

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.

Original photo
Initial stages
When mouse is at the right(large pixels)
When mouse is at the left(small pixels)


Leave a Reply