Code Challenge: Snowman Sunset

View code challenge

Completing the "Snowman Sunset" challenge demonstrates a students' understanding of coordinates , using the p5 drawing library to draw shapes, and animation .

Requirements

The resulting animation should match the one shown in the challenge.

Example Solution

let screenWidth = 400;
let screenHeight = 400;

let yPosition = 60;

function setup() {
    createCanvas(screenWidth, screenHeight);
}

function draw() {
    // background color
    background("skyblue");

    // sun
    yPosition += 1;
    fill("yellow");
    ellipse(80, yPosition, 100, 100);

    // ground
    fill("darkgreen");
    rect(0, 300, 400, 100);

    // snowman
    fill("white");
    ellipse(200, 300, 150, 150);  // bottom
    ellipse(200, 200, 100, 100);  // middle
    ellipse(200, 120, 75, 75);    // top
}

Alternative solution

This solution uses the screenHeight and screenWidth variables to more easily calculate positions relative to screen dimensions.

let screenWidth = 400;
let screenHeight = 400;

let yPosition = 60;

function setup() {
    createCanvas(screenWidth, screenHeight);
}

function draw() {
    // background color
    background("skyblue");

    // sun
    yPosition += 1;
    fill("yellow");
    ellipse(80, yPosition, 100, 100);

    // ground
    fill("darkgreen");
    rect(0, screenHeight-100, screenWidth, 100);

    // snowman
    fill("white");
    ellipse(200, screenHeight-100, 150, 150);  // bottom
    ellipse(200, screenHeight-200, 100, 100);  // middle
    ellipse(200, screenHeight-280, 75, 75);    // top
}