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.