Creative Coding Lab | Mini Project #6

Project Title: Snow Globe in Early Christmas

           This project aims to create moving particles using “class” and making interactions between classes. I created a snow globe where the snow is shot from the bottom and falls down by gravity. You can create snow by pressing the mouse.

Click here to see the result: 

https://editor.p5js.org/GwangunKim/sketches/FcpqMz_ln

 

           This is a snippet of the motion of snow. When the snow hits the ceiling, it changes its direction from upward to downward(which indicates gravity) and I made it disappear when it is out of the boundary using “splice”.

let mysnow=[];
let myglobe;
let myglobeinside;

function setup() {
  createCanvas(500, 500);
  myglobe = new snowGlobe(width/2,height/2);
  myglobeinside = new snowGlobeinside(width/2,height/2)
}

function draw() {
  background(37,53,104);
  push();
  translate(width/2,height/2)
  noFill()
  circle(0,0,350)
  pop();
  
  //inner part of snow globe
  push();
  myglobeinside.drawsnowGlobeinside();
  pop();
  
  //if you press the mouse, the snow will appear
  if(mouseIsPressed){
    mysnow.push(new Snow())
  }
  for (let i = 0; i < mysnow.length; i++){ mysnow[i].drawSnow(); mysnow[i].moveSnow(); mysnow[i].isitgone(); } //erase the snow when it goes out the boundary for (let i = mysnow.length - 1; i >= 0; i--) {
    if (mysnow[i].isGone) {
      mysnow.splice(i, 1);
      console.log(mysnow.length,"Press your mouse to create snow")
      
    }
  }
  
  //outer part of snowglobe
  myglobe.drawsnowGlobe();
  
}

And this is the snippet of class “snow”:

class Snow{
  constructor(){
    this.x = constrain(mouseX,250,250);
    this.y = height/2+175
    this.r = random(5,10);
    this.isGone = false;
    this.s=2
  }
  
  drawSnow(){
    fill(255)
    push();
    noStroke();
    circle(this.x,this.y,this.r);
    pop();
  }
  
  moveSnow(){
    this.x = this.x + random(-13,13)
    this.y = this.y-this.s
  }
  
   isitgone() {
    if (this.y < height/2 - 175) { this.s=-this.s // this.isGone = true; } if(this.y>height/2+175 || this.x>width/2+225 || this.x<width/2-225){
      this.isGone = true;
    }
  }

}

Reflections 

           OOP, which stands for Object-Oriented Programming, is the practice of treating code as objects and assigning them specific properties and behaviors. Suppose OOP is a creation of a building, then classes can be seen as blueprints for creating those objects. Instances, on the other hand, are the essential components used in those blueprints. For example, we can take a look at my code. I created a class called “snow” to simulate the motion of a snowflake inside a snow globe. This snowflake has properties such as a “white” color and a “circular” shape. Additionally, when I click the mouse, this snowflake exhibits a behavior (method) where it moves up in the sky and eventually disappears as it comes back down.

           Personally, one of the advantages of using OOP is that it helps me stay on track while coding. As explained earlier, breaking down the entire creation process into incremental steps allows for easy error fixing and enhances code readability.

           However, during class sessions, I found it challenging to understand the interaction between multiple classes when creating interactions between classes (e.g., Rain & Cloud class). Furthermore, while merging the “outside” and “inside” of the snow globe in this project, I encountered difficulties with coordinate issues, requiring repetitive back-and-forth modifications between the two classes. Handling a single class is not overly difficult, but dealing with interactions between multiple classes can be challenging. This project made me realize that it requires investing more time and experience to improve my skills in this area.