elizabew-Project-09-Portrait

sketch

//Elizabeth Wang
//elizabew@andrew.cmu.edu
//Section E
//Project-09

var underlyingImage;

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

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

function draw() {

    var x = random(width); //finds random x value on canvas
    var y = random(height); //finds random y value on canvas
    var ix = constrain(floor(x), 0, width - 1);
    var iy = constrain(floor(y), 0, height - 1);
    var color = underlyingImage.get(ix, iy); //gets color

    push();
    fill(color); //calls for color from image
    noStroke();
    var rw = random(1, 15); //random width of rectangles
    var rh = random(1, 15); //random height of rectangles
    rect(x, y, rw, rh); //rectangles
    pop();


}
function mouseDragged() { //when user presses and drags mouse over image, makes a bunch of random cirlces
    var colorAtMouse = underlyingImage.get(mouseX, mouseY);
    fill(colorAtMouse);
    var ew = random(5, 25); //random width of ellipses
    var eh = random(5, 25); //random height of ellipses
    noStroke();
    ellipse(mouseX, mouseY, ew, eh);
}

For this project, I was initially inspired by the style that one of my favorite painters, Jeremy Mann, uses. To me his paintings visually express an almost pixelated and futuristic-esque view of cities, and I wanted to add that sharpness and softness into this project as well.

I ended up choosing a more artsy portrait of one of my good friends. I felt that the green and white of the flower would make the final piece more visually interesting since most likely they won’t be 100% discernible.

Overall I am pretty satisfied with the results. I achieved the sharpness I wanted from the small rectangles, and the softness that the user is able to put in themselves using mousePressed.