Available in the Apple iBookstore

Art can be the creative expression of applying the principles of STEM.

The book on the right shows how math can be applied to create art while learning to code with Scalable Vector Graphics (SVG), a W3C standard.

The code to create the images below is developed step-by-step in the book, explaining how to do it using a simple text editor.


Music
Can you identify the musical notes? This SVG image will test you. Give it a try!
Click start, select just treble or bass clef if desired, then click on the letter of the note shown.


Click here to play full screen

Music Animation with Audio
The SVG example below uses a CSS Animation sequence on the notes and words. When the animation starts, javascript is triggered to play the audio for the note. The audio works well in Firefox and Chrome desktop browsers, not so well in Safari. No luck on mobile devices yet.

The following image is linked with an HTML <img> tag which blocks javascript. This was done by design so that it doesn't play the audio. An <iframe> could have been used, but the audio would play every time the page was displayed. That gets annoying. Refresh the page to see the animation sequence again.

Click here or on the image to hear the notes.