https://editor.p5js.org/calistalu/sketches/VugfRka5s
https://github.com/calistalu/mini_project_5_object_dancer_2023_10_31_00_58_53
Brief Description and Concept
This particular seagull gathered significant popularity among young people, largely due to its adorable appearance and keen eyes. While it’s often seen in plush toys and internet memes, I was inspired to bring it to life through animation. Its eyes will follow your mouse’s direction. It turned out that it’s even cuter when dancing around!
Demo/Visual Documentation
original version
demo
Coding
update() {
angleMode(DEGREES);
this.ang = sin(frameCount * 10) * 8;
this.cute1 = sin(frameCount * 20);
this.cute2 = sin(180 + frameCount * 20);
this.e1 = map(mouseX, 0, width, 12, 18);
this.e2 = map(mouseY, 0, height, 93, 104);
this.e3 = map(mouseY, 0, height, 72, 82);
this.x += this.spd;
if (this.x >= width - 100 || this.x <= 100) {
this.spd *= -1;
}
}
Several properties are manipulated in the updated( ) method, which is a central to achieving the seagull’s dance movement. The challenge lies in determining which properties are required for the dancer (the seagull) before writing the constructer function. Initially, I individually adjusted the positions of the vertex resulting in lengthy and complex code.
update() {
angleMode(DEGREES);
this.bx5-=sin(frameCount*this.m1)
this.bx6+=sin(frameCount*this.m1)
this.bx1+=sin(frameCount*this.m1)
this.bx2+=sin(frameCount*this.m1)
this.bx3-=sin(frameCount*this.m1)
this.bx4-=sin(frameCount*this.m1)
this.ang = sin(frameCount * 10) * 8;
this.wy1 -= sin(frameCount * 10) * 3;
this.wx3 += sin(frameCount * 10);
this.wy2 -= sin(frameCount * 10) * 3;
this.wx4 -= sin(frameCount * 10);
}
However, I later discovered a more concise approach. By creating “this.cute1 = sin(frameCount * 20)” and applying it to all the vertex coordinates, I simplified the code significantly. Its additional benefit is to allow easily introduce “this.cute2 = sin(180 + frameCount * 20)” to achieve phase difference in the left and right body parts.
Reflection/Lessons Learned
- By encapsulating data (properties) and behavior (methods) within a class, I ensure that the class is self-contained. This means that the class doesn’t rely on any external code for its function, which make it easier to organize the code. I can create instances of my class in various parts of my project, as well as combine everyone’s classes into one project, increasing flexibility, reducing redundancy and saving time.
- When working on a project that involves multiple contributors, ensuring that your code harmonizes with others can be challenging. Differences in coding style, naming conventions, and assumptions may lead to harmonization issues. These challenges can result in debugging difficulties and delays in project progress. The application of OOP is a significant advantage when dealing with these situations.
-
Modularity refers to the division of a project into smaller, independent components. In the case of the “Seagull” class, it has methods for construction, update and display. Each of these functions can be encapsulated within the class, allowing for easy modifications without affecting other parts of the project. For instance, I can modify the updating (dancing) algorithm in the “Seagull” class without altering the code responsible for drawing the basic shape of the seagull.
Reusability implies that a class can be used in different contexts or projects. For the “Seagull” class, it could be employed not only in my current project but also in future projects or by our professor. This reusability is possible because the class is self-contained, making it easy to integrate into new systems without extensive modifications. For instance, when it is combined into the collection of all the dances developed by our classmates, the “Seagull” class can be utilized without rewriting the entire code.