Chaos game explorer, programmable with MathJS

[herdrick]

Hello all!

I've been having fun making a programmable 3D Chaos Game framework for the web: https://herdrick.github.io/chaos-game/chaos-game-3d.html

The MathJS programmability might interest you. Instead of the usual chaos game rule (pick one of the targets at random and move the point halfway there), you can write arbitrary MathJS to decide where the next point goes. Click 'Customize the "next point" code' to see that.

Each of these fractal attractors can really be thought of as an infinite family of attractors -- each setting of the constant parameters is its own thing. The most fun way to explore this space is to replace a constant with live interactivity. So, I give MathJS users the ability to make a noUISlider by attaching a createSlider() function to the scope object. You can see how users use that in the default MathJS code.

Along the way I added a 'debug mode' which causes the MathJS expressions to be executed one at a time, instead of being compiled as a block, in order to help the user see which of their expressions is throwing an error, and when the MathJS error message includes a mention of an offending character, I highlight that character in red.

Repo: https://github.com/herdrick/chaos-game/

demo1-chaos-game-6-vertices.mov

[herdrick]

Endless possibilities: https://chaos-game.short.gy/IBnlaM

corcoran-attractor-1.mov

[gwhitney]

Remarkable. I came to mathjs a a result of a research project, dubbed "Numberscope", joint with Kate Stange at the University of Colorado to create visualizations based on the On-line Encyclopedia of Integer Sequences. One of the visualizations is a chaos game controlled by the sequence entries. We hope to get to an alpha release by the end of the calendar year, and will definitely post you when we do. Beautiful work, by the way, and nice use of mathjs ;-)

[herdrick]

Thank you so much @gwhitney! Visualizations for the On-line Encyclopedia of Integer Sequences is a great idea. I'm very curious about connecting the chaos game to that! Please let me know if you'd like to integrate with my thing in some way. I'm already loading MathJS code from 'Share' links created by the 'Share' button in this thing so that could work as a integration point.

[josdejong]

Amazing Herdrick, thanks for sharing 😎

[herdrick]

Thank you @josdejong! Glad you enjoyed it!

[dvd101x]

Hi, this is impressive and a nice example for the use of mathjs.

I saw the video and found the concept fascinating.

I would like to share a mini implementation on a project that runs mostly in mathjs.

https://dvd101x.github.io/Engineering-Solver/

# # Chaos game
#. Configure to use Arrays
config({matrix:"Array"});

#. Define tetrahedron vertices
x = [cos(pi/6), 0, -cos(pi/6), 0];
y = [-sin(pi/6), 1, -sin(pi/6), 0];
z = [0, 0, 0, 1 + sin(pi/6)];

#. Initial point (could be random)
x.push(0); y.push(0); z.push(sin(pi/6));

#. Generate random sequence
randomPoints = randomInt([2000], 1, 5);

#. Midpoint between current point and random
rule(id) = [
  x.push((x[end] + x[id]) / 2),
  y.push((y[end] + y[id]) / 2),
  z.push((z[end] + z[id]) / 2),
];

#. Chaos game iterations
forEach(randomPoints, rule)

#. Plot
trace = {
  x: x, y: y, z: z,
  type: "scatter3d",
  mode: "markers",
  marker: { size: 1, color: z, colorscale: "Viridis" }
};

plot([trace])

[josdejong]

Nice David 😎