-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
48aa021
commit 04327e9
Showing
1 changed file
with
74 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,75 @@ | ||
|
|
||
| <p align="center"> | ||
| <img src=/images/logo.png alt="KRABS" width="600px" > | ||
| </p> | ||
|
|
||
| <!-- Add a title --> | ||
| # :crab: K.R.A.B.S. | ||
| <p font-size="1.5em"> | ||
| <b>Keyboard Rhythms and Beats Synthesizer</b> | ||
| </p> | ||
| <br> | ||
|
|
||
| <!-- Add a description --> | ||
| <b>K.R.A.B.S.</b> is a music synthesizer that allows you to create beats and melodies using your keyboard. | ||
| <br> | ||
| <br> | ||
| Craft your beat loop using your keyboard or press the :musical_note: button to generate a random beats combination. | ||
| <br> | ||
| Indicate one of the 5 squares to the crab and he will move there to play a melody for you! | ||
| <br> | ||
| <br> | ||
| <b>Enjoy!</b> | ||
| <br> | ||
|
|
||
| ## :globe_with_meridians: Project Website | ||
|
|
||
| You can try the synthesizer at the following link | ||
| <br> | ||
| https://sapienzainteractivegraphicscourse.github.io/final-project-distefano-interactivegraphics2023/ | ||
| <br> | ||
|
|
||
| ## :keyboard: Controls | ||
|
|
||
| <!-- Add controls --> | ||
| - Click on one of the 3 buttons in the main menu to start the synthesizer with the selected keyboard style | ||
| - Use <b>keyboard letters</b> (from A to Z) to play beat sounds | ||
| - <b>Hold down keyboard letters</b> to loop the beat sounds | ||
| - Use the <b>"," button</b> (:musical_note: button) to generate a random beats combination | ||
| - Hold down the <b>"Alt"</b> 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 <b>SPACE</b> to stop all sounds | ||
| - Use <b>mouse left click</b> to rotate the camera | ||
| - Use <b>mouse wheel</b> to zoom in/out | ||
| - Use <b>mouse right click</b> to move (pan) the camera | ||
| - <b>ESC</b> to get back to the main menu | ||
| - Use <b>Tab</b> to toggle the camera view between the crab and the keyboard | ||
| - Use <b>Enter</b> to hide the overlay controls info | ||
|
|
||
| ## :information_source: Project Info | ||
|
|
||
| <!-- Add a description --> | ||
| Created by <b>Valerio Di Stefano</b> using plain <b>HTML, CSS and JavaScript</b>. | ||
| <br> | ||
| For the <b>Interactive Graphics 2022/2023</b> course at <b>Sapienza University of Rome</b> | ||
| <br> | ||
| <br> | ||
| <b>External libraries:</b> | ||
| <br> | ||
| - <b>Three.js (for 3D graphics)</b> | ||
| - <b>Tween.js (for animations)</b> | ||
| <br> | ||
| Raw crab and instruments 3D models downloaded from Sketchfab and mostly reworked using Blender. | ||
| <br> | ||
| Other 3D models created using basic WebGL & Three.js geometries or imported from models created using Blender. | ||
| <br> | ||
| External textures created and/or reworked using Adobe Photoshop. | ||
| <br> | ||
| All icons, logos and images created using Adobe Illustrator. | ||
| <br> | ||
| All music and sounds created using FLStudio. | ||
| <br> | ||
| <br> | ||
|
|
||
|
|
||
|
|