Try it: deermichel.me/waveterrain
Imagine taking a 3D terrain and interpreting the height values along a path as samples of an audio signal.
That's the concept behind wave terrain synthesis.
Inspired by this article, I created an interactive demo that allows you to explore wave terrain synthesis directly in your browser. It is at the same time my playground for cutting-edge web stuff.
This project is explicitly open for contributions, and if you need inspiration, just pick one of the items from the roadmap. If you have any further questions or want to discuss an idea, feel free to reach out to me.
Should this project become mature enough, I consider packaging it as a VST/AU plugin so that it can be used in other audio software.
- Intro animation
- Audio effects
- Oscillator ADSR
- Experiment with stereo audio (e.g. via phase shift)
- Input text fields
- Record and share (maybe also parameters)
- Prettier landscape rendering, use height for color
- Help and descriptions, e.g. keyboard shortcuts
- MIDI input, MIDI learn for parameters ("Mapping" tab)
- Gamepad input
- Fix no sound on iOS when mute switch is on
- Move audio processing code to WebAssembly
- Display orbit and terrain functions
- More orbits and terrains
- Modulate parameters
- Plot synthesized wave ("Analyze" tab, FFT?)
- Camera controls, FPS counter and visualization settings ("Visual" tab)
- Make it a full plugin (sponsoring?)
- Refactor code :)
- three.js - for the gorgeous 3D visualization
- Web Audio API - specifically the
AudioWorkletProcessorfor sound synthesis - emscripten - moving the audio processing code to WebAssembly is still a TODO
- svelte - people said it's the new React, okay
- tailwind.css - maybe i'm doing it wrong, but i'd have preferred plain css
- TypeScript - always a good idea
- vite - who likes webpack anyway
# clone repo
git clone https://github.com/deermichel/waveterrain.git
# install dependencies
cd waveterrain
npm install
# build and start dev server
npm run devThis project is released under the MIT License.