//Charmaine Qiu
//charmaiq@andrew.cmu.edu
//Section E
//Project 09
var underlyingImage;
//create an empty array
var xarray = []
var yarray = []
//load the image from imgur.com
function preload() {
var myImageURL = "https://i.imgur.com/cplu0CL.jpg";
image = loadImage(myImageURL);
}
function setup() {
createCanvas(400, 300);
background(0);
image.loadPixels();
frameRate(100000000); //generate the image in a faster speed
}
function draw() {
var px = random(width); //the location for x coordinate
var py = random(height); //the location for y coordinate
var ix = constrain(floor(px), 0, width-1); //constraining within the canvas
var iy = constrain(floor(py), 0, height-1); //constraining within the canvas
var theColorAtLocationXY = image.get(ix, iy);//fill in the color according to color of image
noStroke();
fill(theColorAtLocationXY);
//draw the ellipses
ellipse(px, py, 6, 6);
//get the color of image at the mouse
var theColorAtTheMouse = image.get(mouseX, mouseY);
stroke(theColorAtTheMouse);
//loop over the length of the array
for (var i = 0; i < xarray.length; i ++){
//fill with the color at the mouse
fill(theColorAtTheMouse);
ellipse(xarray[i], yarray[i], 5, 5);
//make the ellipses go down mimicking paint drooling down
yarray[i] += 0.5;
}
}
//when mouse is dragged, add the mouse position to the array
function mouseDragged(){
xarray.push(mouseX);
yarray.push(mouseY);
}
//when mouse is pressed, a new array is created
function mousePressed(){
xarray = [];
yarray = [];
}
In this project, I had fun creating an interactive portrait of myself. I mimicked splashes of paint dropping down when the mouse is dragged on the canvas. I got to utilize what I learned from the previous assignments and incorporate them in my project.