I set myself the slightly odd challenge of creating a few interactive poems using JavaScript elements. I plan to do this every so often for a while.1 Each creation will have my own poetry,2 an image, and some element of JavaScript driven interactivity that relates to the poem. The theme came about because I was reading Don’t Bump the Glump to my youngest. I like playing with words and have a long list of strange ideas that I’ve never brought any further. I also want to keep learning JavaScript and to mess with a variety of js libraries. On the art/drawing side, I’m working on my vector drawing skills in Illustrator.
The two examples I’ve done so far have just been thrown up as bare bones HTML sites3 and have used completely different js libraries. They’re both built off already existing examples that I modified. I don’t consider that cheating but will probably move more towards from scratch construction as I get better at things.
The Grabbit
The goal: Eyes that will track mouse movement. It’s iframed in above but the full size page is here.
The start: A brief search led me to this Code Pen. It uses jQuery as the main library.
I’ve got think more about mobile when doing interactive stuff with js. I think I can switch out jQuery for the mobile device versions and start using the virtual mouse events but there’s a different vocabulary and structure to many things when you do this. Obvious but not instinctual for me. I’m rewriting this one to deal with mobile because it will be so much more fun to follow a finger around the screen.
The Chameleon
The goal: The chameleon is so fast it cannot be caught and it changes colors each time, you know, like a chameleon. It’s iframed in above but the full size page is here.
The start: This example is built of the svg.js library and was inspired4 by their demo example here. I played with some of the parameters to keep the chameleon around. I also added a chunk so that on mobile it’d jump when clicked rather than avoiding the mouse hover. That’s a poor replacement but sort of works for the moment.
I did learn how to get SVG code out of Illustrator which I hadn’t done before. Not a monumental feat, just a new one. Google also has an SVG drawing tool that might come in handy.
