Kyle Lee Project 09

For my self portrait, I randomly spread particles across the canvas, and set each fill color to its corresponding location and color on the original image. I then cascaded each to move in random directions, creating streaks of color that distort the image the longer the code runs.

kdlee-09

var underImage;
var x = [];
var y = [];
var dx = [];//movement
var dy = [];//movement
var col = [];//color
var d = [];//diameter
var movement = .5;//speed of particles
var particles = 3000;//number of particles
var diameterS = 1;
var diameterL = 10;

function preload() {
    var url = "http://i.imgur.com/S9K9aFe.jpg";
    underImage = loadImage(url);
}

function setup() {
    createCanvas(400, 600);
    background(250);
    underImage.loadPixels();
    frameRate(30);
    noStroke();

    for (i = 0; i < particles; i++) { // for creating 2000 elements
        x[i] = random(width);
        y[i] = random(height);
        dx[i] = random(-movement, movement);
        dy[i] = random(-movement, movement);
        d[i] = random(diameterS, diameterL);
        col[i] = underImage.get(x[i], y[i]);//pulls color from coordinate
    }
}

function draw() {
    for (i = 0; i < particles; i++) {  // for drawing 2000 elements
        fill(col[i]);
        ellipse(x[i], y[i], d[i], d[i]);
        x[i] += dx[i]//builds movement
        y[i] += dy[i]//builds movement
        if (x[i] > width) x[i] = 0;        // wrap horizontally
        else if (x[i] < 0) x[i] = width;
        if (y[i] > height) y[i] = 0;       // wrap vertically
        else if (y[i] < 0) y[i] = height;
    }
}