I’ve been studying the regular patterns lately.

while in NYC with the flashmöb for the Geeky by nature festival, we went to that bookshop called the “strand bookstore”, a big one with lots of things inside. I found (and treated myself with) 2 outstanding books: the map as art and handbook of regular patterns.
the first collects a variety of pieces of art related to maps and cartography, very impressive and carefully handpicked works, great insights.

The second gives indepth explanations on how to create regular patterns and provides a huge amount of examples from all cultures( I mean ALL cultures ), all times and all fields of activities.

it’s impressive how we, humans, have always been fascinated by order, repetition and symmetry. regular patterns exist in nature of course, probably because they offer some advantages over absolute chaos: physical resistance and optimal space filling for example.

while reading I realized that natural patterns can’t be called patterns unless we identify them as such and label them “patterns” which involves finding the ruleset, the fundamental region, the unit cell and mentally doing the maths to produce the whole pattern. so the regular patterns is typically a human activity.

there is a couple of quotes in the book that I liked very much, I’ll inflict them on you:

Aesthetic feelings arise primarily because of an unusual degree of harmonious interrelation within the object.
George David Birkhoff *

One can hardly overestimate the depth of geometric imagination and inventiveness reflected in these patterns. Their construction is far from being mathematically trivial. The art of ornament contains in implicit form the oldest piece of higher mathematics known to us.
Herman Weyl *

and indeed, the biggest surprise was the apparent simplicity of the building rules ; there are only 4 basic transformations we’ll have to deal with:

• translation: moving an object on its XY axis in a given direction
• rotation: rotating an object around an arbitrary point
• reflection: mirroring an object about an axis (axis=2 points)
• glide reflection: a reflection followed by a translation

in code you’d write it like:

/**
 * translation: performs a translation on a given point set
 * @param	x amount of displacement on the X axis
 * @param	y amount of displacement on the Y axis
 */
public function translate( x:Number = 0, y:Number = 0 ):void
{
	
	for each( var p:Point in points )
	{
		p.x += x;
		p.y += y;
	}
	
}
/**
 * rotation: performs a rotation around a given point (or lattice)
 * @param	lattice the point around which we'll rotate
 * @param	angle the angle of rotation in radians
 */
public function rotate( lattice:Point, angle:Number ):void
{
	
	var a:Number, d:Number, p:Point;
	
	for each( p in points )
	{
		a = GeomUtils.angle( lattice, p ) + angle;
		d = GeomUtils.distance( lattice, p );
		p.x = lattice.x + Math.cos( a ) * d;
		p.y = lattice.y + Math.sin( a ) * d;
	}
	
}
/**
 * reflection: a reflection about the axis
 * @param	axis the axis of reflection
 */
public function reflect( axis:Axis ):void
{
	
	var p:Point, pp:Point, a:Number, d:Number;
	
	for each( p in points )
	{
		pp = GeomUtils.project( p, axis.p0, axis.p1 );
		p.x += ( pp.x - p.x ) * 2;
		p.y += ( pp.y - p.y ) * 2;
	}
	
}
/**
 * glide reflection: a reflection followed by a translation
 * @param	axis the axis of reflection
 * @param	distance the amount of translation.
 * the translation will be performed in the direction of the axis.
 */
public function glide( axis:Axis, distance:Number = 0 ):void
{
	
	reflect( axis );
	
	var a:Number = GeomUtils.angle( axis.p0, axis.p1 );
	
	translate( Math.cos( a ) * distance, Math.sin( a ) * distance );
	
}

and with that 4 methods, one can produce all the regular patterns which is pretty freaking awesome if you ask me.

notice that I’m massively using a class called GeomUtils. it’s because I’m a lazy bastard, you’ll find it here: biga. notice also that I use a Vector. < Point > called points ; as the plane groups use something called a unit cell, it was more handy to have an arbitrary set of points rather than a given shape (tri or rect). There are much faster ways to perform a reflection but as mentionned above, I’m a lazy bastard. so import GeomUtils, along with the Point, create an Axis class to hold 2 Points p0 and p1 and that’s about all there is to do!

just kidding, there’s a lot more to do but for now here’s a demo of the above transformations: you can draw a bunch of points and drag the handles to see what the different operations do.

open in new Window

there are 3 groups of regular patterns. they are called after the number and the type of operations that are performed on the fundamental region:
the 1,2,3,4,6 is the number of operations and very often the number of rotations, t stands for Translation, m for Mirror or Reflection, g for Glide, p would be the prefix for the Plane group, and sometimes you get a c, nevermind, it doesn’t bite ( it’s a staggered version of m, used only in the plane group ).

the 10+ point groups

their little names are : 1, m, 2, 2mm, 3, 3m, 4, 4mm, 6 and 6mm they use the above operations around a lattice. they’re the easiest to understand and reproduce as they only have a single point of symmetry.
the highest order of the point groups is infinite ; this means that you can create a group 148mm or 941m or whatever number of rotations and mirrors.
odd numbers create a pattern with one axis of symmetry (think of a triangle) while even numbers can have 2 (think of a square). very useful to make kaleidoscopes, logos, snowflakes, crystals

the 7 line groups

t, tg, tm, mt, t2, t2mg and t2mm they produce friezes, repetitive linear patterns. there are only 7 ways to tile a stripe, you can’t invent a new one. the line groups can be very useful to create a repetitive background, pavements, friezes, borders.

here’s a demo to explore both the point and line groups:
draw something in the top right window and select the type of transform you want. you can drag the center of the point group. you can also save the base pattern or the composition. there’s a checkbox to use a coma pattern instead of the drawing, it helps understand how the patterns work.

open in new Window

so already we can reach an incredible amount of complexity with very few strokes. that’s what I like very much about patterns, there’s something magic in watching the pattern evolve. it is also very elegant.

explaining a bit more of the concepts might come in handy at this point.
each pattern has a fundamental region ; this is the smallest piece that can repeat to make the pattern.
for the point groups, any shape works as a fundamental region ; there is no tiling issue as there is no tiling.
for line groups, the fundamental region doesn’t need to be a square or a quadrilateral but depending on the group, it has to match different sets of rules. the easiest way to get it to work all the time is to use a rectangle.
in the example, I use a set of 4 points, perform the transformations and draw 2 triangles for each rectangle.

unfortunately, the plane groups need more than a fundamental region: they need a unit cell.
the unit cell uses a fundamental region and applies a given set of transformations to it. you might wonder why this is not the same as a fundamental region.
the fundamental region can be repeated by translation, rotation, reflection and glide reflection while the unit cell can only be repeated by translation. so it is used to create a complex pattern that will be used to tile the plane.
this cell itself has to match different rules especially in the P2, P3 and P6 cases that require a rhombic instead of a quadrilateral.

knowing this, we can move forward to the 17 plane groups:
p1, p2, pm, pg, cm, p2mm, p2mg, p2gg, c2mm, p3, p3m1, p31m, p4, p4mm, p4gm, p6 and p6mm
plane groups extend the logic of the line groups. once we’ve built the unit cell, we translate it a given number of times.

here’s a demo with a coma to understand what happens. in the top left corner, I draw the unit cell and the fundamental region. notice that when a rhombic unit cell is used, you can’t specify the height of the fundamental region.

notice also that the rendering of P3 and P3M1 is awkward, it comes from the way I crop the fundamental region’s coordinate and draw them. fix later ( = never or if I have to )

finally here’s the same thing with some basic edition tool, the pattern is in the bottom right corner, you can drag the pattern window by the grey border. it’s pretty hard to draw on some pattern types because the region is not a square. I’d recommend you to keep the debug/crop selected when you change the width and height and uncheck it when you want to save the composition ; it gives indications on where you’re drawing.

you should view it in a bigger window
sorry also not to have put an “invert location” method to find where the mouse clicks and draw accordingly. it would be much more practical, again, fix later …

I warmly encourage you to read further about this topic, it’s fascinating. you’ll realize that we’re surrounded by patterns. more importantly, you’ll be able to recognize them and eventually reproduce them. for instance I found islamic patterns absolutely gorgeous, now I have a chance to understand how they work and produce some myself.
tilings are precious allies in design, they are lightweight and produce elegant shapes at any size.

ho and understanding how M.C. Escher did his amazing drawings was pretty rewarding too.
enough for now,
enjoy :)

Tags: generative art, geometry, groups, line, plane, point, regular patterns, tiling