ICM – Week #3 – Piano keyboard

This week I we were asked to pair with someone from our class, in order to have two more eyes watching our code. Sometimes it seems to be the thing missing while writing and finding a solution for the correct code structur.

I collaborated with Juan José Egúsquiza Franco.

We started with Juan José idea of keyboard that changes color each click. I added the thought of maybe creating from this keyboard, a piano that we could play with different keys from the keyboard. 

I joined this passed week Moon’s session, and it was really inspiring. Moon makes it looks easy and simple, which is a good way to think like that, but I feel that I need to learn where those complex but easy codes come from first. it was a great session anyway..After the session Moon explained us how to create shapes in “for loop” and connect them to another action –  drawing circles notes out of the keys.

Example of creating 5 lines for the music notes:

var spaceOfLines = 20;
var beginningOfLines = 100;

function draw() {

  for (var i = 0; i < 5; i++) {
    line(0, spaceOfLines * i + beginningOfLines,
      width, spaceOfLines * i + beginningOfLines);

The “for loop” actually limits the action of writing lines to up to 5 in specific location and spaces between each one. When we got to the point of adding the key press to this code, we couldn’t figure how to make each shape different in matter of difference in keys pressed, that defined by any other square. We had 8 ones, but how can “a” be associated with the first key, if it was created by a “for loop” function?… We struggled with the code, and decided to take this day to see Shiffman’s videos and come with new ideas.

The day after, we decided to create this code from scratch by drawing each square in the old fashioned way, and without loops so we can figure a way to connect key’s pressed. Our first try didn’t work, and we couldn’t figure how to connect the keys to the keyboard. We sat with Sam Lavigne, to figure how to make a specific key to react. He showed us how we can check a specific key “Writing”, which means, that when you press the key, you can see it’s value in the bottom window of p5. Than we had the values of the keys instead of writing ‘a’, and that was the problem. We had nice experience with for loops and creating functions.

You can see the final sketch here.

Leave a comment.

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