Electronics

Light

This demo shows how light bounces. The green lines are treated as perfect mirrors.

By clicking you can add new lines and circles.

2D Raytracer

This is a basic example of a 2D raytracer. The setup is as if you were looking down into a room filled with fog with a light in the middle.

Zeeman's Catastrophe Machine

Quadtree

Click to create points, click and drag to select them. The points can then be removed by pressing `A`

.

Region Quadtree

Numerical Integration

Listed below are the methods of integration.

Euler $$ p_{n+1} = p_n + v_n \Delta t $$ $$ v_{n+1} = v_n + a_n \Delta t $$ Symplectic Euler $$ v_{n+1} = v_n + a_n \Delta t $$ $$ p_{n+1} = p_n + v_n \Delta t $$ Verlet $$ p_{n+1} = 2 p_n - p_{n-1} + a_n \Delta t^2 $$ The bright green path is basic Euler integration, the dark green path is Symplectic Euler (it takes about 20 seconds to see it diverge from the verlet), and the white is Verlet Integration.

All three of these methods start with the same initial parameters so you can see how much they vary with results (especially the regular Euler).

Chaos Game

The first three clicks on the canvas are used to set the corners of the triangle. Then after this, the longer you keep your mouse over the canvas the more iterations it will run of the process. Pressing `A`

will restart it.

Voronoi (Worley noise)

Clicking the canvas will rerender with a new set of random points. Pressing `A`

, `S`

, `D`

, or `F`

will change the distance metric used to Euclidean squared, Euclidean, Manhattan, or Chebychev, respectively.

Euclidean squared: \( d = (x_2 - x_2)^2 + (x_2 - x_1)^2 \)

Euclidean: \( d = \sqrt{(x_2 - x_2)^2 + (x_2 - x_1)^2} \)

Manhattan: \( d = |x_2 - x_2| + |y_2 - y_1| \)

Chebychev: \( d = max(|x_2 - x_2|, |y_2 - y_1|) \)

Interactive Voronoi (Worley noise)

Mandelbrot

Left clicking will zoom in on that point, right clicking will zoom out. Note: Around a zoom level of 45 you will notice the limits of the precision of javascript's floats. This causes pixellation and banding in the image.

In the points of interest listed below, you can see some of the points of self similarity all over the complex plane at varying zoom levels.

Mandelbrot Iterations

Smoothing the Mandelbrot

This is the same as before with an added smoothing function for the coloring.

Scrubbing from left to right scales the amount before the smoothing repeats.

Mandelbrot Path

When the line is red, it means that the point is inside the Mandelbrot Set. If it is green, then it is not.

Buddhabrot and Nebulabrot

The following three canvases are demos of what is called the buddhabrot (the name comes from the fact that it looks like an image of Buddha rotated 90o ). This method of rendering the mandelbrot set makes use of the effect seen in the previous demo. Rather than just rendering how long it takes for the path to escape from the mandelbrot set it makes a 2D histogram of the points as they are escaping. The points are sampled over the image via the Monte Carlo method. Unlike the normal rendering of the mandelbrot set, the final result is highly dependent on the number of iterations that are done (as can be seen in the examples below).
The following is the result if the images above are added together with each one going to a different color channel. This method of rendering the mandelbrot set is called the nebulabrot (due to the fact that the coloring scheme is similar to the method that is used when taking pictures of nebulas). Note: for this to work properly you must have ran the previous three canvases.

Possible improvements can be done with Metropolis-Hastings sampling.

As you mouseover each of the canvases, they will begin calculating in the background. When you click on the canvas, it will render what has currently been calculated.

Pressing `A`

will cycle the color channels \(red \rightarrow green \rightarrow blue \).
Pressing `S`

will flip the red and green channels.