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.

 

My objective was to create a web-based HTML5/JS application that: 1) embraced the strengths of historic design by simply switch between the different groups of patterns; 2) adjust the design characteristics via a simple GUI; and 3) migrate towards modern approaches of color where the constraints of the past color rules and constraints no longer apply.

Living in New Mexico it's impossible to escape the importance of the Santa Fe Institute, which is dedicated to the multidisciplinary study of the fundamental principles of complex adaptive systems. As Wikipedia defines it, "complexity tends to be used to characterize something with many parts in intricate arrangement". So is true with the code I write – it's something I like to call Constructive Architecture – aka object-oriented programming however I like the sound of the former. :)

 

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. 

 

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.

I choose to use Google's dat-GUI for prototyping because its easy to add and wire in a variety of different GUI types to an application. There are definitely limitations in terms of how innovative you can get with the UI controls as well as skinning it, meaning that for a production ready experience, my preference would be to bake my own. But for experiments, it's a perfect fit.

 

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

 

Color Map
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.

If I choose ColorMap, the new image becomes the source of colors for the pattern of graphics that were previously generated, creating an image like the one below. 

One of the final touches I put on this experiment was converting the fillColor, which came from the ColorMap, to a Gradient with highlights and shadows. I added a light source tool that, when enabled, allows me to click anywhere on the canvas in order to update the location of the light and all of the highlights and shadows update themselves based on that their location in relation to the light source.