Jonathan Liang – Project 9 – Computational Portrait

sketch

//Jonathan Liang
//jliang2
//section A

var springy = 0.7; // how much velocity is retained after bounce
var np = 50;      // how many particles

var underlyingImage;

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

 
function particleStep() {
    var ix = constrain(floor(this.x), 0, width-1);
    var iy = constrain(floor(this.y), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY)
    ellipse(this.x, this.y, 5);

    
    this.x += this.dx;
    this.y += this.dy;


    if (this.x > width) { // bounce off right wall
        this.x = width - (this.x - width);
        this.dx = -this.dx * springy;
    } else if (this.x < 0) { // bounce off left wall
        this.x = -this.x;
        this.dx = -this.dx * springy;
    }
    if (this.y > height) { // bounce off bottom
        this.y = height - (this.y - height);
        this.dy = -this.dy * springy;
    } else if (this.y < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy * springy;
    }

}
 

 
 
// create a "Particle" object with position and velocity
function makeParticle(px, py, pdx, pdy) {
	

    p = {x: px, y: py,
         dx: pdx, dy: pdy,
         step: particleStep,
        }
    return p;
}
 
var particles = [];
var randx = [];
var randy = []; 
 
function setup() {
    createCanvas(380, 480);
    background(0);
    underlyingImage.loadPixels();
    for (i = 0; i < np; i++) {
        randx[i] = random(-50, 50);
        randy[i] = random(-50, 50);
    }
    frameRate(5);
}
 
 
// draw all particles in the particles array
//
function draw() {
    background(230);
    for (var i = 0; i < np; i++) {
        // make a particle
        var p = makeParticle(200, 350,
                             randx[i], randy[i]);
        // push the particle onto particles array
        particles.push(p);
    }
    
    for (var i = 0; i < particles.length; i++) { // for each particle
        var p = particles[i];
  
        p.step();
    }

}

I chose a picture of my friend from high school. I wanted the ellipses that generated the image to first start from his mouth and then bounce everywhere to generate the image. Kind of like vomiting, but with a more artistic result. The ellipses slow down after they hit the walls so that it is clearer that they are bouncing and not just randomly generating wherever they want. Below is a few screenshots of the image being generated over time.