Sit back, relax and enjoy this low-stress, visual and audio application. Press on the respective keyboard keys (labelled on the piano), and play any song you'd like! You don't have to know how to play piano to make music. Click on other keys for a sideline surprise.
- Users will be able to see available piano keys.
- Users will be able to visually observe which key is pressed (if one of the piano keys).
- Users will be able to hear the correct musical note when playing a piano key.
- On key press, users will be able to see a myriad of flying colors.
As a bonus MVP:
- Colored dots will explode like fireworks.
This single page app will consist of a piano at the bottom of the screen. Keys will be color-coded by key press.
This project will utilize the following technologies:
- Pure HTML5 Canvas
- Vanilla Javascript for display logic
The scripts necessary for this project are:
particle.jsfor Particle logicfirework.jsfor Firework logicmain.jsfor rendering the canvas and all other logic
- Use solely HTML5 Canvas to draw elements.
- Render a piano on the screen with correct positioning and sizing of keys.
- Generate particles on systematic randomness.
- Find music.
- Play music on keypress.
- Label piano keys.
- Shoot fireworks on explosion.
- Display title and developer information.
- Indicate which key was pressed.
- I had a delayed start to this project. Over the weekend and during the first part of the week, I was working on a completely different Javascript project. After working on that project for several days, I decided that there wasn't much improvement I could make on it to a point where I'd be pleased with my accomplishment, so I turned a 180 and decided to attempt a completely different project. Unfortunately, this left me with only 2 1/2 days left to complete my resulting Javascript project.
- Initially, I thought I would be able to use the same logic for Particles and Fireworks, but it wasn't until near the end of day 2 that I realized that would not be feasible.
- Although I only had two full days to work on this project, I was able to complete most of the foundation logic within the first day. At the end of Day 1, I was able to render a piano, have a title, play sounds and create particles on command. By the end of Day 2, I added labels, fireworks, and links.
- I challenged myself to completely this project in 100% HTML5 Canvas and I'm happy to say that I made it happen! There were times when I knew it would be much easier to add other HTML elements into the project (e.g. links to my Github and LinkedIn), but I stayed strong in my original goal, and learned more Canvas methods and possibilities in the process.
- Play specific songs, and show keyboard movement on notes