Nadia Susanto – Project 09 – Computational Portrait

sketch

// Nadia Susanto
// nsusanto@andrew.cmu.edu
// Section B
// Project-09-Computational Portrait

var underImage;

function preload() {
    //preloading image from imgur
    //var myImage = "https://i.imgur.com/R80wzCp.jpg";
    var myImage = "https://i.imgur.com/uezsOBb.jpg";
    underImage = loadImage(myImage);
}

function setup() {
    createCanvas(480, 480);
    //resize the image so it fits the canvas
    underImage.resize(480, 480);
    background(0);
    underImage.loadPixels();
    frameRate(100);

}

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);
    //gets colors from specific image location
    var colorXY = underImage.get(ix, iy);

    //random rectangles
    stroke(colorXY);
    strokeWeight(random(1, 10));
    noFill();
    rect(ix, iy, 20, 10);
}

//random ellipses when mouse is pressed
function mouseDragged() {
    ellipse(mouseX, mouseY, random(5, 50), random(5, 30));
}

For my portrait picture I used a picture of myself in a bamboo forest in Japan. I decided to use this picture because it has many different shades of green to the image. Since there was only one main color, I wanted to incorporate different shapes. The main shape is a rectangle, and when the mouse is dragged it switches to ellipses.