Shariq M. Shah – Project 09 – Portrait

shariqs-09-project

// Shariq M. Shah
// Project 09
// Section C

var underlyingImage;

function preload() {
    //changing example image
    var myImageURL = "https://i.imgur.com/hpfafgd.jpg[/img]";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    //making size of "pixels" geometries proportional to distance from CENTER
    ellipse(px, py, 0.05 * dist(px, py, width/2, height/2), 0.05 * dist(px,     py, width/2, height/2));

    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    noFill();
    //drawing ellipses based on mouse location
    ellipse(pmouseX, pmouseY, 10, 10);
    //placing "mom" text at each ellipse
    textSize(0.03 * dist(px, py, width/2, height/2));
    text('mom', px, py);
}

In this project, I used a picture of my mom from when we went on a family trip to Chicago this summer. I used small ellipses and text that change in size based on their distance from the center to develop the computational portrait of my mom. In addition, small empty ellipses are drawn with colors of the picture as the user moves the mouse. The drawn ellipses, the “pixel” ellipses, and the text make up the overall computational portrait of my mom. She’ll love seeing this when I go back for Thanksgiving break.