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. 

Drawing in process (start)
Drawing in process (general figure)
Drawing in process (better resolution)

Leave a Reply