← Back

data drift

2026 — ongoing · berlin

Data Drift is a 3D visualization that responds to real-world data in real time. Rather than a chart or a number, it becomes a living shape — one that breathes, tenses, and changes based on what the data says.

Right now it's connected to air quality sensors in Berlin. Air pollution is a good example: it's invisible, constant, and easy to stop noticing — but it affects the city every day. The organism translates this hidden condition into something you can actually see.

Is the system stable — or has it simply stopped responding?

Open Live ↗

System Logic

The organism translates raw data into behavior through a simple rule:

organism_response = pollution_intensity × sensitivity

Where:
pollution_intensity = real environmental data
sensitivity = adaptation state

Each data channel drives a different part of the organism at the same time:

  • NO₂(nitrogen dioxide — from cars and heating) → membrane tension
  • PM2.5(microscopic particles, invisible to the eye) → particle density
  • PM10(coarser dust and pollen) → vibration field
  • CO(carbon monoxide — colorless combustion gas) → light temperature

Data is translated through a behavioral model:

data → state → behavior → perception

Adaptation (why the organism gets used to it)

Think of adjusting to a strong smell — overwhelming at first, but after a while you barely notice it. The organism works the same way. The longer it's exposed to pollution, the less dramatically it reacts.

This is intentional. It mirrors how humans actually respond to chronic environmental stress: we adapt, and we stop noticing what's been there all along.

Recovery Mechanism

When the air clears, sensitivity slowly returns — but not right away. Recovery takes time. The organism remembers what it's been through.

This means the visualization shows not just what's happening now, but the weight of accumulated exposure.
clean air duration ↑ → sensitivity slowly ↑

Baseline Respiration

Constant atmospheric movement representing vitality.

Immediate Response

Real-time pollution levels modify the organism's behavior.

Adaptive Memory

Unlike most visualizations that only show the present moment, Data Drift carries a history. Past exposure lives inside the sensitivity value — visible in how the organism moves.

Process Log

HUD overlay + live data fix + camera controls

Fixed live data fetch failing on datadrift.art — added `VITE_API_KEY` to Vercel environment variables and redeployed. Repositioned camera to face all three particle cluster centers, placed along the plane normal of the cluster triangle.

Built HTML/CSS HUD overlay: live PM₂.₅, PM₁₀, NO₂, CO bars with actual μg/m³ values, sensitivity indicator with state label (Sensitized / Adapting / Normalized), and dynamic reaction text describing organism behaviour. Added `?` toggle button to show/hide HUD, nav hint at bottom center that fades on first interaction. Implemented arrow key camera rotation via spherical coordinate manipulation. Enabled particle system (was previously hidden).

Working: Live data displaying correctly in HUD on both localhost and datadrift.art. Arrow keys rotate camera smoothly alongside mouse drag. HUD panel opens and closes cleanly. Reaction text updates dynamically based on dominant pollutant and sensitivity state. Particles visible and clustering as expected.
Next: Continue refining visual and UI system.

Shader rebuild + pollution-driven lighting

Rewrote vertex shader geometry: wider fold spacing, elongated anisotropy, removed basin displacement system that caused a visible seam. Added nano detail layer; removed hard smoothstep cutoffs from macro/mid layers. Fixed inverted pole jitter bug — starburst artifact significantly reduced.

Rebuilt lighting as pollution-driven: clean air = open/milky; heavy pollution = dark/tense. Added peak glow, recession vignette, iridescent edge sheen. Switched color palette to Jupiter atmosphere reference with spatially varying warm/cool geography.

Working: Fold structure covers full sphere without displacement boundary. Color palette is spatially variable — warm/cool slopes, teal/umber valleys, iridescence at edges. Ambient brightness responds to real pollution data.
Blocker: One slow-moving wave line still visible — caused by macro→mid amplitude coupling at noise zero crossings.
Next: Resolve remaining wave artifact, re-enable particles, calibrate adaptation system for Berlin's clean air levels.

Live data integration

Reorganized project into modular folder structure. Connected real OpenWeatherMap API via .env. Confirmed live PM2.5, PM10, NO₂, CO data from Berlin fetching correctly in the browser.

Working: Modular structure clean and functioning. Real Berlin air quality data fetching correctly.
Next: Continue working on visual response to data.

Three.js v0.182 Custom GLSL Vite OpenWeatherMap API JavaScript