Category: Project-03-Dynamic-Drawing

This animation depicts a sun and a moon rotating in a circle, depending on the location of the user’s mouse. The background the sun passes through changes through sunrise, blue sky, and sunset colors as the sun moves from left to right.

Dynamic DrawingDownload

//Alana Wu
//ID: alanawu
//Section C
//Project-03

//sun and moon move in a circle centered in the canvas
// stars rotate around the moon
//clouds rotate around the sun
//when sun is above height/2, sunrise, then blue, then sunset colors
//when moon is above height/2, varying shades of blue 

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

function draw()
{
    strokeWeight(0);
    background(0);

//moves (0,0) to center of canvas
    translate (300, 225);

//as mouse moves from left to right, background sky transitions
//from red (sunrise) to yellow, blue, yellow, and back to red(sunset)
    if (mouseX < 120)
    {
        fill (255, mouseX*2, 0);
    }
    if (mouseX>= 120 & mouseX < 220)
    {
        fill (255, 255, mouseX-40);
    }
//get from (255, 255, 180) to (50, 155, 255)
    if (mouseX>= 220 & mouseX < 300)
    {
        fill (50+(300-mouseX)*2.5, 155+(300-mouseX)*1.2, 255 - (300-mouseX));
    }
//get from (50, 155, 255) to (255, 255, 180)
    if (mouseX >= 300 & mouseX < 380)
    {
        fill (50+(mouseX-300)*2.5, 155+(mouseX-300)*1.2, 255-(mouseX-300));
    }
//from (255, 255, 180) to (255, 240, 0)
    if (mouseX >= 380 & mouseX < 480)
    {
        fill (255, 175+(480-mouseX), (480-mouseX)*1.4);
    }
    if (mouseX >= 480)
    {
        fill(255, 700-mouseX*1.1, 0)
    }
    rect (-300, -225, 600, 225);
    fill (mouseX/25, mouseX/25, 100);
    rect (-300, 0, 600, 225);

//draws background clouds that move horizontally
    push(0);
    fill(235);
 
 //if mouse is pressed, clouds change to dark gray and move left
    if (mouseIsPressed)
    {
        fill (90);
        x -= 5;
    }
    translate (-300, -225);
    ellipse (x, 45, 40, 40);
    ellipse (x+25, 30, 50, 50);
    ellipse(x+35, 60, 35, 35);
    ellipse (x+20, 50, 40, 40);

    ellipse (x+500, 150, 40, 40);
    ellipse (x+475, 160, 50, 50);
    ellipse(x+525, 170, 35, 35);
    ellipse (x+500, 180, 40, 40);

    ellipse (x + 300, 60, 40, 40);
    ellipse (x + 270, 70, 30, 30);
    ellipse (x + 285, 90, 50, 50);
    ellipse (x + 320, 90, 40, 40);

    ellipse (x+50, 100, 40, 40);
    ellipse (x+80, 130, 50, 50);
    ellipse(x+30, 132, 35, 35);
    ellipse (x+58, 135, 50, 50);
    pop();


//draws sun
    push();
    rotate (radians (135+mouseX/3.55));
    fill (255, 255, 0);
    ellipse (90, 90, 50, 50);
            translate (90, 90);
//draws 9 clouds around the sun
    for (var i = 0; i <= 8; i++)
    {
        rotate (radians (40));
        fill (255);
        strokeWeight(0);
        ellipse (mouseX/5 + 5, mouseY/5 + 5, 15, 15);
        ellipse (mouseX/5 - 8, mouseY/5-10, 15, 15);
        ellipse (mouseX/5, mouseY/5, 20, 20);
    }
    pop();

//draws moon
    push();
    
    rotate (radians(315+mouseX/3.55));
    fill (255, 255, 200);
    ellipse (90, 90, 50, 50);
    translate (90, 90);

//draws randomly moving stars around the moon 
    for (var j = 0; j < 5; j++)
        {
            rotate (radians(random (50, 80)));
            fill (255, 255, 204);
            rectMode (CENTER);
            rect (mouseX/9, mouseX/8, 5, 20);
            rect (mouseX/9, mouseX/8, 20, 5);
            push();
            translate (mouseX/9, mouseX/8);

//can you change the frameRate for only a section of the code?
            for (var h = 0; h <= 7; h++)
            {
                fill (255 - mouseX/7, 255 - mouseY/3, 255 - mouseX/5);
                rotate (radians (mouseY));
                ellipse (10+mouseX/20, mouseY/50, 8, 8);
            }
            pop();
        }

 //clouds move horizontally right by .5 every frame
    x += .5;

    pop();

}