Javascript Demos

Maximum Number of Bounces Line Circle

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

By clicking you can add new lines and circles.

Total Rays: ( rays/sec)

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.

!!!

This is a method of doing quick lookups of points in a 2D grid. This implementation could be optimized by only rerendering the affected parts of the quadtree.

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

$$ \frac {\vec F}{m} = \frac{d^2 \vec r}{dt^2} $$ $$ \vec F = - G \frac{m_1 m_2}{| \vec r_1- \vec r_2|^2} $$ This is just a basic demo of Numerical integration applied to a planetary orbit simulation modeled by the equations listed above. When you mouseover the canvas, the simulation will run.

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).

This is a demo of the idea that very complex systems can come from very simple rules (the chaos game). In this instance you click three points to form a triangle, then from that trangle it randomly picks one of the corners to start at. Then from there it continues to randomly pick corners, and as it does this it sets the current point to be the middle of the current location and the corner selected. By iterating this rule many times the shape of Sierpinski's triangle appears from seemingly random points.

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.

This is just a basic demo of 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|) \)

This demo is the same as the one before with the added ability to click to add points to calculate the image from. The algorthm used is extremely naive (n2 comparisons), and is not suitable for much more than a couple points. Performance could be improved by reducing the comparisons required by using Fortune's algorthm.

$$Z_{n+1} = Z_{n}^2 + C$$ This is a mandelbrot. This image is rendered with a simple equation.

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.
(-0.5, 0, 0)
(-0.041739845552092626, 0.9862504959838833, 8)
(-1.2840349708699048, 0.42734845335127464, 12)
(-1.9539647648572862, 1.3152440297281372e-12, 29)

As you scrub from left to right it adds more iterations (1 iteration per 4 pixels). With this you can see the added detail with running more iterations.

$$ \nu = \frac{\left ( n - log_p(log|Z_n|) \right) \times N} { S }$$ Where \( \nu \) is an index to a gradient, \( n \) is the number of iterations that were done, \( p \) is the power of the mandelbrot equation (in most cases this is just 2), \( Z_n \) is the value at the final iteration, \( N \) is the maximum number of iterations, and \( S \) is an arbitarty smoothing amount (in this example it is what is changed as you move your mouse across the canvas).

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.

This demo shows the path that is followed when iterating the mandelbrot equation.

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

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).

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.

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.

Pressing A will cycle the color channels \(red \rightarrow green \rightarrow blue \). Pressing S will flip the red and green channels.