ghou-project-03-DynamicDrawing

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 03 
var br;
var bb;
var bg;
var ss;

function setup(){
    createCanvas(640,480);
    rectMode(CENTER);
    background(255);
    //base text
    br = width/6 + 30;
    bb = height/4 + 100;
    bg = 200;
    //setting colour of the text so it blends in with that region of colour
    textSize(30);
    fill(br,bb,bg);
    text("drag mouse to draw",200,400);
}
ss = 0;
//creating the heart
function draw(){
    fill(255);
    noStroke();
    
    
    // heart changes size when drawing (mouse is pressed)
    // heart creates gradient colour the bigger it is
    if (mouseIsPressed){
        if (ss < 1.5){
            ss = ss +0.005;
            fill(255,255-ss*170,255-ss*170)
        }
    }
    //creates gradient when heart shrinks
    else if (ss >0){
        ss = ss - 0.02;
        fill(255,255-ss*200,255-ss*200)
    }
    // heart is red when at largest and text appears to tell audience to let go of the mouse
    if (ss >= 1.5){
        push();
        fill(255);
        text("let go!!",280,70);
        pop();
        fill(255,0,0);

    }
    
    push();
    translate(width/2,height/2);//so the posotion doesnt get messed up as it scales
    scale(ss); 
    ellipse(-55,-30,130,150);
    ellipse(55,-30,130,150);
    triangle(-105,19,0,130,0,0);
    triangle(105,19,0,130,0,0);
    pop();
}

//drawing with the mouse (in gradient colour)
function mouseDragged(){
    br = mouseX/6 + 30;
    bb = mouseY/4 + 100;
    bg = 200;
    noStroke();
    fill(br,bb,bg);
    ellipse(mouseX,mouseY,80,80);
}

in my sketchbook I included some sketches on how to do the layering so that the text hides behind the “drawing”.

This dynamic drawing is inspired with social media “Likes”, I had originally wanted my audience to double-click for the heart to appear, as it represents a double tap on social platforms. However, I could not get the doubleClicked() function to work and it could be something in the DOM file that I’m not knowledgable enough to get into. I figured the gradient is a pretty way to impress the audience.