Project 03 – Dynamic Drawing

/* eliana fleischer
    efleisch
    section e */ 

var d = 10
var x = 20
var y = 20 // sets up variables for x, y and the size of the heart
    
function setup() {
    createCanvas(600, 450);
    background(220);
}

function draw() {

    background(255 - mouseX); //makes background go from lighter to darker as the mouse moves in the positive x direction

    x = mouseX; // makes x mouse x and y mouse y + 10 
    y = mouseY + 10;
    noStroke();
    push(); // push so only small heart is filled blues
    fill(0,0,mouseX); // fills in shades of blue relativeto the x position of the mouse
    beginShape();
    vertex(30, 40); // starting point for the small heart right side
    bezierVertex(40, 10 , 55 , 50, 30 , 70); // anchor points for the small heart right side
    vertex(30,40); // starting point for the small heart left side
    bezierVertex(20, 10 , 5, 50, 30, 70); // anchor points for the small heart left side 
    endShape();
    pop();

    d = mouseX; // makes the size of the heart relative to the mouse position
    d = constrain(d, 0, 300); // keeps the size fo the big heart from getting bigger than the canvas

    if (mouseX >= mouseY){ // filling the heart in a gradient relative to x and y
        fill(mouseX,0,0);

    } else {
        fill(mouseY, 0, 0);
    }

    beginShape(); 
    vertex(x, y); // makes starting coordinates for the big heart x and y 
    bezierVertex(x + d, y - (d) , x + (d) , y , x , y + (d)); // anchor points scaled by d 
    vertex(x, y);
    bezierVertex(x - d, y - (d) , x - (d), y, x, y + (d));
    endShape();

}