Eunice Choe – Project-09 – Portrait

sketch

/*Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-09*/

var underlyingPic;

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

function setup() {
    createCanvas(320, 480);
    background(200, 100, 107);
    underlyingPic.loadPixels();
}

function draw() {
    var px = random(width);	//random y within width
    var py = random(height);	//random x within height
    var iX = constrain(floor(px), 0, width-1);
    var iY = constrain(floor(py), 0, height-1);
    //extracting color from base image
    var colorAtXY = underlyingPic.get(iX, iY);
    noStroke();
    fill(colorAtXY);
    // ellipses with random widths and heights fill canvas
    ellipse(px, py, random(1, 10), random(1, 10));

   	// when the mouse moves across canvas, rectangles of random
    // sizes will follow the mouse
    var colorAtMouse = underlyingPic.get(mouseX, mouseY);
   	fill(colorAtMouse);
    noStroke();
   	rect(mouseX, mouseY, random(3, 6), random(3, 6));
   }

function mousePressed(){
    // when mouse clicks, the name "sophia" appears on mouse location
    // with base image colors
    var colorAtXY = underlyingPic.get(mouseX, mouseY);
    textSize(20);
    text("sophia", mouseX, mouseY);


   }

My project reveals an image of my friend Sophia through ellipses of random widths and heights. Also, someone can use the mouse to speed up the image reveal because there is a trail of rectangles that follow the mouse’s location. Another fun element I added was showing Sophia’s name when the mouse is clicked on the canvas. Overall, this project was fun to complete because of its personal significance to me. Going forward, I am excited to see how I can represent more images computationally.

This screenshot shows the start of the image reveal, the trail of rectangles, and the “sophias” that appear when clicked.
The final image that appears.
The original image.

Leave a Reply