Concept:
For this project, I wanted to make something a bit more playful and fun. I took inspiration from the classic “Why did the chicken cross the road?” joke, but instead of just one answer, I made each chicken have its own punchline inside a speech bubble. This time I wanted to use a more creative inspiration and make it a little comedic by playing with humor and randomness.
I also challenged myself more with the coding. I didn’t just stick to what we already learned in class, but tried to experiment by looking things up, exploring, and figuring out how to make it work. For example, I had to learn how to make the speech bubble size change depending on the sentence length, and how to make sure each chicken gets a unique punchline. It was tricky, but I liked that I was able to understand and fix something new on my own.
So overall, this piece is both about the humor of random answers to the same old joke, and also about me pushing myself creatively and technically.
Highlight of a code i’m proud of:
One part of my code I’m really proud of is how I made sure each chicken gets a unique punchline. I used shuffle(punchlines, true) to mix up all the punchlines randomly so the order isn’t always the same. The true part is important because it tells the program to change the original punchlines array directly, instead of just making a shuffled copy. This way, when I assign punchlines to chickens, the original array is already randomized. Then, I looped through the array with for (let i = 0; i < punchlines.length; i++) to create a new chicken for each punchline using chickens.push(new Chicken(0, 50 + i * 40, punchlines[i]). The 0 makes each chicken start on the left side of the canvas, and 50 + i * 40 spaces them vertically so they don’t overlap. I like this part because it shows how I can combine arrays, loops, and objects to create multiple unique characters on the screen, and it really brings the sketch to life.
// shuffle punchlines so each chicken gets a unique one
shuffle(punchlines, true); // randomize the order of punchlines in place
// create one chicken for each punchline
for (let i = 0; i < punchlines.length; i++) {
// x = 0 so chicken starts on left
// y = 50 + i*40 to space them vertically
// punchlines[i] gives each chicken its own joke
chickens.push(new Chicken(0, 50 + i * 40, punchlines[i]));
}
}
Problems I Ran Into:
– Speech bubbles being too small
At first, the text didn’t fit inside the bubbles. I fixed this by using textWidth() to measure the punchline and then adding padding, so the bubble grows depending on how long the sentence is.
– Same punchlines repeating
In the beginning, some chickens had the same joke. To fix this, I used shuffle(punchlines, true) so the punchlines get mixed up randomly, and each chicken gets its own unique one.
– Balancing simplicity and creativity
I didn’t want the code to be too complicated, but I still wanted it to be fun and creative. That’s why I kept the chicken shape simple (just ellipses for the body and a triangle for the beak) and focused more on the concept with the speech bubbles and punchlines.
Reflection and ideas for future work or improvements:
I really enjoyed making this project because it let me experiment with coding in a creative way, using arrays, loops, and objects together. I learned a lot about how to structure a sketch, how to make multiple objects move independently.
For future improvements, I’d love to make the sketch even more dynamic and interactive. For example, I could let the user click on a chicken to make it say a new punchline, or have the chickens move at different speeds across a more detailed road scene. I could also experiment with animations in the bubbles, like making them pop up. Another idea is to add more randomness to the chicken shapes or colors to give each one even more personality. Overall, I’d like to keep exploring ways to make the sketch playful and visually fun while practicing more advanced coding techniques.