lee chu – project 09

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 09

var underlyingImage;
var px = [];
var py = [];
var directionX = [];
var directionY = [];
var ix = [];
var iy = [];

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

function setup() {
    createCanvas(600, 300);
    background(0);
    underlyingImage.loadPixels();
    frameRate(60);

    // starting arrays for painters
    px.push(random(width));
    py.push(random(height));
    directionX.push(1);
    directionY.push(1);
}

function draw() {
    underlyingImage.resize(width, height); 

    // looping for individual painters
    for (i = 0; i < px.length; i ++) {
        ix = constrain(floor(px[i]), 0, width-1);
        iy = constrain(floor(py[i]), 0, height-1);
        var theColorAtLocationXY = underlyingImage.get(ix, iy);

        noStroke();
        fill(theColorAtLocationXY);
        rectMode(CENTER);
        rect(px[i], py[i], 10, 10);

        // random movement
        px[i] += directionX[i] * random(-2, 10);
        py[i] += directionY[i] * random(-2, 10);

        // keeping painters on the canvas
        if (px[i] > width) {
            px[i] = 0;
        }
        else if (px[i] < 0) {
            px[i] = width;
        }
        if (py[i] > height) {
            py[i] = 0;
        }  
        else if (py[i] < 0) {
            py[i] = height;
        }
    }
}

// adding painters with click
function mousePressed() {
    px.push(random(width));
    py.push(random(height));
    directionX.push(1);
    directionY.push(random(-1, 1, 2));
}

I miss Heath Ledger. I had wanted to create a bunch of little rectangular painters which make their way across the canvas.

what the end result should look like – CLICK on the canvas to introduce more painters

Leave a Reply