Skip to content

Latest commit

 

History

History
79 lines (67 loc) · 2.56 KB

README.md

File metadata and controls

79 lines (67 loc) · 2.56 KB

KRABS

🦀 K.R.A.B.S.

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!

🌐 Project Website

You can try the synthesizer at the following link
https://sapienzainteractivegraphicscourse.github.io/final-project-krabs/

⌨️ Controls

  • 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

ℹ️ Project Info

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.