rgriswol_project-08

For this project, I decided to use a more amusing photo of my boyfriend.

I used randomly generated squares, which change size depending on the position of your mouse. Here’s some examples of what it might look like:

I tried to get the picture to generate on the faster side, though this was about as fast as I could make it, because even if I made the frame rate 2000 it didn’t appear to be faster than 50.

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 08
*
*/

var underlyingImage;

function preload() {
    var cem = "http://i.imgur.com/yOjwaHP.jpg";
    underlyingImage = loadImage(cem);
}

function setup() {
    createCanvas(422, 750);
    background(255);
    underlyingImage.loadPixels();
    frameRate(50);
}

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 colorXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(colorXY);
    rect(px, py, mouseX/10, mouseY/10);
}