This will permanately delete everything on your canvas
GeoSynth is an openisource visual synthesizer for the web. Coded purely from Javascript, HTML, and CSS, GeoSynth uses Javascript libraries like Matter.js, Jquery.js, Tone.js, p5.js, and Semantic UI to create stunning visuals and sounds
Digitally synthesizers traditionally use knobs, sliders, and buttons to create and manipulate music. The only visuals provided are audio waveforms. GeoSynth combines fun visuals with synthesized audio to create a more enjoyable experience. My inspiration came from a Geometric Construction class from Michigan Math and Science Scholars. GeoSynth uses balls that move at a constant velocity, and when they collide with a shape, they reflect off and produce an assigned note. Having played three musical instruments, I implemented piano notes to keep things simple. In addition, I’ve added, drum beats, duck sounds, and more. I hope to bring a smile to people’s faces when they compose with GeoSynth and stimulate their creative thinking.
Hover over any button for more instructions and shortcuts!
The main thing to note is the effects dropdown controls which type of musical effect, the shape buttons allow you to choose shapes and add them, the ball button allows you to add balls that move at a certain velocity to the scene, the eraser allows you to remove anything you don't want, and the menu button is for more settings, credits, the source code, and more.
Good luck and have fun!
You can find all hotkeys available in the menu tab
CTRL + Z to undo is now available! (Sadly redo is not available yet)
Zachary is 14 years old and currently attending his sophomore year at high school in California. He has a big passion for origami, programming, blender sculpting, and basketball.
You can check out some of his hobbies on his YouTube channel.
If you would like to contact him, please email him at zdragonite21@gmail.com.
Tony Leong (my dad) helped me come up with ideas, tested my in-process designs, and supported me emotionally.
Marc Schroeder inspired me to combine web audio with visuals and helped with technical issues along the way.
Tywen Kelly, Niki Selken, Dave Elfving also advised me on this project.
space - pauses/plays
m - mutes/unmutes the music
esc - escapes out of any active tool
e - intiates the erase tool
h - hides/unhides the top bar
b - intiates the ball tool
c - clears everything, clears only balls, or clears only shapes
ctrl + z - undos the last step made (add ball, add shape, erase)
+ - increases the speed of the physics
- - decreases the speed of the phyiscs
0 - resets the speed of the phyiscs
This will permanately delete everything on your canvas
GeoSynth by Zachary Leong