ChromaWave

ChromaWave is a digital representation of the ebb and flow of life's energy. The gray dots represent moments in time, both good and bad, that shape us into who we are. Each dot is unique, just like every experience we encounter in life. The waves that the dots create show how our past experiences ripple through our present and future, influencing our decisions and actions.

Aesthetically, ChromaWave is simple. The black background creates a sense of stillness and calmness, while the dots and waves provide movement and energy. The grayscale colour scheme emphasizes the individuality of each dot while also creating a cohesive and unified design. The movement of the waves is fluid and organic, representing the unpredictable nature of life.

The interaction with the mouse adds an element of personalization and control, as if the viewer is able to shape their own journey through life's waves. ChromaWave is a thought-provoking representation of the human experience.

Coding Process

This code creates an interactive wave maker animation using p5.js.
The let t = 0 variable initializes a time variable to keep track of time for animating the waves. The setup() function creates a canvas, with no stroke and a translucent gray fill color. In the draw() function, the background(10, 10) sets the translucent background to create trails.

The nested for loops create a grid of circles made up of gray dots. The starting point of each circle depends on the position of the mouse, and the angle at which it moves is based on the particle's location on the canvas. Each particle moves in a circle around its starting point with a constant radius of 20 pixels, and is drawn as an ellipse with a size of 10 pixels. The t variable is updated by adding 0.01 at the end of each iteration of the draw() function, which changes the angle of the particle and creates the animated wave effect.