Miscellaneous math/science tests with Javascript

September 2013 demo

The purpose of this demonstration is to make the case that Javascript, and modern browsers, as a vehicle for running js and displaying graphics, have become fast enough, easy to program and use, and fairly versatile as a platform for math and science applications. The following programs have been tested in the latest Firefox, Chrome, and Safari on Mac OS 10.6.8 and 10.8.5. I recommend Chrome for best overall performance. Some examples don't work in Safari, as noted below. Also, please note that no other browsers have been tested, including any on Windows or any mobile device. If you do not use the recommended browsers, these examples may or may not work correctly.

The examples are designed to run full-window (or full-screen), but will usually scroll in a smaller area. However, layout is only performed on page load. All examples share reusable code for application, data, math, plots, image, help, and other types. The js code is distributed into different folders for common and specific files, and is assembled into a single stream for download by a php program. The html for each page is minimal. Be sure to read the help (click the Help button) for each example, if present. Loading files and fetching help (etc) are provided by a php server program for each example. View the page source to see the html and js code. The data for several examples are provided by C programs (sometimes live) on the server. However, I can't call C programs on my public server, so there are just screenshots of those examples.

Latest examples

The first set of examples are about fractions, otherwise known as the rational numbers. They explore some generally unknown properties of the rationals, in particular the finite or infinite but repeating decimal sequences of their numerical values as given by long division. For example, code for performing long division on string numbers of arbitrary length was developed first in Javascript, and then rewritten in C for speed. Using C called from js (via php), division can be performed to ten thousand decimal places, or more, in just a few seconds. Unfortunately, some of these examples aren't live on my public server, so they are replaced with screenshots of the working programs on my Mac.

  1. test010 : This example shows the rationals as one quadrant of an infinite grid. Rationals can be selected and the numerator divided by the denominator to find an infinite repeating sequence, if any. The primitive rationals (reduced fractions) and their equivalent multiples are also shown. Several movies and plots can also be shown from this page. The movies don't work with Safari, but the plots do. Be sure to read the help.
  2. test011 : This page makes several different plots of the rationals, and is usually called from the previous page. The default is to plot the numerical value of each angular ray around the grid, as a movable 3d surface.
  3. test012 : This page shows several plots of the rationals as static 2d images. The plot data were created by a C program on the server. This example does not work with Safari, as it doesn't handle blobs correctly.
  4. test013 : This page provides a js interface to a live C program on the server that performs long division. Click the divide button to start the calculation, which may involve several thousand decimal places. This page is just a static image on the public server.
  5. test014 : This page makes more 3d plots of the rationals, and gets several sets of pre-calculated data from a C program.
  6. test015 : This page also provides an interface to a live C program that calculates the repeating sequence lengths of the primitive rationals in a specific subset of the grid. Again, this page is just a static image on the public server.

Previous examples

Most of the next examples have an additional example file to load (click the Load button), but the Save function has been disabled. Loading and saving files, and fetching help (etc) are provided by a php server program for each example. View the page source to see the html and js code.

  1. test004 : Image processing example. Create images from the palette, and perform various operations on their pixel data. There is also an example file to load. See the help for more info.
  2. test005 : Image animation example, using either setInterval or requestAnimationFrame.
  3. test007 : Another image animation example.
  4. test008 : Image data example. The animation is constructed on-the-fly in the window. Click to stop or start it. This example requires requestAnimationFrame (not available in Safari for Mac 10.6.8).
  5. test009 : Movie example: playing a stack of image data at 20 fps. This example, although only 1024x512 in size, uses 200 MB of image data from the server. Other movie examples exist, but have not been uploaded due to size. For example, 10 seconds of full-screen data (30 fps at 1680x1050) uses 2 GB of data. All image data was created by a C program on the server. This example does not work in Safari, because it doesn't understand "blobs".

More examples

Most of the next examples have an additional example file to load (click the Load button), but the Save function has been disabled.

  1. test002 : Another math + controls + plots example.
  2. test003 : An interesting simulation of the Bohr-Sommerfeld quantum orbit theory. (Be sure to look at the help, load the example, and zoom-out the display if you create orbits with n > 1.)
  3. test001 : One of the previous examples upgraded to use new code.

The following examples use an older version of code to create both a discrete widget UI and a flexible "box-and-wire" kind of data processing diagram. These examples are displayed in a div (and separate canvases) on the page along with other html.

  1. test021 : A dynamic diagram with components and wires. (Be sure to load the example.)
  2. test023 : A simple particle simulation.
  3. test024 : Another more complicated particle simulation. (Be sure to wait a few seconds after starting the simulation.)

  4. Matrix speed tests (inversion and multiplication of large random matrices):
    1. test013 : js console only + results comparison.
    2. test014 : With simple UI.
    3. test015 : Using a background worker.


©Copyright Sky Coyote, 2013.