In the book Symmetries of Culture: Theories and Practice of Plane Pattern Analysis, Washburn and Crowe analyze and breakdown the steps used to create patterns found in mosaic tiles, textiles, pottery, etc., from the Egyptians, Mayans, Islamic, Chinese, American Indians, etc., into a classified system, where each variation is based on a specific set of rules. When applying the different sets of rules to a design, if a pattern emerges in a plane, this is considered a plane symmetry group. Ignoring color for a moment, there are 17 different 2-D symmetry groups based on their classification system.
In this case, the process and code associated with designing the graphics in Illustrator and using them in the web-based application I am developing* was refined from a previous experiment, paintingEngine and further abstracted in order to be more multi-purposed. E.g., I can now import any SVG graphic (that follows a few structured rules) via a GUI or drag-n-drop the file onto the canvas.
*Special thanks to the incredible Jay Moretti for gluing the different JS libraries together in a beautiful custom stack.
Once the SVG file finishes loading, a pattern is generated using the graphic(s) within the SVG file as the source. Further customization options are available via the GUI, which are described below.
Displayed above are several of the many menus and controls that I have added to the application.
The Symmetry menu allows me to select different predefined SVG files as well as the type of symmetry I would like to use. For the former, SVG files can also be dragged-n-dropped onto the Canvas and a prompt allows me to define how I want to use the file.
The General menu refers to global design features that can be tweaked, e.g., tileSpacing allows me to adjust the spacing between each tile/graphic element. In this case if I added 5 pixels, I would have a 5 pixel space between each of the hexagons.
As you will see in one of the later images, I can (re)define the stroke type and its characteristics to create on-the-fly until I dial in a look that I’m happy with, without having to go back into Illustrator or whatever software I might have used to create the original SVG item(s).
As I mentioned before, there are times where I’m not limited by the number of colors in the output, as defined typically by the medium I’m working in. Web sites are a perfect example of where I can have as many colors as I want and in those situations, I can break the color rules that Washburn and Crowe explicitly defined in their great book Symmetries of Culture.
When using my application, I can either import via the File menu and/or drag-n-drop a PNG or JPG file onto the canvas and a prompt asks me how I would like to use the image. The image above comes from one of the Color Visualization sets that I created for Moo.com using color analytics and visualization software I wrote.