Tesla's Vortex (Mathologer Coding Competition)

Click For Summary
SUMMARY

The discussion centers on the coding challenge inspired by Mathologer's video on "Tesla's Vortex," which involves generating patterns through repeated multiplication and modulus to create visual sequences. A participant developed a web app using JavaScript and WebGL to visualize these patterns, including cardiods. They seek suggestions for enhancements, particularly in coloring and rendering techniques, and mention experimenting with mean curvature smoothing and sharpening effects. The conversation encourages sharing generated patterns and exploring mathematical interpretations of the results.

PREREQUISITES
  • Understanding of JavaScript programming
  • Familiarity with WebGL for rendering graphics
  • Knowledge of mathematical concepts related to patterns and sequences
  • Experience with post-processing techniques in graphics
NEXT STEPS
  • Explore advanced coloring techniques for graphical patterns
  • Research mean curvature smoothing and its applications in graphics
  • Learn about the Processing environment and its JavaScript variant, p5.js
  • Investigate existing solutions on Rosettacode.org for similar coding challenges
USEFUL FOR

This discussion is beneficial for web developers, graphic designers, and mathematicians interested in computational art and pattern generation techniques.

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

t2m8948.png


t943m65933.png


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

t652 m105588.png


t652m105588.png


t652m3917.png


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.
 
  • Like
Likes   Reactions: jedishrfu and Drakkith
Technology news on Phys.org
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.
 
  • Like
Likes   Reactions: Jarvis323
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.
 
  • Like
Likes   Reactions: jedishrfu

Similar threads

  • · Replies 2 ·
Replies
2
Views
3K
  • · Replies 1 ·
Replies
1
Views
2K
  • · Replies 66 ·
3
Replies
66
Views
7K
  • · Replies 1 ·
Replies
1
Views
2K
Replies
1
Views
2K
  • · Replies 5 ·
Replies
5
Views
3K
  • · Replies 1 ·
Replies
1
Views
3K
  • · Replies 6 ·
Replies
6
Views
4K
  • · Replies 94 ·
4
Replies
94
Views
12K
  • · Replies 35 ·
2
Replies
35
Views
11K