ICM – Week #5 – Piano keyboard – Rearranging code and visual

This week I sat with Leon, who showed me a few ways of making the code much more elegant and efficient. We used arrays to arrange the actions that are going to be distribute in any letter pressed. This is how the notes variable looks like:

First variable is the key code pressed, second variable is the color code and third is the location on the X axis.

var notes = [
[65, ‘#72d0f4’, 210],
[83, ‘#6effe5’, 190],
[68, ‘#fcbc57’, 180],
[70, ‘#f076ff’,170],
[72, ‘#ababee’,160],
[74, ‘#f295fd’,150],
[75, ‘#95e3fd’,140],
[76, ‘#f6ff6e’,130]

Next step is to add a sound to each key pressed.



After I couldn’t find key notes online, in a way that I can use it in the project, I met Xiaolong, who loves music and making very cool musical instruments. He offered to record it and that’s how he got the name – Xiaolong- king of keys.


I met Leon again, and he magically found a creative way to add a 4th variable inside the array. Leon is a genius.

The keyboard piano turns out quite fun, check it out here.


Leave a comment.

Your email address will not be published. Required fields are marked *