cduong-Project 09-Portrait

sketch

//Name: Colleen Duong
//Email: cduong@andrew.cmu.edu
//Section: D
//Project-09

var jathryn;


function preload() {
  jathryn = loadImage("https://i.imgur.com/ALuxxJ8.jpg");
}

function setup() {
  createCanvas(600, 800);
  background(0);
  jathryn.loadPixels();
  imageMode(CENTER);
  frameRate(2000);

}

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 color = jathryn.get(ix, iy);
  	var d = random(5, 20);

//Draws the rain-like lines automatically
    push();
    stroke(color);
    strokeWeight(2);
    line(px-random(10), py-random(10), px + d, py + d);
    pop();
    //ellipse(px, py, d, d);

//Draws the ellipses with your mouse
    var mouseColor = jathryn.get(mouseX, mouseY); //changes color depending on where mouse is located based on picture colors
    noStroke();
    fill(mouseColor); //fills the circle colors according to picture color
    var ellipsesize = random(5, 15);  //randomizes the size
    ellipse(mouseX, mouseY, ellipsesize, ellipsesize);  //creates circles when drawing over
}

I wanted to somewhat mimic rain falling on a window so i tried to make it look random (since rain goes crazy in the wind) and then I allowed the viewer to draw randomly sized circles anywhere your mouse goes on the canvas, which was mostly for me because I was getting a little impatient.

What it looks like when I just let the rain fall

What it looks like after I started drawing circles to get the completed image