Lanna Lang – Project 09 – Portrait

sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 09 - Computational Portrait

var px = [];
var py = [];

//load the underlying image
function preload() {
    var imgURL = "https://i.imgur.com/mSgPk6o.jpg";
    underlyingImage = loadImage(imgURL);
}

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

function draw() {

    //for loop to draw the random lines that draw
    //when the new frame is displayed
    for (var i = 0; i < frameCount; i++) {

        //the x and y array is
        //drawn randomly
        px[i] = random(width);
        py[i] = random(height);
        
        //get the color of the underlying image
        //at the specific x, y location
        var ix = constrain(floor(px[i]), 0, width-1);
        var iy = constrain(floor(py[i]), 0, height-1);
        var theColorAtLocationXY = underlyingImage.get(ix, iy);

        //the person is drawn with smaller lines = more detail
        //this if statement is for the head
        if (px[i] >= 230 & px[i] <= 400 && 
            py[i] >= 70 && py[i] <= 300) {
            strokeWeight(1);
            //the line drawn is the same color as the 
            //underlying image at its location
            stroke(theColorAtLocationXY);
            //the lines drawn is at a random angle
            line(px[i] + random(5), py[i] + random(5), 
                px[i] + random(10), py[i] + random(10));

        //this if statement is for the chest
        } else if (px[i] >= 30 & px[i] <= width && 
            py[i] >= 270 && py[i] <= 450) {
            strokeWeight(1);
            stroke(theColorAtLocationXY);
            line(px[i] + random(5), py[i] + random(5), 
                px[i] + random(10), py[i] + random(10));

        //this if statement is for the left hand & the sun
        } else if (px[i] >= 50 && px[i] <= 200 && 
            py[i] >= 90 && py[i] <= 220) {
            strokeWeight(1);
            stroke(theColorAtLocationXY);
            line(px[i] + random(5), py[i] + random(5), 
                px[i] + random(10), py[i] + random(10));

        //this if statement is for the left arm
        } else if (px[i] >= 10 & px[i] <= 120 && 
            py[i] >= 220 && py[i] <= 350) {
            strokeWeight(1);
            stroke(theColorAtLocationXY);
            line(px[i] + random(5), py[i] + random(5), 
                px[i] + random(10), py[i] + random(10));

        //the background is drawn with thicker lines = less detail
        } else {
            strokeWeight(4);
            stroke(theColorAtLocationXY);
            line(px[i] + random(10), py[i] + random(10), 
                px[i] + random(50), py[i] + random(50));
        }
    }
    
}

I struggled creating this code because I was very adamant about using random lines as my custom pixel and I couldn’t find out how to exactly execute it, but after using frameCount, I finally got it. I had a lot of fun writing my code, and this is one of my favorite photos I’ve taken so I am very satisfied with my final result.