When I was reading Sara Soueidan’s articles [ref]part 1, part 2 and part 3[/ref] about SVG transformations, I began thinking what could I do with a matrix transformation. Specification [ref]SVG specification[/ref] describes six elements of the transformation matrix, but there is no simple practical use case. I wanted to try and find one.
I can be quite obsessed with math for short periods of time, so when I realized that I can finally apply what I learned in a linear algebra class, I was happy. But when I researched this topic more I came to several conclusions:
- Matrix is described there for browser developers
- and for math enthusiasts
- it’s smarter for a front-end developer to use specific transformations
With these three conclusions in mind I changed my approach, but not the overall goal. The original goal was to be able to fly a SVG spaceship[ref]What can I say? I grew up watching Star Trek. The USS Enterprise (NCC-1701-D) is my favorite ship and Kathryn Janeway is my favorite captain[/ref]
Why did I use SVG?
My decision to use SVG was influenced by recent hype, and because I am not familiar with WebGL technology at the moment. There is also HTML Canvas, but I prefer dealing with structures[ref]SVG is better for accessibility too if not now then surely in the future because it’s parsable[/ref]. I may be an electrical engineer/computer scientist by education, but heavy coding is not my cup of tea[ref]It may have been true at the time when I wrote this post on paper, but at the moment tides are changing as I have time to think why I even chose this career path.[/ref], so that’s a second reason against using HTML Canvas. I am well aware of possible performance issues.
Scripting the spaceship
In the Specifications there described built-in object for handling SVGs.
Primarily I worked with
SVGMatrix object which allows you to use the transform functions and if you want to you can even edit a-f elements of the matrix[ref]Take a look at how the matrix looks in spec link[/ref].
Before I could use the SVGMatrix I had to create and use a SVGTransform object to initialize list of the SVG transforms. I also created empty matrix which I’ll be using on key events.
var x = document.getElementById("spaceshipSVG");
var matrix = x.createSVGMatrix();
var tfm = x.createSVGTransform();
To make this example simple the spaceship can go forward or backward and can turn on spot, nothing fancy. There are only four direction it can turn so it is a four state machine. The state is saved in special variable even though I could calculate it from the matrix.
There’s one thing I haven’t figured out is how to turn on spot without the need to translate the spaceship back to the original location. I know theoretically how to do it but practically I wasn’t able to figure it out yet. And so with every rotation I use one translation.
matrix = matrix.rotate(90, matrix.e + document.getElementById("spaceship").getAttribute("width"), matrix.f + document.getElementById("spaceship").getAttribute("height"));
matrix = matrix.translate(0, -100);
When the spaceship moves forward or backward it’s limited by artificially set borders. If there was no clear definition where borders are the spaceship could move outside of a SVG’s viewbox and disappear. If I make second version of this demo I would definitely work on how to detect which elements are viewable and which are outside of the viewbox. To monitor the spaceships coordinates I used e and f elements of the SVGMatrix .
This experimental demo was about my curiosity how to use the matrix transformations. But I’ve found better, more efficient solution how to control an SVG object. There may be way how to fix this demo and make it better, but at the moment I have different priorities.