IDM240 took our understanding of web graphics and SVG animations to a whole new level, turning single microinteractions into page-sized interactive visuals. This is hands down my favorite project I’ve ever worked on for college, and I can’t wait to do more SVG animation work in the future.
The project seemed simple enough: Pick a band and make an interactive web poster for one of their concerts. It needed to include one looping animation, one interactable animation, and one sound, as well as all the information for this concert. I was a bit frazzled at first since I had no idea what artist to pick, but once our professor said the event could be a fake one, as long as you have a link to the artist's webpage and event location, I asked if I could make a poster for my OWN music, and link to a Youtube live stream. That little loophole struck the match that lit the rocket.
As soon as I could apply my own personal touch to the project, I kept piling ideas on top of ideas to make this so much more complicated than it had to be, but so much more fulfilling and impressive. I would want to play 3 of my own songs and have different animations play for each. I would need to make sure everything would transition smoothly regardless of the user’s inputs and find ways to keep the animation from breaking if a user clicks too fast.
Before even starting this project, I had an existing art piece I made that I wanted to work into the project. I would end up rebuilding the image in illustrator and drawing a guitar for him, representing my guitar in real life. It had to be an SVG image because I was going to animate just about every part of his body in various ways with Javascript. I had not realized how much latency this SVG would produce though, but I did eventually have to scale down the SVG file to try and fix this.
Once I had all the assets in the page, it was just plug and chug trial and error to get the animations exactly where I wanted them to be. The first snippet was getting the speaker to bump at variable speeds for each song, and have them play and stop without overlapping or cutting each other off. Then I developed the body motions as he would be playing the guitar, as they would be the same for each song, just playing at different speeds like the speaker.
The most challenging part was getting the animation to stop without snapping back, since it’s an infinite looping animation. I had to go out of the scope of class teaching to figure out how to stop it using clearInterval functions and several if statements. With the final framework in place, I spent two whole days manually timing out each note of each song so his hand motions would match how it looks to actually play the song.
Overall, this project was a massive success. It’s the piece I’m most proud of, as it clearly demonstrates my animation intuition, dedication, and ability to make it work no matter what the user does. I am considering pursuing this further, and doing freelance animation work, so long as I can get better practice optimizing the SVGs and Javascript functions.