Rachel Lee-Project 03-Dynamic Drawing-Section E

Rachel Lee Dynamic Drawing Sketch

/* Rachel Lee
rwlee
Section E
Project-03: Dynamic Drawing */

var outerD = 350;
var innerD = 300;
var hours = 10;
var r = 0;
var g = 0;
var b = 0; 
var planetR = 60;
var sunY = 0;
var moonY = 480; 
var angle = 0;
var increment = 0.1;
var angle = 0;
var position1 = 0;
var position2 = 105;
var position3 = 65;
var position4 = 215;
var position5 = 25;
var position6 = 345;

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

function draw() {
	background(r, g, b);
// top right quadrant yellow according to mouse position
    if (mouseX >= 320 & mouseX <= 640 && mouseY >= 0 && mouseY <= 240) {
        r = 235;
        g = 200;
        b = 130; 
    } 
    
// bottom right quadrant pale blue according to mouse position
    if (mouseX >= 320 & mouseX <= 640 && mouseY >= 240 && mouseY <= 480) {
        r = 155;
        g = 195;
        b = 235;
    }
// bottom left quadrant dark blue according to mouse position
    if (mouseX >= 0 & mouseX <= 320 && mouseY >= 240 && mouseY <= 480) {
        r = 30;
        g = 115;
        b = 185;
    }
// top left quadrant navy according to mouse position
     if (mouseX >= 0 & mouseX <= 320 && mouseY >= 0 && mouseY <= 240) {
        r = 15;
        g = 65;
        b = 120;
    }

    // sun rising and setting according to mouse position
    if (mouseX >= 330 & mouseX <= 500 && mouseY >= 65 && mouseY <= 415) {
        sunY = mouseY;
        var sizeSun = map(mouseY, 0, width, 60, 10);
    } else {
        noStroke();
        fill(240, 150, 60);
        sunY = 0;
        ellipse(560, sunY, planetR, planetR);
    }

// drawing sun
    noStroke();
    fill(240, 150, 60);
    ellipse(560, sunY, sizeSun, sizeSun);

// moon rising and setting according to mouse position
    if (mouseX >= 150 & mouseX <= 310 && mouseY >= 65 && mouseY <= 415) {
        moonY = mouseY;
        var sizeMoon = map(mouseY, 0, width, 60, 10);

// drawing stars
        push();
        translate(100, 100);
        rotate(radians(angle));

// animating stars, stars appear when it is 'night time' only
        rectMode(CENTER);
        noStroke();
        fill(210, 240, 245);
        rect(position1, 0, 15, 15);
        rect(position2, 125, 20, 20);
        rect(position3, 300, 10, 10);
        rect(position4, 240, 7, 7);
        rect(position5, 160, 13, 13);
        rect(position4, 270, 9, 9);
        pop();
        angle = angle + 1;
        position1 = position1 + 0.4;
        position2 = position2 - 0.1;
        position3 = position3 + 0.7;
        position4 = position4 - 0.2;
        position5 = position5 + 0.1;
        position6 = position6 - 0.8;

    } else {
        noStroke();
        fill(230, 230, 190);
        moonY = height;
        ellipse(80, moonY, planetR, planetR);
    }

// drawing moon
    noStroke();
    fill(230, 230, 190);
    ellipse(80, moonY, sizeMoon, sizeMoon);

// clock and hour markers on clock
    noStroke();
    fill(140, 195, 200);
    ellipse(320, 240, outerD, outerD);
    fill(180, 225, 225);
    ellipse(320, 240, innerD, innerD);

    fill(220, 90, 95);
    ellipse(320, 110, hours, hours);
    ellipse(320, 365, hours, hours);
    ellipse(180, 240, hours, hours);
    ellipse(450, 240, hours, hours);

// clock hands rotate according to mouse position
    stroke(255);
    strokeWeight(10);
    line(width/2, height/2, mouseX, mouseY); // minute hand
    stroke(0);
    line(width/2, height/2, mouseX + 40, mouseY + 60); // hour hand


}

For this week’s project, I decided to play with the idea of a clock, and illustrating different times of the day. At first I found it a little tricky to catch syntax errors, but as I built more and more variables in, it became really fun to watch my dynamic drawing come to life in a controlled manner.