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 (using the HTML5 canvas element), and it is easy to handle mouse or other events.

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,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 very simple HTML slide deck template. This is a PowerPoint-like presentation that is essentially just an HTML document, with some Javascript code that turns the document into a slide show. So all the user needs to do to step through the presentation is press the right-arrow key. View the presentation for more information, or look at its source code to see how it is put together.

Here is a more elaborate presentation: a calculus lecture. This is typical of a second-semester calculus course. But this shows extensive use of mathematical notation, and also uses diagrams. The source code shows how this is put together; it's meant to be easy to build this kind of presentation.

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. This uses a popular library, three.js, that makes it much simpler to program three-dimensional renderings. This can be used to program surprisingly elaborate and sophisticated renderings and games that can display in most browsers. No plug-ins or other software are needed, but certain browsers might not work on certain hardware. For example, WebGL will not Late 2011 MacBook Pro when using Chrome, but it will when using FireFox.

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 very simple wire-frame 3d rendering, using nothing but a 2d Canvas drawing element (the vanishing-point perspective projections are contained in the app itself and are simple but accurate). Lines are cut to show that other lines are in front of them (this is still a bit rough).