47
Consider performance limits.
For some types of simulations, computational speed is critical. Examples would include many-body
simulations of 100 or more particles, solving partial differential equations, and anything that needs
to quickly generate intricate, detailed images.
The good news is that in most modern browsers, JavaScript runs only a little slower than native
code. That’s because modern browsers employ just-in-time compilation, rather than interpreting
your source code anew during every iteration of a loop. On today’s personal computers, this
means you can perform about a billion elementary computations per second. That’s about 40
million computations per animation frame, at an aesthetically pleasing frame rate.
Of course, some users may be running your simulation on mobile devices that are slower than
your personal computer by an order of magnitude or more. For this reason it may be a good idea to
let the user adjust whatever parameter determines the required computational horsepower—such
as the number of particles or the resolution of a grid.
One quirk of JavaScript is that it provides no true multi-dimensional arrays. You can always create
an array of arrays, but I’ve found that this can impair performance. Instead I recommend using
large one-dimensional arrays and indexing into them manually: index = x + xSize*y. I’ve also
found that it helps to initialize such an array sequentially, nesting the x loop inside the y loop rather
than the other way around.
In general, JavaScript just-in-time compilers tend to be temperamental, because they must be able
to adapt to bizarre actions l
ike suddenly changing the type of a var
iable from an integer to a string
(or to something even more complex). To optimize performance your code must behave
predictably, rather than taking advantage of all of JavaScript’s permissiveness.
To generate intricate images, you may need to manipulate the pixel data directly via the
createImageData and putImageData functions. The Two-Source
Interference
sample page
demonstrates this method.
Learn about libraries.
If you want to do something complicated for which JavaScript doesn’t provide a built-in solution,
you may be able to build on the work of other programmers by using one of the many freely
available JavaScript code libraries. Using a library can save you a lot of work, and you’ll often end
up with better results. On the other hand, each library comes with its own learning curve, and using
one often means sacrificing some flexibility and performance.
Personally, I try to use libraries only when they’ll help me do something that I’m convinced I
otherwise wouldn’t be able to do at all (given my limited time and background). This means that I
avoid using libraries when they would merely make a task slightly easier: experience has taught
me that more often than not, the time spent figuring out how to use the library outweighs the time
saved coding with it. Of course, your needs and priorities may be different from mine. But my
general aversion to libraries means that I know very little about most of them, so I’m not well
qualified to make recommendations. Here, in any case, is an inevitably incomplete list of libraries
that, from what I’ve heard, might be useful (or even essential) for certain types of physics
simulations:
jQuery
is a general-purpose library for manipulating the elements of web pages and
27
