๐ Generative Soul v1.04
An interactive, generative audiovisual experience built with vanilla JavaScript, the Web Audio API, and the HTML5 Canvas.
๐ View Live Demo
๐ About The Project
Generative Soul is a fictional, cosmic operating system that feels alive.
A four-part generative ambient orchestra and a multi-layered visual interface fuse into one breathing, remembering, and reactive entity.
You donโt just watchโyou influence.
Mouse moves & clicks sculpt gravity wells, rotate the core, and leave ghost memories that the system replays when idle.
๐ Features
๐ผ Generative Ambient Orchestra
Continuous, never-repeating soundscape in four layers:
๐น Atmospheric Pads โ slow, evolving chords
๐๏ธ Rhythmic Arpeggiator โ gentle melodic pulse synced to harmony
๐ง Subtle Bass Drone โ deep cosmic hum
๐บ Lyrical Solo Melody โ soaring long-form voice
๐ผ๏ธ Multi-Layered Visual System
๐ Horizon Grid โ endless runner-style wireframe depth
๐ Dual ASCII Fields โ monochrome โechoโ + colored โdataโ layers
๐ฎ Wireframe Kernel โ central particle sphere, beating heart of the OS
๐ฑ๏ธ Interactive Elements
๐ช Gravitational Wells โ click & hold to bend space-time
๐ 3D Rotation โ click & drag to spin the kernel
๐ช Parallax Effect โ subtle depth shift with mouse motion
๐ง Dynamic Systems
๐ Memetic Surge โ visuals pulse with every chord change
๐ Evolving Color Palettes โ 10 cosmic themes synced to music
๐ป Memory Replay โ idle โghostโ playback of your past interactions
๐ ๏ธ Technology Stack
Layer Tech
๐จ Visuals HTML5 Canvas 2D API
๐ Audio Web Audio API
๐งฎ Logic Vanilla JavaScript (ESM)
๐ Noise simplex-noise (CDN)
Single-file, zero build stepโjust open index.html in any modern browser.
๐ How to Run
Download index.html.
Double-click or drag into any Web-Audio-API-capable browser (Chrome, Firefox, Safari, Edge).
Put on headphones and drift.
๐ License
MIT ยฉ maohee โ see LICENSE.md for details.
> โโโโโโโโโ
maohee-dev.github.io/generative-s...
#GenerativeMusic #AmbientOrchestra #CreativeCoding #JavaScript #GenerativeArt #WebDev #ToneJS #UIUX #CodeArt #DigitalArt #FrontEnd #ProceduralArt