Jinhee Lee; Project-09

jinheel1_project-09

//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-09

var underlyingImage;

function preload() {
    var myImageURL = "http://i.imgur.com/EH0p0KK.png";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(600, 600);
    background(70); //dark grey background to contrast with black
    underlyingImage.loadPixels();
    frameRate(25); //fast frame rate to fill up canvas
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = floor(px);
    var iy = floor(py);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    var pixelSize = 10; //size of pixels spawning 

    var bright = brightness(theColorAtLocationXY); //extract brightness of pixel for greyscale effect
    var amt = map(bright, 0, 100, 0, 255); //map from 0 to 255 so overall image isn't too dark

    noStroke();
    fill(amt); //fills pixel with appropriate brightness value
    ellipse(px, py, pixelSize, pixelSize);
}

function mouseDragged() { //draws a line with mouse
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse); //while pixels are greyscaled, the line is colored
    strokeWeight(10); //thicker stroke so it can be seen

    line(pmouseX, pmouseY, mouseX, mouseY);
}

I made the generated pixels with a greyscale effect, along with a mouseDragged() function that adds color depending on the stroke of the mouse. Like breathing life into the photo, though if left alone too long, it would revert back to grey with the refreshing pixels.