Project 03: Dynamic Drawing

Although the product is not where I wish it was visually, I will just have to improve on that in my next project. The most challenging part was refreshing my memory on radians so that I wouldn’t have to keep plugging in and checking if numbers work.

/*
    Joan Lee
    Section D
*/

var h = 0;
var angle = 0;

function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(135 * h, 209 * h, 255 * h);      //whenever the mouse moves horizontally it turns from 0 (black) to a sky blue color

    //earth
    noStroke();
    fill(78, 92, 222);
    ellipse(width / 2, height, 800, 400);

    //orbit, done above both the sun and moon to apply to both the same
    translate(h * width, 100);  //moves the sun and moon as the mouse moves horizontally
    rotate(h * QUARTER_PI);     //rotates by pi/4 radians when the mouse moves horizontally
    
    //sun
    fill(255, 208, 0);
    circle(-width / 2, 325, 100 * h);     //grows when mouse moving to the right

    //moon
    fill(200);
    circle(width / 2, 50, 50 * (1 - h));    //shrinks when mouse moving to the right
    fill(135 * h, 209 * h, 255 * h);                //same fill as the background to ensure it is invisible and hiding the rest of the moon
    circle(width / 2 + 15, 50, 50 * (1 - h));       //circle that hides the rest of the moon so it looks like a crescent moon

    hPosition();        //function defined below

}

function hPosition(){
    h = mouseX / width;     //h is btwn 0 and 1 for simplicity's sake instead of just mouseX
    h = Math.min(h, 1);     //stops the changes when the mouse moves 100% of the canvas horizontally
}