Project 09: Portrait

sketch

//Name: Hari Vardhan Sampath
//Section: E
//eMail address: harivars@andrew.cmu.edu
//Project-09

// global variable to store the preloaded image
var img;

function preload() {
    img = loadImage('https://i.imgur.com/8WPELuP.jpg');
}

/* 
Reference from lecture-20's random bouncing particles.
The bouncing particles will draw the image by accessing
the pixel colors it traverses.
Additionally, the mouseY position will control the alpha
of the pixel color and the mouse click will reset the background
to different grey color, also using the mouseY position
for the user to play with the abstract representation.
*/

// number of particles
var np = 100;  

function particleStep() {
    this.age++;
    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;
    } else if (this.x < 0) { // bounce off left wall
        this.x = -this.x;
        this.dx = -this.dx;       
    }
    if (this.y > height) { // bounce off bottom
        this.y = height - (this.y - height);
        this.dy = -this.dy;
    } else if (this.y < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy;
    }
}


function particleDraw() {
    this.clr = img.get(this.x, this.y);
    stroke(this.clr[0], this.clr[1], this.clr[2], mouseY);
    point(this.x, this.y);
}


function makeParticle(px, py, pdx, pdy) {
    p = {x: px, y: py,
         dx: pdx, dy: pdy,
         age: 0,
         stepFunction: particleStep,
         drawFunction: particleDraw
        }
    return p;
}


var particles = [];


function setup() {
    createCanvas(img.width, img.height);
    background(mouseY);
    for (var i = 0; i < np; i++) {
        var p = makeParticle(600, 600,
                             random(-10, 10), 
                             random(-10, 10));
        particles.push(p);
    }
    frameRate(15);
}


function draw() {
    strokeWeight(random(5));
    for (var i = 0; i < np; i++) { 
        var p = particles[i];
        p.stepFunction();
        p.drawFunction();
    }
}

// mouse press will refresh the background to re-draw
function mousePressed() {
  background(mouseY);
}