Assignment #3: Non-Ugly Ducklings


Concept & Inspiration.

My primary inspiration comes from the game Flappy Bird, which I used to play on my phone as a child. While reflecting on it, I didn’t intend to fully replicate the game, but rather merge its concept with something else. I then remembered the children’s book The Ugly Duckling and thought about incorporating that theme. One duckling may be considered ugly, but what if there were an endless number of them? Would they still seem as ugly?

With this idea in mind, I decided to write code using classes, and through careful use of color, I aimed to show that a whole flock of supposedly ugly ducklings might not look so ugly after all.

Highlights.

For this project, I created a class and made it an array birds[] so that the user can add endless number of ducklings on canvas. Moreover, I used the .push and .pop functions for adding and removing the ducklings. Even though it took me a while to understand how to flip the bird horizontally after bouncing, I eventually implemented it in my code by creating the facingRight variable inside the class.

// Flip the bird after bouncing
if (this.x > width - 60 || this.x < 0) {
  this.xspeed *= -1;
  this.facingRight = !this.facingRight;
}

It was also the first project where I worked with text() (which was relatively easy) and some of the text-related functions.

 if (birds.length === 0) {
  fill(255);
  textSize(24);
  textAlign(CENTER);
  textStyle(BOLD);
  textFont("Helvetica");
  text("mouse click to add a duckling", width / 2, height / 2);
}

Reflection.

I am proud of this project, as I was able to implement almost all the new functions we learned in class this week. Additionally, I experimented with incorporating text for the first time. One challenge I faced was with the ducklings near the right corner, which glitch after a mouse click. I attempted to solve this issue using generative AI, but unfortunately, I wasn’t successful.

Overall, I believe the project achieved its intended purpose. In the future, I hope to create a more detailed background for the canvas, as I didn’t have enough time to include that in this version.

Embedded Sketch.

Mouse click to add a new duckling & click any key to remove the last one.

Leave a Reply