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.
<svg onload="Initialize(evt);DoWork()">
...
</svg>
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 output:
<svg onload="Initialize(evt);DoWork()">
<defs>
<script>
<![CDATA[
var SVGDocument = null;
function Initialize(LoadEvent)
{
SVGDocument = LoadEvent.getTarget().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()
{
var RedCircle = SVGDocument.getElementById('RedCircle') // Get the RedCircle via the DOM
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.
Swarm, Lesson 3
