Tesla's Vortex (Mathologer Coding Competition)

2 replies · 3K views · last reply
Jarvis323
Messages
1,247
Reaction score
988
Mathologer made a cool video recently about "Tesla's Vortex", or rather a cool method of generating patterns using repeated multiplication and modulus to generate repeating sequences, and then plotting those sequences around a circle. This creates cardiods and other related patterns, a different one for each multiplier and modulus parameter. They asked viewers to make a web app for generating these patterns as a coding challenge.



Anyway, so I made one and made a bunch of patterns. So I was wondering if anyone has ideas for how to make improvements or add features for different coloring or rendering. I tried coloring edges by length, but it doesn't look like in the video, and I think the images in the video are not actually coloring edges by length? Unless maybe the edges were also rendered in sorted order by length so that you cannot see the long edges crossing crossing the diameter (only in the center).

Rendered pattern on black background: a large light grey circle with a cardioid-shaped white region, cusp at bottom centre. Top right lists multiplier = 2, modulus = 8948, pattern length = 2238.


Screenshot of a web app rendering a Tesla's Vortex pattern: a grey circular design of nested curved arcs and chords forming cardioid-like shapes, with sliders for multiplier and modulus and text reading modulus = 65033 and pattern length = 20628.


I was also messing around with post processing apply mean curvature smoothing and then sharpening, which has a cool effect. Anyone with more advanced mathematical knowledge know if there is any interesting mathematical interpretation of those results?

https://en.wikipedia.org/wiki/Mean_curvature

Two circular plots of repeated-multiplication line patterns side by side: the left shows fine grey chords forming scalloped lobes, the right is a smoothed, sharpened version with softer, wavy shading.


Two stacked grayscale renderings of a circular pattern of overlapping arcs and loops forming a rosette-like figure, with a small flower motif at the centre; the lower image is smoothed and sharpened, giving a rougher texture.


Three panels of generated circular patterns: two square images on top, one with a fine repeating mesh and one with dense curling loops, and a larger circular grey pattern below.


Anyone interested in the coding challenge and want some pointers feel free to ask, and also post any cool patterns you generate or comments on the mathematics.
 
Reply
  • Like
Likes   Reactions: jedishrfu and Drakkith

Discussion

Nice work! You could port your program to the Processing environment too. There's a javascript variant of Processing called p5js.org .

Also check Rosettacode.org to see if there are any solutions on site, if not you could donate your code to the cause.
 
jedishrfu said:
Nice work! You could port your program to the Processing environment too. There's a javascript variant of Processing called p5js.org .

Also check Rosettacode.org to see if there are any solutions on site, if not you could donate your code to the cause.
Thanks. It's currently implemented in Javascript with WebGL. I might share the code if I get time to clean it up a little.