Idea

Creative Coding

September 23, 2025

This exploration began with a simple question:
How much can a single dot communicate? 

How far could we push the boundaries—starting with just a series of dots? By playing with the fundamentals of design, a flat, minimal element came to life. A simple 2D design became dynamic, dimensional, and full of energy. 

Using p5.js (an open-source coding program), we built a tool that lets users control point size, spacing, color, waveform, camera movement, and animation. It’s both an experiment in what’s possible and a flexible playground for design—a way to test, iterate, and explore motion and depth without needing 3D or animation software.

Pushing and Pulling

We started with the simplest setup: a grid of dots. By shifting their positions up and down in sequence, we created the illusion of a wave. No layered depth, no real perceivable 3D space—but it was the start of motion that felt dimensional.

Adding Depth and Layers

As the system evolved, we expanded beyond grids into new formations. Spirals, spherical arrangements, and layered waveforms offered distinct personalities within the same visual language. Because everything was built in 3D, a camera view was added so users could rotate the scene and experience the structures from different perspectives.

Motion and Flexibility

The motion and depth opened possibilities for really unique animations. Instead of fixed compositions, points began to flow and shift like a living system.

For the final piece, we developed a simple control interface that allowed designers to adjust parameters. Combined with options to toggle between black and white backgrounds, the goal was to allow the creation of visuals adaptable to a wide range of brand contexts.

Play with the tool and create your own designs.