BUBLLEVERSE
About
The project embraces the 'Emergence Phenomenon', a concept borrowed from systems science, to orchestrate a captivating visual narrative within the realm of design and art. By crafting a dynamic and ever-changing universe of bubbles, we seek to encapsulate the essence of lightness, vibrancy, and transparency. Each bubble in our design follows unique behavioral rules, dictating movement, interaction, and collective synergy. This approach reflects the unpredictable beauty of emergence, where no single element controls the outcome, but together they create a complex and holistic visual feast.
About
The challenge we’ve set for ourselves is to apply the 'Emergence Phenomenon' to an artistic design system composed of myriad interacting bubbles. Our objective is to exhibit how simple elements, each governed by individual properties and behavior, can coalesce into an intricate display of movement and transformation. The key lies in the detailed rules that dictate each bubble's speed, direction, and interaction, leading to a synergistic effect far greater than the sum of its parts. This design initiative aims to offer viewers an immersive experience of the emergence aesthetic, where the collective dance of bubbles results in a rich and varied visual tapestry.
Design Brief
Project Type
Tools
Emergency Design
p5.js, html
Background Research
For this coding project, we have used the concepts of animation, audio effects and user interaction. By understanding the background andevolution of these technologies, it helps us to integrate these concepts into the emergence design and apply the technologies to coding.
-
Animated effects:Initially, web content was limited to static text and images, accessible only by computers. (Hoy, 2011). However, theintroduction of HTML5 and the <canvas> element provides a more powerful tool to enable developers to create complex animatedeffects(Fulton & Fulton, 2013). JavaScript and CSS were later employed to add dynamic effects and interactions.
-
2D graphics drawing:The concept of 2D graphics drawing can be traced back to the early development of computer graphics and APIslike Windows GDI and PostScript. The HTML5 Canvas 2D context became a prominent display API for rendering graphics on a bitmapped area(Fulton & Fulton, 2013).
-
Audio Effect:Early web audio playback was limited to tags like <bgsound>, Flash, and the <audio> tag in HTML. But with the advent of theWeb Audio API, web pages gained the ability to process complex audio, generate and analyze audio, and create audio effects. (Smus, 2013) TheTone.js library further enhanced this functionality by building on top of the Web Audio API (Mann, 2014)
-
User interaction:User interaction on the web initially relied on hyperlinked text and HTML forms. Nowadays, web pages enable moresophisticated user interaction by listening to various events such as mouse, keyboard, and touch events. JavaScript code manipulates theHTML DOM to make web pages interactive(Oney & Myers, 2009). For example, our project utilized the browser API to create a bubble effect thatresponds to user click events and plays accompanying audio.
These technologies represent the evolution of the web from static displays to dynamic, interactive experiences that incorporate audio andvideo integration.
Inspirations
Our designs are inspired by bubbles in the sun, whose stunning beauty and ephemeral nature inspire us to preserve such moments ofbeauty forever in digital format. The subtle tones of the bubbles and the reflected light are our sources of inspiration. Part of the same design inspiration comes from order and chaos. Clicking on a bubble will burst into smaller bubbles, introducing asense of order and harmony. We also tried to create a responsive user input experience, allowing them to create animations based on theiractions. This responsiveness can significantly increase user engagement, creating a sense of pleasure and engagement. Overall, we wanted to use the design to help users capture fleeting moments and discover the simple pleasure of discoveringunexpected beauty in the digital realm.
Iteration1
This code creates a particle system in which particles are created and animated, such as animating particle movement, size reduction,and gravity effects within the canvas, while allowing new particles to be generated when the user clicks on the bubble element. In the initialversion of the code, only random bubbles of different sizes and positions are supported, and the focus is on the visual design of the particlesusing the HTML canvas, where the particles are presented as colored circles. Only HTML5 canvas and Javascript are used in this code.
Opportunities
-
Add a more artistic visual effect by using CSS to set the style of the bubbleexplosion. Focus on the visual design of the bubbles, different sizes of bubbles,different explosion effects, and appearance changes when clicked.
-
Add the interaction between the bubble and the system, such as allowing theuser to click the bubble to trigger an explosion and play the sound effect intone.js.
-
They enhanced animation effects. Bubbles can simultaneously move, explode,and collide for combinations—particle animation with translation animation.
Iteration1
Implements a bubble system in which bubbles are generated and animated. The code uses HTML, CSS, and javascript to design thebubble visually, apply styles to the element, and set width, height, background color, and opacity. The effect of the sub-bubbles formedduring the explosion is also composed of particles of random color and size.
Regarding interaction rules, the code allows the user to click on the bubble to trigger an explosion and sound effects and interact withthe entire bubble system. Set a bubble as the "Start" button in the default interface, and when clicked, it will generate more bubbles in a cycle.The animation loop constantly updates the positions of the bubbles based on their velocity, and the bubbles collide with each other, mergingafter the collision to form a new bubble.
The code uses the 'animate' function to render and update the animation. It uses the 'requestAnimationFrame' function to arrange thecontinuity of the animation to create an efficient and seamless loop animation.
This code creates a more interactive user interface.
Opportunities
-
Use 2D rendering to draw bubbles in the canvas, making the bubble elements appear more artistic.
-
Add a background color, and add more bubble colors.
-
Add controls for the secondary interface and bubble variables, sliders, and display elements for the userto control the number of tiny bubbles created when the bubble is clicked and add more interactivity.
-
Optimize the bubble explosion effect and explosion tone to avoid animation freeze.
Iteration3
This code uses a 2D rendering context to draw a filled circle with a radial gradient in the canvas. It adds a flickering effect to the bubble,further enhancing the artistry of the appearance of the bubble. At the same time, the control of the secondary interface and the bubblevariable is added, which improves the interaction between the interface and the user. Added a gradient background to the interface designand added more bubble colors. The explosion tone and the explosion effect of the bubble when the user triggers the bubble have also beenfurther optimized.
Opportunities
-
Optimize the design of the variable control, and find the appropriatefunction value in the variable control to modify so that the screen hasa more prominent visual effect.
Iteration3
After the above three iterations, the code conforms to our design concept. Based on iteration 3, we optimized the design of the variablecontrol. Users can control the number of bubbles and the speed of bubble movement, allowing users to create bubble animations accordingto their actions. This responsiveness can significantly improve user participation, thus creating a pleasant Feeling.
