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 ElementR.
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.
All the graphic elements were drawn with Raphael JS and the best way to learn is to read the comments in the JavaScript file:
Conclusion
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.