Shirley Chen – Project 09 – Portrait

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project 09

var myPic; 
var x;
var y;
var dx;
var dy;
var colAtPoint;
var count = 0;

function preload() {
    var myPiclink = "https://i.imgur.com/uktbZVu.jpg";
    myPic = loadImage(myPiclink);
}


function setup() {
    createCanvas(480, 480);
    background(255);
    myPic.loadPixels();
    x = random(width);
    y = random(height);
    dx = random(-1,1);
    dy = random(-1,1);
    frameRate(20);
}



function draw() {   
    
// get the pixel color for the geometry
    var ix = constrain(floor(x), 0, width-1);
    var iy = constrain(floor(y), 0, height-1);
    colAtPoint = myPic.get(ix, iy); 
    noStroke();
    fill(colAtPoint);
//If the number of pressing the mouse is even, then draw ellipse
    if (count % 2 == 0){
        ellipse(x, y, 10);
    }
//If the number of pressing the mouse is odd, then draw sqaure
    else{
        rect(x,y,10,10);
    }

//Update the coordinates of the geometry
    x += dx * 5 ;
    y += dy * 10  ;

//Make the geometry bounces back when it hits the boundry
    if (x > width || x < 0) {
        dx = -dx
    }  
    if (y > height || y < 0) {
        dy = -dy        
    } 

    
}

//When the mouse clicked there is a new serie of geometry being drawn with oppsite direction
function mousePressed() {
    count += 1;
    x = mouseX;
    y = mouseY;
    dx = -dx;
    dy = -dy;

}

For this project I used one of my best friends photo. I used two different geometries – square and circle to gradually reveal the photo by displaying pixels of the photo. The displaying geometry will change between these two by the user clicking the mouse. The square and circle would bounce back when they hit the boundary of the canvas. Therefore, the image will gradually show up at the paths that are drawn by these geometries.

Twenty Second Later

Two Minutes Later

Final