Keyboard Rhythms and Beats Synthesizer
K.R.A.B.S. is a music synthesizer that allows you to create beats and melodies using your keyboard.
Craft your beat loop using your keyboard or press the 🎵 button to generate a random beats combination.
Indicate one of the 5 squares to the crab and he will move there to play a melody for you!
Enjoy!
You can try the synthesizer at the following link
https://sapienzainteractivegraphicscourse.github.io/final-project-krabs/
- Click on one of the 3 buttons in the main menu to start the synthesizer with the selected keyboard style
- Use your computer's keyboard letter keys (from A to Z) to play beat sounds
- Hold down keyboard letter keys to loop the beat sounds
- Use the "," button (:musical_note: button) to generate a random beats combination
- Hold down the "Alt" button (:crab: button) to play the crab melody
- Click on one of the 5 colored squares to make the crab move there (and change the crab melody)
- Use space key to stop all sounds
- Use mouse left click to rotate the camera
- Use mouse wheel to zoom in/out
- Use mouse right click to move (pan) the camera
- Use Tab to toggle the camera view between the crab and the keyboard
- Use Enter to hide the overlay controls info
- ESC to get back to the main menu
Created by Valerio Di Stefano using plain HTML, CSS and JavaScript.
For the Interactive Graphics 2022/2023 course at Sapienza University of Rome
Project PDF report available at:
https://github.com/SapienzaInteractiveGraphicsCourse/final-project-krabs/blob/main/KRABS%20Project%20Report.pdf
External libraries:
- Three.js (for 3D graphics)
- Tween.js (for animations)
Raw crab and instruments 3D models downloaded from Sketchfab and mostly reworked using Blender.
Other 3D models created using basic WebGL & Three.js geometries or imported from models created using Blender.
External textures created and/or reworked using Adobe Photoshop.
All icons, logos and images created using Adobe Illustrator.
All music and sounds created using FLStudio.