This is a continuation of Swarm, Lesson 1
OK, so now we know how to access the SVG document and can start to get some real work done. First we need to start defining the behavior of our system. We are going to start with a routine to get things moving… no, really….
First we need to be able to move objects around the screen. We can do that via the DOM. Once we have our document initialized, we can start modifying the document via the DOM. Since we have to wait for it to be completely loaded, I suggest we put this in the onload routine.
Now our DoWork routine should start the animation and make sure it keeps going. First, though, we should create something for it to do it’s work on. Here is our framework with a (smallish) red circle.
<svg onload="Initialize(evt);DoWork()">
<defs>
<script> <![CDATA[
var SVGDocument = null;
function Initialize(LoadEvent)
{
SVGDocument = LoadEvent.target.getOwnerDocument();
}
function DoWork()
{ // ???
}
]]> </script>
</defs>
<g>
<circle cx="10" cy="10" r="10" id="RedCircle"/>
</g>
</svg>
Now, we need to make that red circle go. I choose to make it go to the right personally. You, however, are welcome to make your own decision.
var dx = 2 // Directional controls every cycle the circle
var dy = 0 // moves 2 right and not at all vertically
// Note that these are global variables
function DoWork()
{
// Get the RedCircle via the DOM
var RedCircle = SVGDocument.getElementById('RedCircle')
var X = RedCircle.getAttribute('cx') * 1
var Y = RedCircle.getAttribute('cy') * 1
X += dx
Y += dy
RedCircle.setAttribute('cx', X);
RedCircle.setAttribute('cy', Y);
}
Now, once loaded our circle should move to the right. Note the ” * 1″ where we get the X and Y coordinates. That is to ensure that X and Y are numeric instead of strings. Later when we add dx and dy, those numbers would have been tacked on to the end had X and Y been strings. The difference is:
20 + 2 = 22
or
"20" + 2 = "202"
You decide which method you want to use.
Perfect, we’ve moved the red circle slightly to the right. I took the liberty to put a green circle behind the red to illustrate that it moved. Now, we want it to keep moving. This is a little tricky. The best ways to do a repeating action on an interval are setTimeout() and setInterval(). I prefer setTimeout() for a couple reasons. However, setTimeout() runs at the browser level, whereas our script is at the SVG level.
Here is where you’re just going to have to trust me. We are going to extend the browser window object a little bit to fit our needs. In Initialize(), place the following line:
window.doSwarmWork = DoWork
Note that this is not a good idea if you intend on placing several of these on one page. However it can be moved from page to page without a problem. What it does is place a pointer to the DoWork routine in the SVG, outside of the SVG. Just trust me, it works.
Now to set our loop, place the following line in the DoWork() routine:
setTimeout('window.doSwarmWork()', 25);
Now our little dot zips across the screen. You can tweak the direction by changing dx and dy just above the DoWork() routine. If you want to get a jump on the next lesson, try getting the circle to stop or even reverse once it gets to a certain point on the screen. If your feeling really hot, try to get it to bounce around a box.
Continue to Swarm, Lesson 3