Drawing with Raphael JS, Plus a Bonus for Guitar Players
Some of the best development projects are ones that combine other interests. If you know me personally, you probably know that I play guitar. While practicing recently, I needed a tool to help me visualize different notes on the guitar.
While searching the internet, I found a few things that were close, but didn’t see anything that was quite what I was looking for. I created my own interactive tool using MooTools and Raphael JS to help me learn what I was after.
Getting Raphael and MooTools to Play Together
Admittedly, the combination of MooTools and Raphael presented some challenges since there are collisions between
Element in Raphael and the
Element object in MooTools. The way to work around this was to create my own fork of Raphael and rename all instances of the
Element object in Raphael to
On to the Project
The project is pretty simple at its core. The application needed to accept user input for 12 notes, and diagram them on a standard 6-string, 24-fret guitar. The diagrammed notes also needed to be added or removed without refreshing the page and the application had to look cool too.
Using technology as a teaching tool is a powerful way to engage the learner, even if you are the one doing the learning. By using familiar skills, I was able to combine my interest in music with my knowledge of development that set out to meet an educational goal. Hopefully, this will help me, as well as others, to grow as guitar players.