Jamie Dorst Project 09 Portrait

sketch

/*
Jamie Dorst
jdorst@andrew.cmu.edu
Project 09
Section A
*/

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/Dd4CnQI.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(360, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(30);
}

function draw() {
    // variables
    // first line coordinates
    var x1 = random(width);
    var y1 = random(height);
    // make line stroke bigger further from the face (slightly above center)
    var distBtwn = dist(width / 2, (height / 2) - 100, x1, y1);
    var sw = map(distBtwn, 0, 350, 2, 10);
    // picture colors
    var ix = constrain(floor(x1), 0, width-1);
    var iy = constrain(floor(y1), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    // second line coordinates
    // make lines shorter closer to the center
    var xy = map(distBtwn, 0, 350, 5, 30);
    var x2 = x1 + xy * random(-2, 2);
    var y2 = y1 + xy * random(-2, 2);
    // randomize stroke caps
    var num = random(2);
    var sCap;

    // assign stroke values
    if (floor(num) === 0) {
        sCap = SQUARE;
    } else if (floor(num) === 1) {
        sCap = ROUND;
    }
    strokeCap(sCap);
    strokeWeight(sw);
    stroke(theColorAtLocationXY);
    // draw lines
    line(x1, y1, x2, y2);
}

For this project, I was inspired by the idea of a painting. I decided to make it draw using lines, and I had it randomly select a stroke cap to emulate even more a random brush stroke. I also made it so that closer to the face, the strokes are shorter and thinner, so that more detail can be achieved. Toward the outside of the canvas, the strokes get longer and thicker. Overall I thought this project was pretty fun to do and try out with different photographs.