Day 9 – Rainbow Piano

Today I found out that I’m actually in “lock-step” with Howard in his 180 days of design project! What a coincidence. I was inspired by his most recent blog post on color to incorporate a rainbow into today’s website.

The main things I learned today:

1. Rainbows and Math
I had no clue how to create a rainbow. Do I just choose colors and look at their html codes? I turned to trusty Google and found this tutorial: Making annoying rainbows in Javascript. I used the math sine function to create numbers between -1 and 1 then set the center and the amplitude. This allowed me to create values that would range between 0 and 255 for RGB values. Who knew sine was such a useful function? I miss math classes.
mathcatInstead of using a for loop like the tutorial, I created a function that would return an rgb value. Outside the function, I set a rainbowIndex that would increment by one every time the function was called.

rainbow
Party time!

2. jQuery .hover, .mouseenter, .mouseleave
I created 20 divs that would go across the screen and set the background colour to be black. I then used .hover to change the css background of each div as the mouse was on the div. This created a pretty rainbow gradient that changed as the user hovered over the different div elements. I was pretty happy with the website at this point but the setup reminded me of a piano.

So I thought, instead of having a big black box, why not make it look like a piano! I alternated ids of one and two for the div and assigned them black and white colours. Now the bars were black and white and then turned into a rainbow with the mouse over action.

But… I kinda missed the piano once it was gone. I added another function to remove the styling so that the keys would go back to their original colours. Note: setting the style value to an empty string removes all styles except for a style that has been applied with a CSS rule in a stylesheet (which were black and white background colours in this case).

piano
Rainbow piano keys!

3. Adding audio with html
Since it now looked like a piano, it might as well play some sounds! I looked up html5 audio code and downloaded some free sound files for the piano notes. Then I got stuck for a long time because I kept getting “play() is an undefined function”. I read many articles and solutions on stackoverflow.com before Richerd suggested it was because I had set the id of my sound files to the source line instead of the audio line, doh!

Finally I wanted to make sure the same sound did not play twice in a row. I wrote a conditional statement (that I also pondered over for a bit…) to find a another sound if the new sound was the same as the previous. I wrote similar code for my fortune cookie on day 3 yet still struggled coming up with the concept today. Practice, practice, practice!

Overall, today was more fun than the previous few days. I’m still quite sick with a cold but the bright colours definitely brightened up my day!

I hope you have fun playing with my rainbow piano. For the pianists out there: I’m sorry the notes are random!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s