Mini Project 5. Object Dancers

Project Name: Rabbit Bouncing Ball

Link to my project: 1) code: https://editor.p5js.org/Sky-Falling/sketches/9oBsgu4b1   

                              2) github: https://sky-falling.github.io/cc-lab/object-dancer/

Brief description and concept: The inspiration of this project comes from an emoji series which can be found on Wechat—提摩西小队. This emoji series consists of some gifs of cute animals and the rabbit I created is the simplified version of the main character of this series, which is also my favourite. To make the “dance” more realistic, I use multiple movements, including the rotation and translation of its hands, ears and foot, to make its bouncing from side to side looks more natural. For example, you may notice that the rabbit’s legs will shake accordingly as he falls to the ground. All in all, there’re so many series of cute animals memes nowadays, due to their wide circulation and people’s inherent affection on cute animals, they definitely play a positive role in raising people’s awareness of animal protection. 

 

 

Video documentation: 

 

 

 

Code explanation:

 dancer.update();
dancer.display();

 

This part call the 2 methods that I define in the class. The .update() will update all the parameters and the .display() will draw every frame according to the parameters. 

 

this.x = startX;
this.y = startY;
this.angle_ear_speed = 0.02;
this.r = 20;
this.cita = 0;
this.cita_speed = 5;
this.oci = 0;

this.angle_hand = -0.6;
this.angle_hand_speed = 0.1;
this.angle_ear = 0;

These parameters decide the position and movement of the rabbit. To be more specific, angle_ear corresponds to the rotation state of the rabbit’s ears, cita corresponds to the position of the whole rabbit, angle_hand refers to its hands and oci refers to the vertical translation of its feet when touching the ground. All of them has their respective speeds.

 

if(this.angle_ear>0.3){this.angle_ear_speed*=-1;}
else if(this.angle_ear<-0.1){this.angle_ear_speed*=-1;}
this.angle_ear +=this.angle_ear_speed;

The method of updating the hand, ear and body states is similar to the ball bouncing against wall problem. When the parameters touch the thredshould, then change the signs of their speeds to be the opposite. 

 

 if(this.cita<=20){this.oci = map(this.cita,0,20,-1,2.5);}
else if(this.cita<=40){this.oci = map(this.cita,20,40,2.5,0);}
else if(this.cita > 160){this.oci = map(this.cita,160,180,-1,2.5);}
else if(this.cita > 140){this.oci = map(this.cita,140,160,2.5,0);}
else{this.oci = 0;}

This part is to make the rabbit’s feet shake once as it touches the ground. The method is quite straightforward—divide its position to be a few sections and use map() function to oscillate its feet during the close-to-ground sections.

 

 

Challenge/failure: I spent most time on drawing the rabbit and definitely met some obstacles. For example, the shapes of face and body is achieved by calling the beginShape() function, which make it extremely hard to fill with multiple colors. So the face is purely yellow, which I think need improvement in the future. But I did create a smaller white pattern covering some part of the body, so the body seemed to be yellow and white. I wonder if there’s any easier way to fill a shape with multiple colors.

 

Reflection:

This project deploys the method of object-oriented programming so that our rabbit can be combined into the Grand Dance Party more easily, or to be more specific, by simply copying the “class” into the program and calling it. This is a fruitful training as it’s my first experience of successfully using OOP, and I’m also quite satisfied by my drawing technique. Except the color part, another thing need future improvement is that the motion can be even more realistic by involving more movements—like the facial flesh shaking with his motion. 

Additional reflection:

1. Variable names are really nightmare. I have to say each global variable is a potential bomb as you may confuse it with others of similar functions. What’s more, you may have millions of variables in a huge projects, so the commonly used variable names like a, b, x, y can be soon exhausted. To avoid such inconvenience, OOP simply bind variables to their corresponding objects and they won’t appear outside the class. So you can assign a, b, c to lots of objects without intervening with each other. What’s more, it make division of work more efficient. Due to the modularization, each group member can just add a class they create to the program and they don’t need to worry if there maybe some coincided names.
2. Coincided names for variables or functions. And the code written by others can be quite hard to read without OOP. As you may see a function bark(), but which creature is barking? Then you need to check the function, which is a repetitive work. But with OOP, you may write dog.bark(). Then your teammate will better know which object this line is applying to.
3. Without OOP, if you want to write “white dog and yellow dog are barking”, then you need to define 2 functions: white_barking() and yellow_barking(). But they are actually of the same function except for aiming at different objects. OOP addresses such problem. The barking() method can apply to different objects: yellow and white dogs. I think modularity can allow you to define “method” merely based on its function, rather than also need to specify which object it’s applying to. So you don’t need to have 100 barking functions if you have 100 types of dogs. In the example of my rabbit, you can call lots of independent rabbits by using an array only store their original position, but without OOP, you need lots of arrays to store all sorts of information of different rabbits: angle_hand, angle_ear and so on. OOP definitely make my life easier! Thank you OOP.