Moving Dots on a Line with CreateJS or Vanilla JavaScript

Recently I spent a rather large amount of time working on a silly star map that no one is likely to ever look at until after I’m famous and long dead, when it will be uncovered by digital archaeologists and mistaken for primitive astronomy.

I have a point, I swear. Just give me a moment to process my thoughts.

The map is based upon the old Star Trek Role-Playing Game by FASA. I punched in the coordinates for the various systems and wound up with a nifty map powered by the HTML5 canvas. It’s part of an app I’m making for practice. I’m currently making it with jQuery and CreateJS, but I might try to make it again in React once it’s finished. The idea is to use fun (for me) subject matter as a motivator. So far, that’s working pretty well.

Get to the Damned Point

Okay, okay. I wound up with a desire to draw a line between two points on the thing, and I decided that little arrows should flow down the line from the origin to the destination. So how would I do that, exactly? This is a specific problem, so I thought it was a good candidate for a fiddle.

First, I started with regular old vanilla JavaScript. I didn’t have to do so since the app uses CreateJS, but I felt a moral imperative to do it “the right way” before doing it “the easy way”. That’s not really a fair assessment, however. This was really more about knowing rules before breaking them. I don’t want to become dependent upon CreateJS for all animations, in the same way that I don’t want to be completely dependent upon jQuery.

So anyway, I made this fiddle first. The idea isn’t too crazy. Calculate where the line is going to be, with rotation, movemenet and everything. Then use the two end points of the line to determine where some equadistant dots will go. Calculate the position of the line and the dots upon it, make any changes or position updates while you’re doing that, and then render everything to the canvas. The result should be a line moving around with dots moving along that in a repeating pattern. I ran the script and rejoiced, for my goal had been achieved.

Except that it was shakey. The dots were shaking on the line. Watch the fiddle closely, especially as it nears the edge of its movement. My first guess is that sin waves get some weird decimals, and that the solution would be More Math. Only I didn’t want to do More Math. It was time to switch to CreateJS and see if it was any better there.

I have to say, this fiddle turned out much better. The approach is different with CreateJS (or really just EaselJS since I wasn’t really using the other components. You don’t have to worry about saving and restoring the canvas context stack, or translating to a location before you rotate, or any of a number of things that you would do if you were programming this with straight-up JavaScript. It’s a personal view, but I feel like it’s a bit like cheating if you use a tool like this without knowing how to do those other things first. EaselJS creates a wonderful abstraction layer and does a ton of chores for you, but you can’t appreciate that unless you’ve saved, restored and translated a few times. I’ve done that stuff, however, so for me this was a welcome relief.

It’s especially helpful for folks who have ever messed with Flash. You can declare a registration point just as you would with a Flash graphic symbol, and you can rotate whenever you like without having to convert back and forth between degrees and radians. It was easier and simpler overall, and I loved it. It was so much easier that I opted to rotate the line instead of just moving it, because the dots remained nice and stable in this version.

Where’s the Ticker?

One thing that’s missing from the CreateJS fiddle is the useRAF property on the Ticker. In fact, you won’t see a Ticker at all. This is mostly because I threw the thing together after making the other one. I’m just using a regular vanilla polyfill to drive the animation frames. That’s okay, because I really just need to make sure I call stage.update() on a regular basis. Even though I wasn’t using CreateJS to drive the frames, it still works just fine.

That being said, the Ticker is a better option for calling animation frames. It already has code for running this stuff, and it’s a waste not to take advantage of that. I could make this thing smaller if I did that, and I would have if I wasn’t just trying to see if the dots looked any better.

Another thing I didn’t use is proper time-based animation. I just increment the rotation a bit on each frame. This is okay for tests like this, but it isn’t the best way to go for a real project. You’ll want to calculate how many pixels or degrees or whatever per second you would like to go, and move things based upon how long it’s been since the last tick. That way, if the frame rate drops then your stuff will still end up where it’s supposed to be.

But that’s a can of worms that belongs in it’s own post. The take-away for today is that EaselJS can save you a bunch of time and effort. I’m still going to make vanilla JavaScript animations, of course, but just for the small stuff. Medium to large projects (and most things that require assets to be loaded) will use CreateJS.