Margot Gersing – Project 09

mgersing-09

//Margot Gersing - Project 09 - mgersing@andrew.cmu.edu - section E

var img; //original image
var sizeOne; //pixel size one
var sizeTwo; //pixel size two


function preload() {
    img = loadImage('https://i.imgur.com/Tx6sITJ.jpg?2'); //preload the image
}

function setup() {
    createCanvas(500, 761); //cnavas side of the image
    sizeOne = 1; //setting pixel size one to one
    sizeTwo = 20; //setting pixel size two to 20
    imageMode(CENTER);
    noStroke();
    background(255);
    img.loadPixels(); //pixelate the image
    frameRate(10000); //fast frame rate to load pixels faster

}

function draw() {
    //map the pixels size from 1 to 20, based on mouse postion
    var size = map(mouseY, 0, height, sizeOne, sizeTwo);
    var sizeW = map(mouseX, 0, width, sizeOne, sizeTwo);
    var x = floor(random(img.width));
    var y = floor(random(img.height));
    var pix = img.get(x, y);
    fill(pix, 128);
    ellipse(x, y, size, sizeW); //pixel is a ellipse based on the mapped size from mouse position
}

For this project I decided to do a portrait of my grandmother when she was 11 or 12. I really like this photo of her and how it serves as a view into the past. It’s interesting to use such an old photo (1940s) in such a modern context and project.

I decided to have the pixels size dependent on the mouse position. This way you can control the way the image looks. The timing of when and where your mouse is also affects how the image will turn out.