Charmaine Qiu – Project 09

sketch

//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.