BUMPER SYMMETRIES with SQUARES ... back to main page

Design by George Gadanidis (Western); coding by Chris Yiu (Western); art by Aileen Lin (Univesrity of Toronto).

PUZZLE #1. The 4 rotation symmetries of a square. Click on the images below the canvas to select the first 4 squares, rotated 0 (red), 90 (blue), 180 (green) and 270 (yellow) degrees, as shown at left. When you click on Run Code, the squares move, collide, apply their rotations to one another, and change their colours change based on the resulting rotations. Can you predict what will happen? Click on Run Code to test your prediction. More investigations: (1) Notice the splatters left behind as a result of collisions. Run Code a few times and observe the frequencies of the colours. Do you notice any patterns? Can you explain? (2) Use a "step until ..." code block to stop motion when all squares have the same rotation symmetry. Are some rotation symmetries more likely than others? Why? (3) Change the parameters of the code blocks and notice the effect.

PUZZLE #2: The 4 reflection symmetries of a square. Click on the images below the canvasto select the last 4 squares, reflected as shown at right, with respective colours of orange, cyan, purple and pink. When you click on Run Code, the squares move, collide, apply their reflections to one another, and their colours change based on the resulting transformations. Can you predict what will happen? Click on Run Code to test your prediction. More investigations: (1) Notice the splatters left behind as a result of collisions. Run Code a few times and observe the frequencies of the colours. Do you notice any patterns? Can you explain? (2) Use a "step until ..." code block to stop motion when all squares have the same rflection or rotation symmetry. Are some symmetries more likely than others? Why? (3) Change the parameters of the code blocks and notice the effect.

PUZZLE #3: The 8 symmetries of a square. Click to select all 8 squares, representing the 8 symmetries of the square: the 4 rotation symmetries shown above-left and the 4 reflection symmetries shown above-right. When you click on Run Code, the squares move, collide, apply their transformations to one another, and their colours change based on the resulting transformations. Can you predict what will happen? Click on Run Code to test your prediction.

MORE PUZZLES: Create your own! What's an interesting combination of symmetries of the square that you might try? What result would you expect? Why?

Tips: If you can't see the canvas and the code window side-by-side, se "Control -" or "Command -". Use +/- in the code window to resize code blocks.

Your browser does not support the HTML5 canvas tag.

Symmetries Rotation 0 Rotation 90 Rotation 180 Rotation 270 Flip 0 Flip 90 Flip 180 Flip 270
Start 0 0 0 0 0 0 0 0
Current 0 0 0 0 0 0 0 0