This demo shows how light bounces. The green lines are treated as perfect mirrors.
By clicking you can add new lines and circles.
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.
Click to create points, click and drag to select them. The points can then be removed by pressing A
.
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).
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.
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|) \)
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.
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.
When the line is red, it means that the point is inside the Mandelbrot Set. If it is green, then it is not.
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.