Category: Project-03-Dynamic-Drawing

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.

afukuda_Project03

afukuda-project-03

/* 
   Name | Ai Fukuda 
   Course Section | C 
   Email | afukuda@andrew.cmu.edu
   Project | 02-VariableFaces
*/ 

var deg = mouseX;
var rad = radians(deg);
var size = 5;
 

function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
}

function draw() {
    background(214,233,248);
    if (mouseX > (width / 2)) {                                // change background color 
        background (219,233,198);
    }

    noStroke();                                                // orange square 
    fill(253, 205, 167);
    rect(40+mouseX, max((480 - mouseX)-60, 240), 40, 40);
    if (mouseX > 300) {                                
        fill(182,178,215);
    }

    fill(249, 200, 203);                                      // pink square 
    rect(60+mouseX, min((480 - mouseX)-60, 200), 60, 60);

    fill(254, 232, 147);    
    rotate(rad);                                              // yellow square
    rect(100+mouseX, min(mouseX-220), (mouseX*0.25)+60, (mouseX*0.25)+60);

    
}