The Times Tables Visualization Poster and Animation

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_tables

Recently also added an animated version in p5.JS, see my code at: https://editor.p5js.org/simontiger/sketches/B1PgZxek3

Link to my animated version in Processing: https://www.youtube.com/watch?v=WDYiBnij2wY

Link to me explaining the animated version: https://www.youtube.com/watch?v=uHyjP94NjpY&t=21s

Link to me explaining the poster version: https://www.youtube.com/watch?v=I-b54QkD3so

Link to blogpost with more pics: https://antwerpenhomeschooling.wordpress.com/2019/02/09/12152/

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)

Code: by Simon Tiger (simontiger.com)

9-year-old Simon presenting the math behind animating the times tables poster at the Processing Community Day in Amsterdam in February 2019

A video of Simon’s animated times tables visualization, the P5.JS version: https://editor.p5js.org/simontiger/full/B1PgZxek3