Interactive audio-visual generative art experiment built with p5.js and the Web Audio API.
Ocean Loop turns clicks, touches, and collisions into moving particle systems and synthesized sound. The project is part of the Music Lab series and is designed as a browser-based creative coding piece rather than a traditional app.
- Real-time particle animation with six visual modes
- Generative sound triggered by movement and collisions
- Mouse, keyboard, touch, and gesture interactions
- Live status HUD for loop count, audio state, and FPS
- Desktop and mobile browser support
- Lightweight static project with no build step required
git clone https://github.com/MJYKIM99/musiclab.git
cd musiclab
npm install
npm run startOpen http://localhost:8000.
Alternative local server options:
python3 -m http.server 8000npx http-server -p 8000 -c-1 --cors- Click or tap: create a particle
- Drag: reshape an existing particle
- Hold click: increase spawn radius
- Double click: create a larger cluster
- Mouse wheel: adjust preview radius
Space: save screenshotBackspace: reset all particlesB: shrink all particlesR: spawn random particlesF: toggle fullscreenH: toggle info panelM: mute or unmute1-9: spawn particle groups
- Two fingers: save screenshot
- Three fingers: shrink all particles
musiclab/
├── index.html
├── sketch.js
├── Loop.js
├── Pool.js
├── interactions.js
├── audioWorker.js
├── serve.py
└── types.d.ts
Available scripts:
npm run start
npm run serve
npm run dev
npm run lint
npm run lint:fix
npm run typecheck
npm run check- English: this file
- Chinese: README.zh.md
- Deployment notes: DEPLOY.md
- Troubleshooting: TROUBLESHOOTING.md
- Publish a hosted demo through GitHub Pages
- Add preview media for the repository page
- Expand automated browser-based testing
Issues and pull requests are welcome. See CONTRIBUTING.md for the expected workflow.
Released under the MIT License.
- Original Ocean Loop by Sikai Li
- p5.js and p5.sound
- Web Audio API and generative art community references