Скачать или смотреть How I Made Code Breathe: p5.js + Web Audio API Tutorial | Central Respiratory Expansion

#p5js #WebAudioAPI #AudiovisualArt #GenerativeArt #javascripttutorial
Geometric Acoustic Art #01 - Central Respiratory Expansion

A digital cube that pulsates as if alive. This work is an immersive audiovisual art piece where vision (p5.js/WEBGL) and hearing (Web Audio API) are synchronized with stunning perfection.

In this video, we'll reveal the secrets behind this seemingly complex artwork, demonstrating how it's actually built on surprisingly simple and elegant code principles.

Three Core Techniques Explained in This Video

1. Creating Organic Breath (The Secret of Life-Like Motion)
The key to breathing life into an inorganic object lies in a single variable called "Organic Breath." We combine a "stable sine wave" with perfect rhythm and "unpredictable noise (human-like fluctuation)" to create smooth, lifelike breathing values that feel genuinely alive.

2. Ultimate Synchronization of Vision and Sound
The moment the cube expands perfectly syncs with the sound rising in a "whoosh." This is because the "Organic Breath" value we just created is directly applied to both the cube's scale and the sound's frequency. One elegant variable serves as the heartbeat for both visuals and audio.

3. Immersive 3D Spatial Audio (HRTF)
Headphones recommended - this is why we use HRTF (Head-Related Transfer Function) technology. This creates realistic 3D audio effects where the sound source feels incredibly close. The audio consists of two layered sources: a smooth main tone and a harmony one octave lower for added depth, producing a rich sound texture.

Structure of the Artwork

Visuals: Using p5.js (WEBGL mode) to render a cube (box()) that changes size and rotation over time.

Audio Control: Web Audio API's linearRampToValueAtTime enables noise-free, extremely smooth frequency transitions.

Details: HUD display, audio waveform (oscilloscope), and other subtle effects enhance immersion.

Summary
Even something that appears complex and alive can be created from simple rules combining "rhythm and a bit of randomness (noise)."

If you could teach code to breathe, what emotions could you make it evoke?

Technologies Used

p5.js (JavaScript Library)

Web Audio API

WEBGL

HRTF Panning Model