Jessica Timczyk – Project 09 – Portrait

Portrait

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-09-Portrait

// global variables
var underlyingImage;
var sx = [];
var sy = [];
var dx = [];
var dy = [];

function preload() { // preloads image
    var myImageURL = "https://i.imgur.com/CKGh2Ed.jpg?1";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(300, 400);
    background(255);
    underlyingImage.loadPixels();

    for (i = 0; i < 1000; i++){ // for loop to randomly pick the positions and speed of each square
        sx[i] = random(width);
        sy[i] = random(height);
        dx[i] = random(-5, 5);
        dy[i] = random(-5, 5);
    }
    frameRate(10);

}

function draw() {
    background(255);
    noStroke();
    for (i = 0; i < 1000; i++) {
        var colorAtSquare = underlyingImage.get(sx[i], sy[i]); // the color of each square changes as it moves across
        // the screen to match the photo under neath
        fill(colorAtSquare);
        rect(sx[i], sy[i], 20, 20); // drawing the rectangles and updating their locations with the speed
        sx[i] += dx[i];
        sy[i] += dy[i];

        // lets the rectangles wrap arround to the other side when they go off screen
        if (sx[i] > width){
         sx[i] = 0;
        } else if (sx[i] < 0) {
        sx[i] = width;
        }
        if (sy[i] > height) {
            sy[i] = 0;
        } else if (sy[i] < 0) {
            sy[i] = height;
        }
        
    }




}

It took me a while to decide on how I wanted to make this portrait. Although I knew which photo I wanted to do, I wasn’t sure how I wanted to manipulate it. I ended up really like this project because it allowed me manipulate photos in fun and interesting ways.