Cathy Dong – Project 09 – Portrait

sketch

/* Cathy Dong
   Section D
   yinhuid@andrew.cmu.edu
   Project 09 - Portrait
*/

// load image as color base
var baseImg;

// preload base image
function preload() {
    var img = "https://i.imgur.com/zdFmG5k.jpg";
    baseImg = loadImage(img);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    baseImg.loadPixels(); //load image pixels
    frameRate(100000); //set draw circle speed with framerate
}

function draw() {
    // set random x and y to make points
    var px = random(width);
    var py = random(height);
    // constrain to keep x and y within canvas
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    // fill with base image color
    var colorXY = baseImg.get(ix, iy);
    // change circle size based on distance to center
    var distance = dist(px, py, width / 2, height / 2);
    var cirSize = map(distance, 0, sqrt(2) * width / 2, 10, 25);

    // draw circles
    noStroke();
    fill(colorXY);
    circle(px, py, cirSize);

}

In this project, I used dots/ circles to draw the abstracted self-portrait. Since my face is centered in the image, I used smaller circles near center and larger ones on the canvas edges. The idea is to have finer resolution on the face, whereas the background is blurred.