Livvy’s Mini Project 5

Mini Project 5: Link! Cheer up!

https://editor.p5js.org/wl3223/sketches/w8jFuYZUP

 

Brief Description and Concept

The character I coded is the image of HP(heart shape) and vigor(circles) from the Legend of Zelda game. I let the heart shape become the main subject, dancing vividly and shaking the vigor on its hand. Every time you click the mouse, this figure will turn its color yellow, making the game’s main character Link more powerful and encouraging him to fight monsters.

 

Demo/Visual Documentation

via GIPHY

 

Coding

Sin() and cos() are used to display the circular motion path.

    this.x=this.x+cos(frameCount*0.1)
    this.y=this.y+sin(frameCount*0.1) 

I used noise() to let the shadow of the heart float irregularly.

 this.r= 30*noise(0.05*frameCount)
 beginShape();
 vertex(0, -10-this.r);
 bezierVertex(-10+this.r, -80-this.r, -120-this.r, -30+this.r, -10+this.r, 80-this.r);
 bezierVertex(140+this.r, -30-this.r, -10+this.r, -90+this.r, -20+this.r, -10-this.r);
 endShape(CLOSE);

Map() is employed to let the color change with framecount. The rich and varied colors are more in line with the setting of dancing in the ballroom.

if(mouseIsPressed){
      this.c=60
    }
    else{
      this.c = map(sin(frameCount*0.05),-1,1,0,30);
    } 

Mouse interaction is also shown in the project. If you press the mouse, the x and y positions will change randomly, meanwhile, the character will change its color.

if(mouseIsPressed){
this.x=this.x+random(-5,5)
this.y=this.y+random(-5,5)
} 

Reflection

The benefit of the class:

Since our character will finally appear in one single sketch, the class is beneficial to collaboration because the change of properties in the individuals’ classes doesn’t affect others because the variable is local rather than global.

When it comes to a complex project, thanks to “this.”, I can use the same name of variables in different classes without the worry about confusing variable names.

 

The challenge:

The challenge of writing harmonious code with others’ code lies in consistency. Maintaining a consistent coding style and overall project structure can be challenging when multiple people are involved.

 

Modularity and Reusability:

Modularity: 

The class can be simply divided into two parts, display() and update(). The display function contains all the appearance including its shape, color, and text. The update function helps variables change their values, realizing animation. Due to the class, changes can be made within it without affecting the entire project. 

Reusability:

The class can be easily reused in different p5.js projects or applications that need a similar dancing heart character. Its self-contained design make integration into various projects straightforward, promoting reusability.