Assignment 3

Concept

The concept of this project was to create a winter landscape featuring falling snowflakes and a couple trees. The snowflakes would fall from the top of the canvas, continuously reappearing at the top after they fall off the bottom. To create this effect, the trees and the snowflakes are drawn with random sizes  making each one look unique.

Code Highlight

One of the main challenges in this project was the randomization of the snowfall. To do this, I created a snowflake class to handle the snowflakes falling and reappearing at random positions. In the constructor in the code below, the snowflake’s x and y coordinates were set. Additionally, each snowflake is given a random size and speed , which adds variation to the scene, making each snowflake unique. The fallingsnow() function then moves the snowflake down the screen by adding its speed value to the y position. Then, when a snowflake reaches the bottom of the canvas, it resets by positioning it randomly at the top and also randomizes the x coordinate to create this illusion of continuity. I also did the same for  the trees where each tree’s size was randomized.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class Snowflake {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = random(3, 7);
this.speed = random(0.5, 2);
}
fallingsnow() {
this.y += this.speed; // moves snowflake down by speed value
// Reset snowflake to top once at bottom
if (this.y > height) {
this.y = random(-100, -10);
this.x = random(width);
}
}
display() {
fill(255);
noStroke();
ellipse(this.x, this.y, this.size);
}
}
class Snowflake { constructor(x, y) { this.x = x; this.y = y; this.size = random(3, 7); this.speed = random(0.5, 2); } fallingsnow() { this.y += this.speed; // moves snowflake down by speed value // Reset snowflake to top once at bottom if (this.y > height) { this.y = random(-100, -10); this.x = random(width); } } display() { fill(255); noStroke(); ellipse(this.x, this.y, this.size); } }
class Snowflake {
  constructor(x, y) {
    this.x = x; 
    this.y = y; 
    this.size = random(3, 7); 
    this.speed = random(0.5, 2); 
  }

  fallingsnow() {
    this.y += this.speed; // moves snowflake down by speed value

    // Reset snowflake to top once at bottom
    if (this.y > height) {
      this.y = random(-100, -10); 
      this.x = random(width); 
    }
  }

  display() {
    fill(255); 
    noStroke(); 
    ellipse(this.x, this.y, this.size); 
  }
}
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class Tree {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = random(30, 50);
}
display() {
//tree bark
fill(139, 69, 19);
rect(this.x - 5, this.y, 10, this.size);
// tree leaves
fill(34, 139, 34);
triangle(
this.x - this.size / 2,
this.y,
this.x + this.size / 2,
this.y,
this.x,
this.y - this.size
);
}
}
class Tree { constructor(x, y) { this.x = x; this.y = y; this.size = random(30, 50); } display() { //tree bark fill(139, 69, 19); rect(this.x - 5, this.y, 10, this.size); // tree leaves fill(34, 139, 34); triangle( this.x - this.size / 2, this.y, this.x + this.size / 2, this.y, this.x, this.y - this.size ); } }
class Tree {
  constructor(x, y) {
    this.x = x; 
    this.y = y; 
    this.size = random(30, 50); 
  }

  display() {
    
    //tree bark
    fill(139, 69, 19); 
    rect(this.x - 5, this.y, 10, this.size); 
    
    // tree leaves
    fill(34, 139, 34);
    triangle(
      this.x - this.size / 2,
      this.y,
      this.x + this.size / 2,
      this.y,
      this.x,
      this.y - this.size
    ); 
  }
}

 

Reflection/Future Improvements

Looking ahead, there are several ways I could improve this project. First, I could introduce a more complicated behavior for the snowflakes, like adding slight variations to their horizontal movement, so they kind of drift as they fall, maybe mimicking wind. Additionally, I could implement different types of snowflakes with unique characteristics, such as their  varying colors or shapes, to add more variety to the snowfall. In addition to this I could also add interactions with other elements in the scene, such as snowflakes collecting on the ground or interacting with objects like trees, enhancing the immersion of the winter scene.

 

Leave a Reply