Question

We’re using Javascript to draw polylines on a <canvas> element, based on some spatial and time coordinates. Specifically, each point in the line has the following properties:

* point.x
* point.y
* point.time

meaning that at the time point.time we extend the polyline with an additional segment to point.x/point.y. Being time-based, it’s essential that the data structure for the set of all points be as efficient as possible in terms of access time.

Intuitively, I believe that a simple array with 3 x N elements (for N nodes) will work best.

Do you have any other suggestions for a suitable structure?

Answer 1

You don’t have access to pointers or anything else, so you’re basically left to arrays and objecta in JavaScript.

Since your problem is fairly easy, and requires only linear access, a [x, y, t, x, y, t, x, y, t] array should indeed be the fastest way to access the things.

However keep in mind that access to the data won’t be the limiting factor here, <canvas> drawing performance, especially in Browser without Hardware Acceleration (which is currently still the majority), will be pretty bad if you draw on either a very big canvas, or many lines in a short amount of time.

Oh and last but not least, test it, don’t make assumptions about performance, remember:
“Premature optimization is the root of all evil”