This is the original photo.
I relate the mouse movement to the area that is showing the photos
//Zhuoying Lin
//zhuoyinl@andrew.cmu.edu
//section a
//project 09
var underlyingImage;
function preload() {
var image = "https://scontent-dft4-2.xx.fbcdn.net/v/t1.0-9/14572982_354839081529321_6987009359279715749_n.jpg?oh=14016ac2f97e3340a7fb671665b39d1a&oe=589F4AC3";
underlyingImage = loadImage(image);
}
function setup() {
createCanvas(650,650);
background(0);
underlyingImage.loadPixels();
frameRate(1000);
}
function draw() {
var px = random(width);
var py = random(height);
var ix = constrain(floor(px),0,width-1);
var iy = constrain(floor(py),0,height-1);
var mousecol = underlyingImage.get(mouseX, mouseY);
//get color fo the tranangle
fill(mousecol);
noStroke();
triangle(mouseX,mouseY,pmouseX,pmouseY,mouseX-random(-1,1),pmouseY+random(-1,1));
//make trangle size related to velocity of mouse movement
}