https://github.com/ioannischtz/harmonic-motion-symphony
A JavaScript and Canvas app, that combines simple pendulum physics with Sound.
https://github.com/ioannischtz/harmonic-motion-symphony
canvas2d javascript pendulum-simulation web-audio-api
Last synced: 8 months ago
JSON representation
A JavaScript and Canvas app, that combines simple pendulum physics with Sound.
- Host: GitHub
- URL: https://github.com/ioannischtz/harmonic-motion-symphony
- Owner: ioannischtz
- License: gpl-3.0
- Created: 2023-08-04T16:22:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-25T10:20:49.000Z (over 2 years ago)
- Last Synced: 2023-10-26T10:29:37.687Z (over 2 years ago)
- Topics: canvas2d, javascript, pendulum-simulation, web-audio-api
- Language: JavaScript
- Homepage: https://ioannischtz.github.io/harmonic-motion-symphony/
- Size: 165 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# harmonic-motion-symphony
A JavaScript and Canvas app, that combines simple pendulum physics with Sound.
It simulates the pendulum motion using a modified
[SHM (Simple Harmonic Motion) model](https://en.wikipedia.org/wiki/Simple_harmonic_motion),
that includes `weight` and `dumping` in the equation.
Each time the Pendulum crosses the middle point (aka the `x` coordinate of the
origin) a note is played. This creates interesting possibilities for music
generation.
The goal of the project was to be as minimal as possible, hence the use of pure
JavaScript with no dependencies, the Web Audio Api, and HTML5 Canvas.
In order to keep the code clean, I separated into es6-modules, which
unfortunately means that I needed to add a `build` step, using `rollup` and
`swc`.
In order to run the app, download or `clone` the project, run the commands:
```
npm install
npm run build
```
, and then, open up `index.html` with a web browser of your choice. (The audio
might have some glitches when a note finishes on the FireFox browser)
Inspiration Credits:
[Lucid Rhythms - "Space Pendulum"](https://www.youtube.com/watch?v=JhUcHtbDOWE)
When I watched that video I knew I HAD to implement it.
## TODO
- [x] Create a functional prototype
- [x] Implement a game menu
- [x] NEW GAME
- [x] RESUME
- [x] RESET
- [x] SETTINGS
- [ ] Add user interactivity
- [ ] Select a pendulum
- [ ] Change properties of the pendulum
- [x] Add pendulums
- [ ] Remove pendulums
- [ ] Drag a pendulum while the simulation is running
- [x] Implement the `AudioSource` class: - host multiple oscillators, - add ADSR
envelop - add detuning
- [ ] Update the classes docs
- [ ] Implement a glow halo effect for the pendulum weight, when it plays a note