SuperSym
What is this?
SuperSym is a toy for doodling with symmetry!
How do I do it?
However you want. Add some symmetries by clicking on "Edit sym.", choosing a symmetry type, then clicking on the canvas, then draw and see what happens! If you'd like to see a demo, click here
Are there any shortcut keys?
Sure are! Press "?" to see the list of shortcut keys.
I found a cool symmetry configuration! How do I save it for later?
Awesome. You can click "store symmetry as" to add it to the list of loadable presets, but that won't persist if you close or reload the page.
You an also click "export sym", copy the symmetry code, and save it on your computer in a text editor. Later, you can click "import sym" and paste the code back in to get your symmetry configuration back.
Can I get more color in this thing?
You can change the background and line color using the color tools in the toolbar.
Also, as you select line colors, the last 5 selected colors are stored. You can switch between them by clicking on the color history buttons, or by pressing the keys 1, 2, 3, 4, or 5. Control/alt-click to remove a stored color, and shift-click to use the color as the background instead of the line color.
How do I move symmetries around?
On non-touch devices, click "Edit sym." to enter symmetry-editing mode, then shift-click on one of the control points for the symmetry you want to move. You can then click somewhere else to re-place the symmetry. Sorry, changing symmetries isn't supported on touch devices yet - for you just clear the symmetries and start over.
How do I delete symmetries?
On non-touch devices, click "Edit sym." to enter symmetry-editing mode, then shift-click on the symmetry you want to delete, then press "escape". Sorry, this isn't supported on touch devices yet - just clear the whole thing for now.
What are the different types of symmetries?
The best way to find out is to try them, but if you'd like a primer:
- A point symmetry keeps your drawing the same when reflected through a point. That means, if you take every point in your drawing and flip it over the chosen point, it will stay the same
- A rotational symmetry makes your drawing stay the same when you rotate it. For example, a rotational symmetry of order 5 keeps your drawing the same when it is rotated one or more 1/5 turns (72 degrees).
- A line symmetry keeps your drawing the same when flipped over a line
- A translational symmetry keeps your drawing the same when moved by a particular amount in a particular direction. Ok, technically that would only be true if it translated it an infinite number of times. Instead, you can pick the "order" of the translation, which determins how many times your drawing is repeated.
- A scale symmetry keeps your drawing the same when scaled up or down with respect to a point. You can pick the "order" of the scale, which determins how many times your drawing is scaled.
- A spiral symmetry keeps your drawing the same when simultaneously scaling and rotating it. It's basically a combination scale/rotation symmetry.
- A glide symmetry keeps your drawing the same when simultaneously reflected across a line and translated. It's basically a combination line/translation symmetry.
- A circle symmetry, known as a "circle inversion", keeps your drawing the same when inverted over the circumference of a circle. It's kind of like a line symmetry wrapped into a circle, but instead of mapping one side of the plane to the other, it maps the outside of the circle to the inside of the circle.
Can I draw or place symmetries using a grid to keep things aligned?
Yep, you can snap to grid using the "Snap" checkbox, or hold down "x" while drawing or placing a symmetry to temporarily turn on snapping. You can also alter the grid spacing, and switch between rectangular and hexagonal grid using the other grid tools in the toolbar.
What does the "Symmetry iteration order" button do?
The symmetry iteration order determines, for the next symmetry you place, the order in which your drawing is "symmetrized".
For example, if you have a point symmetry with iteration order 1, and a line symmetry with iteration order 2, then the point symmetry is first applied to the drawing, then the line symmetry is applied to the results of that. If instead, you had a point symmetry and a line symmetry BOTH with iteration order 1, then both symmetries are applied simultaneously, rather than in sequence.
Symmetry orders can be any integer, and they do not have to be consecutive. Symmetries are executed from smallest to largest iteration order, with equal-iteration-order symmetries executed simultaneously. You can do some complicated stuff by messing with the iteration orders of your symmetries. At the moment, there is no visual indication of the symmetry iteration order after you place them, so for now you'll just have to remember.
By default, symmetry order automatically increments for each symmetry you place, but this can be turned off by unchecking the "Automatically increment" checkbox.
This thing starts to creak when I have 288 symmetries.
Yep, sorry, the code is severely un-optimized. Hopefully some day I or someone can go back and rewrite it to be a bit more efficient.
I have an idea/feedback!
I'd love to hear your feedback at @briankardon or e-mail
This thing is neat!
Really glad you're enjoying it! I'd love to hear what you think, and see what you've made with it, so feel free to get in touch (see above).
Please enjoy SuperSym for free, but if you feel like throwing me a buck to cover hosting costs, I appreciate it: