Algorithm Garden - A playful ecosystem

A playful ecosystem that slowly becomes more like you.

Live Experience: checkout now!

Preview

The Idea

Algorithm Garden is an interactive visual ecosystem that slowly adapts to user behaviour.

The project began as a simple creative coding experiment in p5.js, exploring particles, movement systems, and mouse interactions. While experimenting with responsive ecosystems and glowing visual behaviours, the interaction slowly started resembling something more familiar — recommendation algorithms.

Most digital platforms today continuously learn from our actions. Every pause, click, hover, and interaction quietly trains invisible systems that decide what we see next.

At first this feels helpful. The experience becomes personalized, relevant, and comfortable. But over time something else happens. The system slowly removes unpredictability. Surprise disappears. Everything begins feeling optimized toward our existing preferences.

Algorithm Garden visualizes this process as a living ecosystem.

As users move through the environment, the system begins learning their preferences and reinforcing familiar patterns. Over time, the ecosystem loses diversity and starts resembling only the user’s own behaviour.

The project explores how recommendation systems gradually reduce surprise, variety, and discovery.

The Experience

The interaction is intentionally simple.

You move your cursor through a glowing digital habitat filled with different particle species.

The system quietly observes:

• where you move

• what you interact with

• which behaviours receive attention

As interaction continues:

• certain species dominate

• rare behaviours disappear

• movement patterns synchronize

• the ecosystem becomes repetitive

Eventually the environment becomes optimized, but emotionally lifeless.

Building It

The entire project was created using p5.js.

The ecosystem itself is intentionally lightweight.
There is no real AI involved. Instead, the behaviour is driven using weighted probability systems, interaction tracking, and simple particle physics.

Every particle belongs to a behavioural category:

• Calm Floaters

• Energetic Swarmer

• Rare Species

Each species behaves differently in terms of movement, attraction, and visual energy.

When users interact with a specific type more often, the system increases the likelihood of similar particles appearing in the future. This creates a feedback loop similar to modern recommendation systems. The more attention a behaviour receives, the more dominant it becomes.

Over time:

• similar species multiply

• rare entities disappear

• movement patterns synchronize

• the ecosystem slowly becomes repetitive

Even though the logic behind the system is technically simple, the resulting behaviour feels surprisingly organic.

Tracking Attention

The cursor acts as a representation of human attention.
Particles close to the cursor receive preference weight.

if(d < 120) {
  preference[this.type] += 0.002;
}

if(d < 120) {
  preference[this.type] += 0.002;
}

if(d < 120) {
  preference[this.type] += 0.002;
}

This tiny interaction rule becomes the foundation for the entire ecosystem.

Weighted Spawning

New particles are generated using weighted randomness.

let total =
  preference.blue +
  preference.pink +
  preference.gold;

let total =
  preference.blue +
  preference.pink +
  preference.gold;

let total =
  preference.blue +
  preference.pink +
  preference.gold;

As preference values increase, the probability of seeing similar behaviours also increases.

Attraction Behaviours

Particles are dynamically attracted toward user interaction.

this.vx += cos(angle) * 0.12;
this.vy += sin(angle) * 0.12;

this.vx += cos(angle) * 0.12;
this.vy += sin(angle) * 0.12;

this.vx += cos(angle) * 0.12;
this.vy += sin(angle) * 0.12;

This creates the feeling that the ecosystem is actively responding to attention.

Core Interaction Logic

if(d < 120) {
  preference[this.type] += 0.002;
}

if(d < 120) {
  preference[this.type] += 0.002;
}

if(d < 120) {
  preference[this.type] += 0.002;
}

Visual Direction

The visual language was inspired by:

• neural networks

• microscopic organisms

• sci‑fi interfaces

• glowing digital habitats

The goal was to make the system initially feel magical and alive before slowly becoming predictable.

Reflection

What started as a playful visual experiment slowly evolved into a small speculative interaction project.

One of the most interesting realizations during the process was understanding how simple behavioural rules can create surprisingly emotional experiences. The strongest moments in the project did not come from complex visuals or heavy effects. They came from small interaction loops like attraction, repetition and disappearance

The project also shifted the way I approached interaction design.

Instead of asking:

“What should this interface look like?”

the process became:

“How should this system behave?”

That small shift completely changed the outcome of the project. The final experience sits somewhere between generative art and speculative design

Final Thought

Algorithm Garden explores a simple question:

What happens when a system becomes too good at understanding us?

At first, personalization feels comforting.
But eventually, the ecosystem stops surprising us.

Built with p5.js.
Creative coding, interaction design, and speculative systems thinking.