html,
body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
//setting up the snowflakes array
let snowflakes = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  fill(240);
  noStroke();
}

//changing the framecount and create new snowflakes
function draw() {
  background(3, 37, 76);
  //draw the floor
  push();
  fill("Brown");
  textSize(25);
  textFont("Georgia");
  push();
  text("Merry Christmas!", width / 2 - 300, height / 2 - 20);
  pop();
  rect(0, 500, width, 150);
  pop();
  let c = frameCount / 70;
  for (let i = 0; i < random(5); i++) {
    snowflakes.push(new snowflake());
  }

  drawPolarBear();
  //this creates a loop iterating over iterable objects.
  for (let flake of snowflakes) {
    flake.update(c);
    flake.display();
  }
}

function snowflake() {
  this.posX = 10;
  this.posY = random(-50, 0);
  this.initialangle = random(0, 2 * PI);
  this.size = random(2, 5);

  // getting the radius of snowflake spiral (so that they aren't just going down) and pow is a function that is used to return m raised to the nth power.
  this.radius = sqrt(random(pow(width / 2, 2)));
  this.update = function (time) {
    let s = 0.6; // speed
    let angle = s * time + this.initialangle;
    this.posX = width / 2 + this.radius * sin(angle);

    // different size snowflakes fall at slightly different y speeds
    //syntax of pow is pow(e,n) where e is   base of the exponential expression and n is the power by which to raise the base
    this.posY = this.posY + pow(this.size, 0.5);
  };
  //setting this.display as a function, and
  this.display = function () {
    ellipse(this.posX, this.posY, this.size);
  };
}

function drawPolarBear() {
  push();
  fill(225, 219, 208);
  ellipse(width / 2, height / 2 + 160, 120, 170);
  fill(200, 157, 124);
  ellipse(width / 2, height / 2 + 190, 80, 75);
  fill(225, 219, 208);
  ellipse(width / 2 - 50, height / 2 + 200, 50, 80);
  ellipse(width / 2 + 50, height / 2 + 200, 50, 80);
  ellipse(width / 2 - 50, height / 2 + 140, 50, 90);
  ellipse(width / 2 + 50, height / 2 + 140, 50, 90);
  fill(200, 157, 124);
  //big pads on feet
  ellipse(width / 2 + 50, height / 2 + 215, 30, 20);
  ellipse(width / 2 - 50, height / 2 + 215, 30, 20);
  //small pads on feet
  ellipse(width / 2 - 50, height / 2 + 190, 10, 25);
  ellipse(width / 2 - 35, height / 2 + 193, 10, 20);
  ellipse(width / 2 - 65, height / 2 + 193, 10, 20);
  ellipse(width / 2 + 50, height / 2 + 190, 10, 25);
  ellipse(width / 2 + 35, height / 2 + 193, 10, 20);
  ellipse(width / 2 + 65, height / 2 + 193, 10, 20);
  fill("Brown");
  ellipse(width / 2, height / 2 + 90, 100, 30);
  triangle(
    width / 2 - 20,
    height / 2 + 80,
    width / 2 - 50,
    height / 2 + 160,
    width / 2 - 20,
    height / 2 + 180
  );
  ellipse(width / 2 - 25, height / 2 + 105, 25);
  //ears
  fill(225, 219, 208);
  ellipse(width / 2 + 40, height / 2 + 5, 60);
  ellipse(width / 2 - 40, height / 2 + 5, 60);
  fill(200, 157, 124);
  ellipse(width / 2 + 40, height / 2 + 7, 40);
  ellipse(width / 2 - 40, height / 2 + 7, 40);
  //face
  fill(225, 219, 208);
  ellipse(width / 2, height / 2 + 40, 110, 96);
  //muzzle
  fill(200, 157, 124);
  ellipse(width / 2, height / 2 + 65, 60, 40);
  //eyes and nose
  fill("Black");
  ellipse(width / 2, height / 2 + 54, 20, 10);
  ellipse(width / 2 + 10, height / 2 + 33, 10, 15);
  ellipse(width / 2 - 10, height / 2 + 33, 10, 15);

  pop();
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/@strivemath/strive@1.1.4/dist/strive.js
  2. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js