My Times Tables Visualization Poster has arrived! Will probably present this at @CC_Amsterdam @ProcessingOrg Community Day Amsterdam!

https://t.co/ChTg0eOLIn

# Tag Archives: visualization

# Simon’s Times Tables Visualization

Simon shows his Times Tables Visualization in Processing (Java) and talks about how it’s connected to Mandelbrot Set. See the code with the README on GitHub: https://github.com/simon-tiger/times_tables

View the full animation here:

Simon writes: This is a visualization for the times tables from 1 to 200 (including the in-between numbers that are multiples of .01). I used modular arithmetic to write the code:

0. Start with a circle with 200 points (I’ve chosen 200, your number could be anything, but we’ll use 200 in the instructions).

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

2. We’ll first do the 2x table. 2×0=0, same thing so we don’t do anything. 2×1=2, so we connect 1 to 2. 2×2=4, so we connect 2 to 4, and so on.

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

4. Now you could keep going beyond 199, but actually, you’re going to get the same lines you already had!

5. You can now create separate images for the 2x table (which we’ve just done), the 3x table, the 4x table, the 5x table, and so on. You can even try in-between numbers (like 2.53) if you want.

In the program, you see an animated image at the left of the screen, and 4 static images (representing examples of times tables) to the right of that. They represent the 2x, 34x, 51x and 99x tables.

The idea of a times tables visualization comes from a video by Mathologer, but the code Simon wrote completely on his own.

# Binary Tree Coding Challenge, Simon’s version

Simon followed up on Daniel Shiffman’s Binary Tree Coding Challenge and made his own version: he flipped the tree so that it grows from the bottom (and not from the top) and got rid of the numbers. “Could we please, please send this to Daniel?” he pleaded. I said he could create an issue on Daniel’s GitHub page, which he did:

https://github.com/CodingTrain/Rainbow-Topics/issues/526

Code: https://github.com/simon-tiger/binary-tree

The tree (refresh to get a new tree every time): https://simon-tiger.github.io/binary-tree/index.html

Flipping the tree:

# Translating from Java to JavaScript. The Bubble Project

“Just recycling some building blocks here”, I heard Simon say Monday.

This is a screenshot of Simon’s Bubble Project – an animation he built by translating a Java code from a Processing tutorial he saw a while ago (he reproduced it from memory now) to JavaScript.

Simon put the project on GitHub the following day.

Code: https://github.com/simon-tiger/bubbles

Direct link to the animation (click on the canvas to make the bubbles appear): https://simon-tiger.github.io/bubbles/

You can also both the code and play with the animation via the p5.js web editor (hit Download to get the animation on your computer): http://alpha.editor.p5js.org/simontiger/sketches/r1l_4Gg6l

A couple videos of the making of:

# 3D Earthquake Data Visualization Coding Challenge

The earthquake data visualization coding challenge by Daniel Shiffman went further than just a 2D map – it went 3D! Simon managed to complete the challenge, except for the very last bit where he was supposed to correct the skewed GPS positions of the earthquake locations on his own (this part was not included in the challenge).