DXB211 A2: Creative Coding Project
What’s wrong?
This p5.js sketch aims to create a playful and enjoyable experience for audiences, simulating the playful interaction between a bear and bees. Audiences can control the bear’s movement on the screen using a four-directional joystick and add the number of bees by pressing the middle button. The newly added bees, enticed by the honey on the bear’s face, will start following the bear. As the bees get closer to the bear, the bear will take notice and the audio playback will be slightly accelerated. However, when the bees make physical contact with the bear, the bear will become frightened. The audio playback will be significantly faster as well, with the bell sound.
Design and Aesthetic Choices
The title, 'What's Wrong', was chosen to reflect the bear’s character and align with the overall concept of the sketch: The innocent, curious, and playful bear cannot comprehend why the bees are following it. In terms of visuals, I specifically chose a warm and vibrant palette of five colours to enhance the visual appeal of the experience for audiences of all ages while creating a sense of comfort. Furthermore, in line with the theme and atmosphere, I designed the characters to be cute and endearing, with the potential to evoke feelings of affection. Additionally, I used a handwriting font for the start image for consistency with the overall concept.
The funky and bright background music was carefully selected to contribute to the overall fun and positive atmosphere, enhancing audience engagement throughout the experience. Moreover, the sound effect of accelerating audio playback as the bees get closer to the bear and increasing it significantly upon physical contact is employed to captivate the audience, creating more intense and exciting moments. It also effectively conveys the bear’s emotions to the audience, particularly with a clear bell sound when the bear becomes frightened. Additionally, I added a whistling sound when new bees are introduced, serving as both an audio cue for user input and an enhancement to audience engagement during the interaction, providing a positive and immersive multi-sensory experience.
Approach to the Design Process
Originally, I had planned to create a garden-themed interactive experience where audiences could design their own gardens using four different modes corresponding to the seasons. However, I was strongly inspired by one of the unit example videos the Star Bliss Game, which described the moon as an introvert. This led me to change the direction of my sketch and create a character with a unique personality. As a fan of Winnie the Pooh, I decided to develop an interactive experience featuring a playful bear and a bee following honey.
I began with following the guide video of the Star Bliss Game, which enabled me to create three different states of the bear: ENJOY, OOPS, and RUN. I also experimented with different possible distances between the bear and the bee using several debugging lines, and the speed of the bear’s movement to find the most optimal experience setting. Furthermore, to create more interactions for audience engagement, I brainstormed the initial ideas for potential interactive elements using the buttons. I decided to include increases in the numbers of bees by the audience input, with sound effects.
When I created an array of bees for the first time, the bees’ movements and behaviours did not look natural. Thus, I referred back to the previous lecture videos to discover the steering behaviour formula by Craig Raynolds. This process required me to watch numerous videos to understand and implement it in my code. I also adjusted the directions of the bees’ head to stimulate their natural movements.
Once I had determined most of the features to include in my sketch, I refined the illustrations of the characters which were created for the initial prototype. I made changes to the bear’s face to clearly convey its emotions. I also created two additional illustrations of bees for different appearances, and one of them would randomly appear from random locations to reflect the world of nature. In this step, I explored various combinations of colours that make all of them harmonise.
My final step of the sketch was setting the song rates, using flags that determine the bear’s states. This element aimed to provide audiences a pleasurable multi-sensory experience by allowing them to explore different speeds of the song. To improve the overall experience, I continuously adjusted the playback rates of the three songs.
Creative Influences
1. Lightweeds by Simon Heijdens is an artwork that expresses living organisms digitally. The weeds are designed to respond to various real-world elements, including sunshine, rainfall, and winds, which are captured by sensors installed on the exterior wall. This work gave me a great opportunity to deeply think about how we can harmoniously showcase the beauty of living nature in digital spaces. It also enabled me to meticulously choose colours from an earthy-warm palette and focus on the stimulation of the bees’ natural movement.
2. A portfolio website by François Risoud significantly influenced my design decisions, offering valuable insights into the elements that make a user experience more meaningful and enjoyable. I was fascinated by the interaction between physical blobs and users, which led me to spend a significant amount of time contemplating how to enhance the stimulating experience.
3. A principle video on audio-haptic experience design by an Apple developer (2019) had a profound impact on my decision to include bell and whistle sounds. Until I watched this video, I had never realised the importance of the little sound feedbacks from user interaction, such as the bell sound of Apple Pay. This greatly inspired me to think about how my sounds and visuals work together to create a more delightful experience.
References
Apple Developer. (2019). Designing Audio-Haptic Experiences - WWDC19. https:// developer.apple.com/videos/play/wwd- c2019/810/?time=994
Donovan, J. (2019). Star Bliss game. p5.js. https:// editor.p5js.org/creativecoding/sketches/uE- j6DeKKu
Francois Risoud Portfolio. (n.d.). https://www. francoisrisoud.com/
Heijdens, S. (2006). Lightweeds. MoMA.
Shiffman, D. (n.d.). Seeking a target. p5.js. https:// editor.p5js.org/codingtrain/sketches/AxuChwlgb
