Creative Coding Project
The principal idea revolves around creating an engaging and visually captivating interactive particle system that allows users to observe the emergence of new particles with changing colours whilst simultaneously allowing them to control the speed of the particles via mouse hovering.
Timeline
Role
Collaboration
Platform
February 2023-May 2023
Researcher, Coding
a team of three
Visual Studio Code
Project Pitch
The two white circles at the centre of the SVG represent a starting point akin to the dense and initial state of the universe. As these circles touch each other or the edges of the SVG, their colours undergo random changes. Also, as the circles that touch each other will split, it symbolizes the expansion and evolution of the universe, mirroring the cosmic growth from the early stages of the Big Bang. This splitting and colour-generation process continues as the circles touch each other again, leading to further splits and additional random colours. You can control the speed of the circles by the position of the mouse hover, with upward movement increasing the speed and downward movement decreasing it. Furthermore, a round blue or red circle stroke around the mouse serves as a visual indicator of the current speed control mode. When the amount of circles reach the maximum limit, the screen will be reset, this heralds a new phase in everything.
Logical Rules
Universe Background:
Create a visually appealing background representing a vast universe, using several small, shining white dots to depict stars or small planets, thus adding to the vastness of the simulated universe.
Create Balls:
Position two white balls at the centre of the SVG as the starting configuration.
Colour Change and Splitting:
When balls or the edges of the SVG touch together, introduce random colour changes to the balls and split them into two new balls. ​
Continued Interaction:
Allow the colour change process, splitting, and particle generation to persist as the balls repeatedly touch the edges.
Speed Control:
Use the mouse hover control to regulate the particle speed. Moving the mouse upward should increase the speed, whilst moving it downward should decrease it.
Visual Feedback:
Display a round blue or red circle stroke around the mouse to indicate a slow or fast speed control mode visually.