Week 5 Object-Oriented Programming

Eggy the Lantern Elf

Link to my Sketch

Demo

Coding

 

Fabrication

1. Designing & Sketching:

2. Making the limbs of Eggy: adjust the point position until the curve looks like Eggy’s hand.

3. Making Eggy fluctuate: At first I put the sin() function in the constructor and assigned it to this.y.

I found that Eggy didn’t move. Then I assigned it to this.ySpd.

It still didn’t move. I tried to display the display function:

Finally, I realized that the constructor only constructs the parameter once. I put the sin() in display() function and succeeded. 

4. Controlling the positions: I constructed the move() and bounce() method to make the lantern elves move in different directions and bounce back when hitting the window edge. But the movements are strange.

trial 1:

 trial 2:

trial 3:

Since I couldn’t figure out why the methods didn’t work and I had limited time, I removed the methods to focus on limb movements.

5. Moving the limbs: I tried to use rotate() function to map mouseX, mouseY positions to Eggy’s feet and hand movements.

At first, I put the rotate function in the EggyLimb() method. The movement didn’t happen. I then created a new method rotateLimb() to update the positions of limbs. Since I created all the limbs in EggyLimb() method, the hands and feet rotated together.

I managed to separate hand and foot movement by creating separate methods for them. But found this error message:

I found that this was because I commented out the rotate declaration in the constructor. After solving this problem, I still found the movement weird. I wanted to make the limbs move around different centers, but two feet and two hands seemed to be  combined together:

I then decided to change the middle curve points’ y positions to make the hand rotate around different centers, and this is the first attempt…

The second attempt is successful:

I also successfully changed the feet movements by translating the right&left feet positions and then rotate(a) and rotate(-a).

6. Problems with methods: I constantly forgot to declare the methods…

7. System Break Down: I tried to scale and rotate the flowers in the display method. But it seemed that this caused the system to breakdown and I had to delete the effect.

 

Reflection

        In this week’s recitation, I practiced using Object-Oriented Programming to organize a moveable creature. Through defining classes and methods, I increased modularity (different categories of objects and different components within one object) and reusability (generate unlimited numbers of animated flowers with simple codes). However, I still have trouble controlling the position of an object using methods. In the future and in project 2, I will improve by: 

1. Solve the problems in move() and bounce() methods.
2. Add more features and movements to Eggy
3. Try combining hand-drawings with PNG format to create objects. (In this recitation, I found that although it was easier to create Eggy with built-in geometries in p5, it was very difficult and tedious to construct background scenes such as trees, which can be created more efficiently through hand-drawing. Also, I love the aesthetics that has pencil strokes and painted effects. Therefore, combining images to form objects will be a possible option for project 2. I might also try using both image combinations and code-generated geometries to achieve a satisfying visual effect.)