Nawon Choi— Project 09 Computational Portrait

sketch

// Nawon Choi
// nawonc@andrew.cmu.edu
// Section C
// Computational Portrait


// starting with sample code
var underlyingImage;

// some code taken from my Exam 2 Problem B solution
var xArr = [];
var yArr = [];

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

function setup() {
    createCanvas(400, 400);
    background(0);
    underlyingImage.loadPixels();
    frameRate(1000);
}

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);

    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);

    for (var i = 1; i < (xArr.length); i++) {
        // add a random value to each point
        var rx = randomize();
        var ry = randomize();
        var x1 = xArr[i - 1];
        var y1 = yArr[i - 1];
        var x2 = xArr[i] + rx;
        var y2 = yArr[i] + ry;
        stroke(theColorAtTheMouse);
        line(x1, y1, x2, y2);
        xArr[i] = x2;
        yArr[i] = y2;
    }

    // create colored rectangles to reveal the image 
    strokeWeight(3);
    stroke(theColorAtLocationXY);
    rect(px, py, 10, 10);
}

function mouseMoved() {
    // remove last point on array if length is greater than 3
    if (xArr.length > 3) {
        xArr.shift();
        yArr.shift();
    } 
    // add mouse points to an array
    xArr.push(mouseX);
    yArr.push(mouseY);   
}

function randomize() {
    // find a random value from -4 to 4
    var x = random(-4, 4);
    return x;
}

For this project, I wanted to create something interactive and playful. The user is actually disrupting the image from being revealed in an orderly way. The random lines generated by the mouse movement were taken from a previous assignment. I tried to apply it to this project because I thought the random lines would create a fun and playful brush stroke effect. Depending on how the user moves the mouse, it can either disrupt the image, or add interesting movement to the portrait. See the imgur link in the code to see original image.

• 

•