Simon speaking at Processing Community Day Amsterdam
You can access the code of the poster and the animation and download the presentation in PowerPoint, on GitHub at https://github.com/simon-tiger/times_...
Added an animated version in p5.JS: https://editor.p5js.org/simontiger/sk...
Demo animated version: https://editor.p5js.org/simontiger/fu...
Video of the p5.JS animated version: • Times Tables Visualization in p5.JS
Link to my animated version in Processing: • Times Tables for 10 Oddly Satisfying Minutes
Link to me explaining the animated version: • Simon explains his Times Tables Visualization
Link to me explaining the poster version: • Times Tables Visualization Poster in Proce...
Link to blogpost with more pics: https://antwerpenhomeschooling.wordpr...
Project: This is a visualization for the times tables from 1 to 200.
Start with a circle with 200 points. Label the points from 0-199, then from 200-399, then from 400-599, and so on (you’re labeling the same point several times).
We’ll first do the 2x table. 2×1=2, so we connect 1 to 2. 2×2=4, so we connect 2 to 4, and so on.
2×100=200, where’s the 200? It goes in a circle so 200 is where the 0 is, and now you can keep going. Now you could keep going beyond 199, but actually, you’re going to get the same lines you already had!
For the code in Processing, I mapped the two numbers I wanted to connect up (call them i), which are in between 0 and 200, to a range between 0 and 2π. That gave me a fixed radius (I used 75px) and an angle (call it θ). Then I converted those to x and y by multiplying the radius by cos(θ) for x, and the radius by sin(θ) for y. That gave me a coordinate for each point (and even in between points, so you can do the in between times tables as well!) Then I connect up those coordinates with a line. Now I just do this over and over again, until all points are connected to something.
Unfortunately, Processing can only create and draw on a window that is smaller than a screen. So instead of programming a single 2000px x 4000px poster, I programmed 8 1000px x 1000px pieces. Then I just spliced them together.
Idea: Times Tables, Mandelbrot and the Heart of Mathematics video by Mathologer (YouTube): • Times Tables, Mandelbrot and the Heart of ...
Code: by Simon Tiger (https://simontiger.com/)