juyeonk-project-09

sketch

//Claire Koh
//Section E
//juyeonk@andrew.cmu.edu
//Project-09


var balls = []; // An array that will store the little balls that make up the portrait


// Loads the image
function preload() {
    var myImageURL = "https://i.imgur.com/AOyeLOo.jpg";
    underlyingImage = loadImage(myImageURL);
}


function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels(); // Loads the pixel data of the image
}



// Determines the properties of the balls
function makeballs() {
    var ix = constrain(floor(this.x), 0, width-1);
    var iy = constrain(floor(this.y), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(this.x, this.y); //gets the color value of the image at (x,y)
    
    fill(theColorAtLocationXY) // Fills the balls with the color of the image at (x,y)
    noStroke();
    ellipse(this.x, this.y, this.ballsize); // Draws the ellipse at (x,y) with the width and the height dimension of 'ballsize' which is a random number between 2 and 8
}



// Makes the ball move
function ballspeed() {
    this.y += this.dy; // MouseY will be later assigned as 'y'
}



// Sets up the function that returns the properties of the object p, which contains information like the coordinate point of x, y, dy, a function that determines the speed of the ball, a function that creates balls, and the size of the ball
function drawPortrait(placeholderx, placeholdery, placeholderdy) {
    p = {x: placeholderx, 
         y: placeholdery,
         dy: placeholderdy,
         speed: ballspeed,
         balls: makeballs,
         ballsize : random(2,8)
        }
    return p;
}



function draw() {
    newBalls = []; // Creates an empty array that will store the values of the newly-created balls
    for (var i = 0; i < balls.length; i++) { 
        var p = balls[i];
        p.speed(); //returns the function speed() which makes the balls move
        p.balls(); //returns the function balls() which assigns the balls their properties
        newBalls.push(p); 
    }
    balls = newBalls;
}


// When the mouse is moved it replaces the placeholderx placeholdery and placeholderdy values with mouseX, mouseY and random(-20,20) and make the drawPortrait function actually happen and to be stored in the newball array
function mouseMoved() {
        var newball = drawPortrait(mouseX, mouseY, random(-20, 20));
        balls.push(newball);
        x += random(x-3, x+3);
}

For this project I wanted to make the portrait appear as if it is being drawn by bunch of rain droplets. I tried to take a break from using the function-based operation and and use the object-based operation for once. Overall I think this project was a good opportunity for me to break down how the object-based operation works and to actually learn how to use it.

Initially I tried to make the little rain droplets to drop from the sky and to collect at the bottom without overlapping each other but I legitimately could not figure out how to make that happen so I just made the little droplets to crawl up or down at a constant speed and go beyond the canvas.

^ Original sketch

^

^ While it’s being drawn

^ Almost done

 

**Credit to Grace Hou for letting me use her picture!!**