Introducing Daximation

With the end of soccer season, I have found myself with a lot of free time.  Well, I always had a lot of free time, but I occupied my mind with next practice, or game, or upcoming refereeing.  Physically I would just read (Demanding, I know  🙂
But reading isn’t cutting it any more. So I decided to start a new project.  The goal was to animate my website (the one you are reading).   Researching various animation techniques led to javascripts built-in animation, and the canvas element.  So I decided to create an animation program.  Something simple.

Turns out canvas is great for drawing, but not so much for animation, as there is no ‘state’ of a canvas.  It cannot contain or keep track of what you’ve already drawn.  The only way to animate is laboriously erasing the screen and redrawing it each frame (yes I know thats what animation is but canvas did not have that functionality built in).

This led to reading about SVG.   SVG = Scalable Vector Graphic.  The standard has been implemented for at least ten years, and I remember reading about when it was introduced.  Even as a kid on my old windows 95 machine I tried loading a SVG on my website and it didn’t work.  But as of 2013, SVG is working on today’s browsers.  If you had firefox during that year (with automatic updates turned on), you saw the version numbers jump from 5 to 20.  Why all the major releases?  Some of them were for SVG.

Bottom line is, the new <svg> tag in HTML provides for a rich and flexible way to draw and animate (with the <animate> tag) right on a website.  It uses the inbuilt graphics chip on the motherboard (Finally) to provide smooth and interactive animations, something that was never possible before without the use of Flash.  But now, anything that you could make as a regular program can now be written in javascript and used online.  Google has realized this for a while now.  🙂

And so, I created an SVG on a website.  I had code from my <canvas> attempt that let me draw shapes, and the logic was the same, so it was easy to copy that over to SVG.  A day or two of poking around with the <animate> and <animateTransform> tags (Another guide here) and I had some animation going.

The idea then occurred to use this to draw tactical diagrams for my soccer team.  I had looked for diagrams for doing Goal Kicks but they were scarce.  I downloaded a program that made tactical diagrams and thought “I can do better than this!”

Two weeks later I had something that might possibly pass as a sports-animation program.  My task was done.  Time to quit.  But… I still had heaps and heaps of free time.  So I kept going, now with the idea of creating a professional-looking piece of software that I could maybe possibly sell.  I wanted it online, but no one pays for software online.  So it would have to be free, and run by donations.  First step: get a domain name.

I was puzzling over possible names, each one more boring than the last, when for whatever reason my soccer team’s pre-game cheer sprung into my head:  “Dax em!”.  They came up with that on their own.  It sounds a little bit like ‘imagination’ or ‘animation’, and so my new title was born.  Daximation.

Ladies and gentlemen, I present to you:

Right now its still in beta.  I don’t know how to make it look good.  I also just spent the last week trying to get it to work on Internet Explorer, eventually to abandon the attempt when I realized the most basic of basic javascript commands, innerHTML, was not implemented.  After hours of puzzling it through (using innerHTML is at the core of my code), I didn’t see an easy way around it so I just said ‘screw it’ and now if you access the site using internet explorer it will redirect you to download google chrome.  🙂

I will be working on Daximation on and off as the mood strikes me.  I need to go back to pen and paper and draw something that looks good.  Right now it seems too crowded, too amateurish.

To Be Continued…..

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.