var clouds = []

​

function setup() {

    createCanvas(400, 400)

    angleMode(DEGREES)

​

    // ---------- GENERATE POINTS FOR STARS ----------

    // Each star is assigned a random x and y position within the boundaries of the sky.

    // Then they are pushed to the stars array

​

    for (var i = 0; i < 100; i++) {

        var x = random(0, width)

        var y = random(0, height / 2 + 100)

        stars.push([x, y])

    }

​

    // ---------- GENERATE POINTS FOR CLODUS ----------

    // Each cloud is assigned a random x and y position within some limits. They are also given a height and width.

    // Then they are pushed to the cloud array

​

    for (var i = 0; i < 3; i++) {

        var x = 200 + random(-50, 50)

        var y = -100 + random(-10, 10)

        var w = random(100, 150)

        var h = random(20, 50)

        clouds.push([x, y, w, h])

    }

}

function draw() {

​

    // ---------- CONTROL FRAMERATE ----------

    // Here the frame rate is mapped to the mouse's x-position.

​

    var fr = map(mouseX, 0, width, 5, 60)

    frameRate(fr)

​

    // ---------- CONTROL FRAMERATE ----------

    // If the mouse is pressed, the color mode will change. The 3 random values are the maximum value of red, green and blue respectively. This value is 255 by defaul.

​

    if (mouseIsPressed) {

        colorMode(RGB, random(100, 255), random(100, 255), random(100, 255))

    }

​

    // ---------- BACKGROUND COLOR ----------

    // The background color changes using the sine function. If the frame rate is 60fps, the wave length of the sine function will be 6 seconds.

​

    var r = map(sin(frameCount - 90), -1, 1, 0, 100)

    var g = map(sin(frameCount - 90), -1, 1, 0, 200)

    var b = map(sin(frameCount - 90), -1, 1, 20, 220)

    background(r, g, b)

​

    // ---------- STARS ----------

    // Here the stars are drawn at their respective positions.

    // Their opacity (alpha) is mapped to the sine function, so they will not be visible at the middle of the day.

​

    var alpha = map(sin(frameCount + 90), -1, 1, 0, 255)

    stroke(255, alpha)

    for (var i = 0; i < stars.length; i++) {

        point(stars[i][0], stars[i][1])

    }

​

​

    noStroke()

    translate(0, height / 2)

​

​

    // ---------- SUN ----------

    // The sun's color and y-position depends on the sine function, as well.

​

    var r = map(sin(frameCount - 90), -1, 1, 100, 200)

    var g = map(sin(frameCount - 90), -1, 1, 0, 200)

    var b = map(sin(frameCount - 90), -1, 1, 0, 80)

    fill(r, g, b)

​

    var x = 100

    var y = sin(frameCount + 100) * 100

    ellipse(x, y, 100)

​

    // ---------- MOON ----------

    // The moon is drawn with vertices using polar coordinates. It consists of two 2/3 of a circle, where one of them is a bit smaller. 

​

    var r = map(sin(frameCount - 90), -1, 1, 230, 150)

    var g = map(sin(frameCount - 90), -1, 1, 230, 150)

    var b = map(sin(frameCount - 90), -1, 1, 240, 150)

    fill(r, g, b)

​

    beginShape()

    for (var i = -120; i < 120; i++) {

        var rad = 50

        var x = rad * cos(i) + width - 100

        var y = rad * sin(i) + sin(frameCount + 100 + 180) * 100

        vertex(x, y)

    }

    for (var i = 120; i > -120; i--) {

        var rad = map(sin(i + 90), -1, 1, 57, 30)

        var x = rad * cos(i) + width -100

        var y = rad * sin(i) + sin(frameCount + 100 + 180) * 100

        vertex(x, y)

    }

    endShape(CLOSE)

​

    // ---------- CLOUDS ----------

    // The clouds are just ellipses placed close together. Their position, width and height was assigned to them at the top of this file.

    // The 'offset' variable controls the position along the x-axis.

​

    var offset = map(sin(frameCount - 90), -1, 1, width, 0)

    fill(255)

    for (var i = 0; i < clouds.length; i++) {

        var x = clouds[i][0] + offset

        var y = clouds[i][1]

        var w = clouds[i][2]

        var h = clouds[i][3]

        ellipse(x, y, w, h)

    }

​

    // ---------- LANDSCAPE ----------

    // The landscape is just a sine wave displayed with vertices. Two extra vertices are added outside the for loop in order to make a closed shape that can contain a color.

​

    var r = map(sin(frameCount - 90), -1, 1, 10, 50)

    var g = map(sin(frameCount - 90), -1, 1, 30, 180)

    var b = map(sin(frameCount - 90), -1, 1, 10, 80)

    fill(r, g, b)

​

    beginShape()

    for (var i = 0; i <= width; i++) {

        var x = i

        var y = sin(i + frameCount + 180) * 50

        vertex(x, y)

    }

    vertex(width, height / 2)

    vertex(0, height / 2)

    endShape(CLOSE)

}