Here are some JavaScript examples that I have programmed.
My goal was to learn some javascript and to create interesting little interactive mathematical demonstrations for possible use in mathematics instruction. What attracted me to this technology is that it is relatively simple to program attractive applications; it is easy to draw pictures, and it is easy to handle mouse or other events.
Here are a variety of examples I have programmed that use HTML5 and Canvas to draw interactive diagrams.
stacked graphs: This is a simple, interactive stacked graphs plotting: the order of the graphs can be changed.
tangent line: This draws a typical polynomial curve, showing a tangent line. It is interactive; the tangent line can be moved along the curve to show how the slope changes from point to point.
inflection point: This is similar to the tangent line app, but demonstrates what an inflection point on a curve is (the point of maximum slope, in this example).
circles-hyperbola: This app was inspired by an animated GIF I saw posted by Steven Strogatz (@stevenstrogatz) on Twitter on August 27, 2014; the GIF was by Matthew Henderson (blog.matthen.com; see his Archive for June, 2011). It shows two expanding circles whose intersections trace out a hyperbola; my version is interactive, drawing the circles when and where the user clicks.
drag-spots-shove: This app is foolish: all it does is show random spots, which the user can drag around with a finger or the mouse. This was inspired by a very simple javascript/html5/canvas demo I saw on the web, which allowed the user to move a single spot about, but I wanted to figure out how to handle mouse events with several different interactive elements. This might serve as the basis of more elaborate javascript apps that do something interesting or useful.
cycloid: This app demonstrates how a point on a wheel traces out a curve known as a cyloid, as the wheel is rolled along a line.
trochoid: This app is similar to the cycloid app, but allows the user to move the drawing point on the wheel inwards or outwards on its spoke, to change the curve being drawn. The result is a trochoid curve (either a cycloid, a curtate cycloid, or a prolate cycloid).
pointwise convergence and uniform convergence: These are two javascript demonstrations for my introductory analysis course (MATH-M 414).
epsilon-delta: This app demonstrates the epsilon-delta definition of a limit in calculus. The user can change the values of epsilon and delta, and see what this looks like on the graph of a simple function.
Koch fractal curve: This app draws a simple fractal curve. The app shows each generation of the curve as it is built. The curve can be modified by moving any of the three control points of a "generator" polygon. The fractal dimension of the curve is shown.
Mesolabium (square root finder): This app simulates a simplified version of the mesolabium of Eratosthenes (3rd century BCE). This is an ancient device resembling a slide rule that finds square roots.
Mesolabium (cube root finder) This app simulates the full version of the mesolabium of Eratosthenes, which finds cube roots. (This was his solution of the Delian problem of doubling the cube.) This app is based on a description of the device found in David Burton, A History of Mathematics, Seventh Edition.An interactive plot: faithful. This plot is interactive in that points display information if you mouse-over them. The idea is that the user can examine outliers or other interesting points. These graphs were written by an R program, so if an R user or programmer wished to plot other datasets, they can quickly produce interactive plots of this kind. (The "faithful" data is a well-known dataset giving eruption duration and waiting times for Old Faithful Geyser.) The source code for this project is available at Github: https://github.com/wclang/xy_plot_js.
Another interactive plot: test_plot. This plot shows two simulated datasets plotted on top of each other, but it gives the user the ability to toggle between the datasets. The plot is also interactive in that moving the mouse over a point results in information being displayed about the point. This plot was produced by an R program, and like the previous example, an R programmer can use the program to quickly produce scatter plots of this kind (comparing two desired datasets). The source code for this project is available at Github: https://github.com/wclang/xy_plot_compare_js.
A simple app: Decimal Clock. This shows a clock that displays the fraction of time elapsed during the day. So the clock would display 0.75 when it is 6:00PM. As a demonstration of HTML/Canvas, it's not terribly interesting, but it demonstrates how to handle dates and times in JavaScript.
The goal here was to create a simple, JavaScript-driven slide show (similar to PowerPoint). There are much slicker such slide show templates, but they tend to lock the user into fixed visual design choices or are hard to use. The template here is very small (dozens of lines of JavaScript), so easy to understand and tinker with. A primary goal here is to create a slide show format that is easy to author documents with. The primary problem to solve is putting mathematical notation into a web document. The solution is MathJax, a JavaScript library that allows the author to put LaTeX code into a web document.
Unfortunately, there are some issues with MathJax, especially in using it to place mathematical notation into Canvas diagrams or pictures. It seems to work but you may find mathematical notation is not the correct size or in the correct location in a diagram. Another problem: the MathJax consortium announced in spring of 2017 that it would no longer host the library, so links to it may become broken here.
A much better solution for mathematical slide shows is LaTeX/Beamer. However, JavaScript/MathJax slide shows such as the one here allow embedding of interactive diagrams or the like in the document (similar to some examples abobve). (All the author needs to do is make sure the slide show controls (the arrow keys) are not used by the interactive element.
Here is a simple demonstration of the slide deck template that gives information on how it works and how to use it to author slide shows.
Here is a more elaborate presentation: a calculus lecture. This might or might not work well in all browsers, but it might show the potential of this slide show template for producing more elaborate documents.
WebGL allows programming high-quality three-dimensional graphics in web documents. It encapsulates OpenGL. However, it is challenging to program, so certain libraries are used for graphics programming that make it much easier to program graphics. Here, I have created several simple applications that use the popular library three.js. These are rather rough; I'm still learning how to use this. But this library is extremely powerful, and can be used to produce interactive, three-dimensional diagrams or other applications for communicating mathematical ideas. (Of course, a primary interest for many developers in this is the programming of three-dimensional games, which have high requirements for interactivity, performance, and visual attractiveness.)
A simple example of a WebGL app I've programmed': a graph of a paraboloid. This renders the graph of this surface in three dimensions, allowing the user to rotate the surface using the mouse.
A simple model of an icosahedron showing how it's constructed. This shows three rectangles that intersect each other at right angles. The corners of the rectangles form the vertices of the icosahedron (which is shown as a red wire frame). The isocahedron has 20 faces, 30 edges, and 12 vertices. Each face is an equilateral triangle. (To make the icosahedron regular, the three rectangles each have sides in the ratio of the golden ratio.)
A WebGL Moebius strip. A real-life Moebius strip is made by taking a long rectangular strip of paper, twisting one end 180 degrees, and gluing the ends together to form a loop. The version here was made from a rectangular strip that is yellow on one side, and blue on the other.
A second version of the WebGL Moebius strip has a red sphere tracing its edge. Moebius strips are remarkable in having only one edge (not two edges), and the red sphere demonstrates this: it never leaves the edge, yet ends up tracing the entire edge.
A third version of the WebGL Moebius strip has a red sphere tracing its side. Moebius strips also have the remarkable property of having only one side, and the red sphere demonstrates this: it traces the entire side, never leaving the surface, yet visiting the entire side.
A friend of mine told me about a fun site called dwitter.net. Users can post "dweets", which are JavaScript fragments no longer than 140 characters; the idea is to create the most interesting or amazing images or animations possible for a code fragment that small. Many of the dweets are completely amazing.
Here, I've posted my first several dweets. But these are self-contained: I wrote a small template html page that (as best as I can tell) will run dweets exactly as on the dwitter site itself. See the source code to see how this works; the dweet itself is the body of the function u(t).
Here are some dweets I've written:
The idea here is to render simple 3D geometries in a 2D drawing context (in HTML5/Canvas), using my own simple 'hand-made' projection functions. (These follow the simple scheme described in the first several pages of Alan Watt and Matt Watt, Advanced Animation and Rendering Techniques, Addison-Wesley 1992.)
While the renderings are very simple (no hidden lines or surfaces, or shading), my hope is that this will enable an author to create simple animated or interactive 3D diagrams, without the difficulty of a sophisticated rendering framework such as WebGL/three.js.
The first app is simple: it shows a rotating wireframe icosahedron. It does little more than demonstrate the 3D-to-2D projection; see the source code for the surprisingly simple functions that do this.