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.
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.
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.