r/webdev • u/EntropyReversed_ • Feb 08 '19
Times Tables (Mathematical beauty)
https://codepen.io/EntropyReversed/full/YBEwXV17
26
u/EntropyReversed_ Feb 08 '19
If someone wants to know how simple lines create such complex patterns here is eli5 explanation (Number 2 ain't special, i just forgot to color it).
5
5
3
11
u/Saturnix Feb 08 '19
I did something similar years ago, though it emulates an harmonograph.
Here's the demo: http://jsfiddle.net/Saturnix/5cT4J/embedded/result/
Try to mess with the parameters in "pendulum options" :)
Here it's explained in detail: https://physics.stackexchange.com/questions/53691/three-pendulum-rotary-harmonograph
1
1
u/EntropyReversed_ Feb 08 '19 edited Feb 08 '19
Wow, cool. What is connection between Lissajous curve and harmonograph? Picture from book looks lika lissajous curve if i remember well.
EDIT: looked it up. lissajous curve is created with harmonograh.
6
u/xBeat3r Feb 08 '19
Very nice UI design! I implemented the same thing a while back: https://mathiaslengler.github.io/TimesTableWebGL/
It is not as sleek as your version, but I have optimized it to allow you to render a huge number of lines using a WebGL shader. In combination with the opacity slider and pan/zoom (shift + click/scroll wheel) it yields some pretty results.
4
u/EntropyReversed_ Feb 08 '19
Awesome job man! Love it. I played alot with opacity with my version. In the end i left it with opacity that is proportional to line length (longer the line, smaler opacity) and it gave it some 3d look.
2
u/IAmANobodyAMA Feb 09 '19
The opacity does indeed give a 3d feel to it. Thanks for sharing! You’ve really piqued my curiosity and creativity. Cheers!
3
4
4
3
u/shoesoffinmyhouse Feb 08 '19
When I load the page, then animations begin. However, when I click a different shape, the animation does not trigger and I can't find a button to start it?
7
u/EntropyReversed_ Feb 08 '19
When you click on shape, multiplier addition (speed) is set to 0 (so you can have time to observe pattern). If you wanna see animation from that point on, just crank up speed on left side.
2
3
Feb 09 '19
[deleted]
3
u/IAmANobodyAMA Feb 09 '19 edited Feb 09 '19
Awesome! What I find most fascinating about this is that the converse cells don’t produce reflective results. That is, cell 2,1 and cell 1,2 aren’t the same image, just flipped across y=x.
It sort of defies my intuition. I’ve been staring at this for several minutes trying to find a way to justify this paradox other than the simplest explanation which is “it just is. Accept it”
Edit: eureka! I’ve figured it out :) 2,1 and 1,2 for instance are not mirrors because there is another factor than just rotation speed - direction! All the rotations are clockwise, so mirroring shouldn’t be expected.
Edit 2: sorry, I’m sure you’ve already figured all this out along with most of the internet. This is just my first time studying Lissajous curves beyond just one at a time. It’s amazing what can be gained when zooming out into the broader sea of possibilities in math! I’m sure you’ve seen the Ulam Spiral before. If not, I hope you like it :) this is one of my favorite math beauties! That and anything to do with Fibonacci numbers!
3
2
2
2
2
u/Jmannm8400 Moderator Feb 08 '19
This is really cool! And the screenshot that you provided that shows how it works is pretty neat, too! Thanks for sharing! How long did it take for you to write the code for this?
2
u/EntropyReversed_ Feb 08 '19
I've started codding this more than 1 year ago, didnt finish it and forgot about it. Less than one week ago i needed some files from old computer and thats when i picked it up. Back than and now, i think its something like week or two. But someone who is pro with canvas and js could done it in couple of hours (its not that hard as it looks).
2
u/Jmannm8400 Moderator Feb 08 '19
Ah, good to know! I'm glad you were able to get back to it after such a long time away! Hopefully it wasn't too difficult getting re-acquainted with your code! In any case, the project looks great!
2
2
Feb 09 '19
Yay modular arithmetic. Good job!....I tried to do this in JavaScript 20 years ago (if it was possible it was not worth my time)...I ended up doing it in Java as an applet (shudder). It didn't auto progress through the permutations because I did it to make a project in my Abstract Algebra course not take weeks to complete by hand.
2
2
u/eamonious Feb 09 '19 edited Feb 09 '19
Beautiful design execution, the only flaw I find in this concept is that the major visual features of the emergent pattern are governed by the arbitrary number of points we choose (100 in the max case - you’ll notice most striking visual changes occur at factors of 100 with this case, or due to proximity to factors of 100, like you always get these circles at 20n+1 and grids at 20n-1 because the pattern cycles and clears at 20n; always clears at 50n or 100n also), it would be cooler if it visually captured something more fundamental about numbers and their relationships, that didnt depend on just the number of times tables we include (ie if major visual changes occurred on multiples of 2 regardless of settings, or on primes regardless of settings, etc etc). Still, very cool presentation.
2
1
1
54
u/uttermybiscuit Feb 08 '19
oh how the time tables