# Shirley Chen – Project 09 – Portrait

``````// 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 setup() {
createCanvas(480, 480);
background(255);
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