Author: jinheel1@andrew.cmu.edu

jinheel1_project-03

var sqCenterX = 240; //dimensions of yellowing square
var sqCenterY = 240;
var sqW = 0;
var sqH = 0;
var sqMin = 0; //sets min and max size of square
var sqMax = 200;

var ellCenterX = 240; //dimensions of doorknob within square
var ellCenterY = 240;
var ellPlace = 0; //placeholder variable for placing doorknob after translate()
var ellW = 0;
var ellH = 0;
var ellMin = 0; //min size of doorknob set at 0
var ellXMax = 80; //max horizontal size of doorknob
var ellYMax = 150; //max vertical size of doorknob
var ellAngle = 0; //initiates doorknob angle
var ellAngleMin = 0;
var ellAngleMax = 360;

var lnTopX = 440; //dimensions of purple borderlines
var lnTopY = 40;
var lnTopX2 = 440;

var lnLeftX = 40;
var lnLeftY = 40;
var lnLeftY2 = 40;

var lnBottomX = 40;
var lnBottomY = 440;
var lnBottomX2 = 40;

var lnRightX = 440;
var lnRightY = 440;
var lnRightY2 = 440;

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

function draw() {
    background(0);
    rectMode(CENTER);
    
    var masterHand = map(mouseX, 0, width, 0, 1); //used in lerp functions to change picture
    var fromCol = color(255); //white when square is smallest
    var toCol = color(255,255,0); //yellow when square is largest
    var col = lerpColor(fromCol, toCol, masterHand); //changes color with mouseX position

    strokeWeight(0);
    fill(col); //color for square
    rect(sqCenterX, sqCenterY, sqW, sqH); //square gets yellower with size

    fill("red"); //color for rotating "doorknob"
    push();
    translate(ellCenterX,ellCenterY); //"translates" origin, doorknob rotates on center
    rotate(radians(ellAngle)); //rotates the doorknob
    ellipse(ellPlace, ellPlace, ellW, ellH); //changes size and angle with mouseX position
    pop();

    stroke(255,0,255); //purple color for lines
    strokeWeight(5); //below are the purple lines that grow
    line(lnTopX, lnTopY, lnTopX2, lnTopY);
    line(lnLeftX, lnLeftY, lnLeftX, lnLeftY2);
    line(lnBottomX, lnBottomY, lnBottomX2, lnBottomY);
    line(lnRightX, lnRightY, lnRightX, lnRightY2);

    if (mouseX <= width & mouseY <= height) { //changes only when mouse is in canvas
        sqW = lerp(sqMin, sqMax, masterHand); //changes square width
        sqH = lerp(sqMin, sqMax, masterHand); //changes square height

        ellW = lerp(ellMin, ellXMax, masterHand); //changes doorknob width
        ellH = lerp(ellMin, ellYMax, masterHand); //changes doorknob height
        ellAngle = lerp(ellAngleMin, ellAngleMax, masterHand); //changes doorknob angle

        lnTopX2 = lerp(lnTopX, height - lnTopX, masterHand); //changes the purple line length
        lnLeftY2 = lerp(lnLeftY, height - lnLeftY, masterHand);
        lnBottomX2 = lerp(lnBottomX, height - lnBottomX, masterHand);
        lnRightY2 = lerp(lnRightY, height - lnRightY, masterHand);
    }
}

For this project, it seemed more important than ever to build a rough template (the shapes, colors, lines, etc.) and expand upon it later (making global/local variables to avoid magic numbers, creating several of the same type of object with slight differences, etc.).

I was afraid I wouldn’t be able to get the rotate() functions to do what I wanted; thank goodness I attended lecture when they mentioned push(), pop(), and translate().

P.S., regarding the visual not “completing” when the mouse is put all the way to the right, I believe it’s simply a limitation of the site. Even when I put data-width=1000 during embedding, the actual amount of canvas shown doesn’t change. Also, when opened using the html file, the visual does complete when the mouse is dragged all the way to the right.