Tessellations

The word 'tessera' in latin means a small stone cube. They were used to make up 'tessellata' - the mosaic pictures forming floors and tilings in Roman buildings

Here, the term has become more specialized and is used to refer to pictures or tiles which cover the surface of a plane in a symmetrical way without overlapping or leaving gaps.

History

The tilings in the Alhambra in Spain were laid out by the Moors in the 14th century. They are made of colored tiles forming patterns, many truly symmetrical. They are not tessellations but they did inspire the young M.C Escher, who copied them into his notebooks and later converted some into true tessellations.

Escher noted that the tilings never included animals or plants.

When lecturing later in life, Escher used to ask the audience if they knew of any tessellations done by other artists in the past. He was sent details of a tapestry design by Koloman Moser entitled Forellenreigen, or trout farm, depicting a fish tessellation completed in 1899 - a year after Escher was born

Escher is the 'Father' of modern tessellations. During his life, he became obsessed with filling the plane with pictures that did not overlap or leave spaces.

Filling the plane has become a real mania to which I have become addicted and from which I sometimes find it hard to tear myself away.

In 1922 he traveled to Spain where he copied many of the tiling patterns of Alhambra.

In 1925 he produced what was really his first tessellation. It was a block print of 'lions' in which the subject interlocked and covered the plane. He block printed it on silk in gold and silver. He was disappointed that people were not impressed.

His last tessellation was a solution to a puzzle sent to him by Roger Penrose, the mathematician. Escher solved it and, true to form, changed the angular wood blocks into rounded 'ghosts'.

Symmetry

There are 4 ways of moving a motif to another position in the pattern. These were described by Escher, and Doris Schattschneider has drawn a diagram, using his creatures, to explain it.

Assignment

Open Flash by clicking on the Flash Icon on the dock:
Create a new document. Make sure it is Actionscript 2
Save (+SHIFT+S) document in work folder Save as embedded_clips:
Turn on the grid (View>Grid>Show Grid)
Open components window:
Window>Development Panels>Components.

Then click on the arrow to open the list if it is closed.
Drag the combo box from the window to the upper right hand corner of the stage
Name it scaleCombo in the property inspector window.
Drag another Combo box component underneath the scaleCombo. Name it colors
Insert a new symbol. Make it a movie clip and name it tile. Export it for ActionScript:
Select the Rectangle tool. Choose gray for the fill and no stroke:
Hold SHIFT and from the crosshair drag a square
With the lasso tool, starting at a corner, outline a nibble from the top
While the nibble is still selected
, hold SHIFT and move it to the bottom
Take a nibble from the right (start at a corner)
Move it to the left:
Use the Property Inspector, to reposition the tile at 0,0
Select the tile and convert to a movie clip. In the Property Inspector name it col
Go to Scene 1
Drag your tile from the library. Use the Property Inspector to put it at 0,0
Make a duplicate of the tile (OPTION+click and drag) and move it to the right. Use the Property Inspector to position it as close to perfect as possible
Make a duplicate of the tile and move it down. Use the Property Inspector to position it as close to perfect as possible
Insert a new layer and name it ACTIONS
Open the Actionscript panel

Paste the following and complete:

//this clears the combo box
colors.removeAll();

//this sets the combo box to the elements in the list
colorList = new Array("red", "green", "blue", "mix");

//this loops over the color list and adds the items to the combo box
for (i=0; i<colorList.length; i++) {
    colors.addItem(colorList[i]);
}

//this loops from 10 to 100 in steps of ten 
//and adds those values to the scale combo
    for (i=10; i<=100; i+=10) {
    scaleCombo.addItem(i);
}        

//this sets the initial scale to 10
scale=10;

//this creates a listener for the scale combo
selectScale=new Object();
selectScale.change=function(eventObj){
 
 //when the user changes the combo box, the scale is updated
    scale=eventObj.target.value;
}

//this attaches the listener to the combo box
scaleCombo.addEventListener("change",selectScale);

//this creates a listener for the color combo
selectColor = new Object();
selectColor.change = function(eventObj) {
 //when the user changes the combo box, the tessellate method 
 //is called and a color (or number 0-3) is passed to it

    tessellate(eventObj.target.selectedIndex);
};
//this attaches the listener to the combo box
colors.addEventListener("change", selectColor);


//this defines the getColor() function
function getColor(whichColor) {
    
    switch(whichColor+1){
        case 1:
         //case 1 is red
         //sets red to a random number between 0 and 255
        red = Math.floor(Math.random()*256);
        
        //sets green to 0
        green=0;
        
        //sets blue to 0
        blue=0;
        
        //gets you out of the switch structure
        break;
        
        case 2:
        //case 2 is green
        //set green to a random number between 0 and 255
        green = _____________________________
        red=0;
        blue=0;
        break;
        
        case 3:
        //case 3 is blue
        set blue to a random number between 0 and 255
        blue = Math.floor(Math.random()*256);
        green=_____;
        red=_____;
        break;
        
        default:
        //default is a random mix of red, green and blue
         red = Math.floor(Math.random()*256);
        green=Math.floor(Math.random()*256);
        blue=Math.floor(Math.random()*256);
        
    }
    
    /*  bitwise shift
        To get a random color you will use the << operator with the | to get a random 
        number*/
    //create a variable named randomColor and set it to (red shifted left 16) 
    //bitwise OR green shifted left 8 bitwise OR blue 
    __________ = red << 16 | green << 8 | _____;
    
}
//this defines the tessellate function
function tessellate(whichColor) {
//if there is a tessellation already, this removes it
    if(canvas){
        removeMovieClip(canvas);
    }
    
    //a new movie clip that will hold the tessellation is created
    _root.createEmptyMovieClip("canvas",1);
    
    //this keeps the combo boxes on top
    _root.colors.swapDepths(_root.getNextHighestDepth());
    _root.scaleCombo.swapDepths(_root.getNextHighestDepth());
    
    
    /*this is the _x property of the tile to the right of the original.
    Multiplied by 100 then divided by the width of the tile*/
    ratioW = (______*100)/____;
    
    /*this is the _y property of the tile below the original. 
    Multiplied by 100 then divided by the height of the tile*/
    ratioH = (______*100)/_____;
    
    //how many rows do you want?
    for (r=0; r<=___; r++) {
    //how many columns do you want?
        for (c=0; c<=___; c++) {
            mc = canvas.attachMovie("tile", "tile"+r+"_"+c, canvas.getNextHighestDepth());
            mc._xscale = scale;
            mc._yscale = _____;
            mc._x = (c*(mc._width*ratioW)/100)-mc._width;
            mc._y = (r*(mc._height*ratioH)/100)-mc._height;
            getColor(whichColor);
            
            //change the color of the col movie clip of the tile (mc)
            nc = new Color(mc.____);
            nc.setRGB(randomColor);
            mc.onRelease = function() {
				getColor(3)
				nc = new Color(this.col);
				nc.setRGB(randomColor);
			};
        }
    }
    
}

Delete the tiles on the stage

More on Tessellations

All tessellations are based on a tile that will tessellate. This is the fundamental, or primary, cell.

Parallelograms will all tessellate.

All you need to do is to repeat them and you get the full tessellation. By joining similar points in a tessellation, it is usually possible to work out the fundamental cell.

So what shapes will tessellate? Only 3 regular geometric shapes will. Regular, means that all sides and internal angles are equal. The regular geometric shapes that tesselate are the equilateral triangle, square and hexagon. The 'F's show that the shapes can be flipped and rotated without affecting the ability to tessellate. This can make whole pictures more varied and interesting.

Other geometric shapes that will tessellate are the rectangle, parallelogram, and diamond (or rhomboid). Note that the parallelogram and diamond can be squashed or thick, it makes no difference to their ability to tessellate. The parallelogram could have alternate rows tipped the other way.

Regular pentagons will not tessellate, but there are 14 known 5 sided shapes that will. Any 4 sided shape will tessellate if put back to back with a copy of itself - it forms a hexagon with opposite sides equal:

But how do you make picture tessellation?

Open Flash and create a new document
Go to View menu and select Grid>Show Grid. You want the grid to act as a guide.
Insert a new symbol. Make it a movie clip and name it tile. Export it for ActionScript:
Using the line tool, draw the following shape. pay attention to the grid
Insert a new layer. Pick a brush color and size
Draw your first line
Make a duplicate by OPTION Dragging on the first line
Modify the duplicate by going to the Modify menu. Select Transform and Flip Vertical. Use the Selection tool to reposition
Insert a new layer
Draw the third line.
Make a duplicate and flip it vertically.
Drag the template layer into the trash
Select All the lines by pressing +A. Copy (+C). Insert a new layer. Paste in place (+SHIFT+V). Delete the other layers.
Select the shape and in the Properties Window set the x and y location to 0,0
Fill the shape with some color
Select the fill and convert it into a movie clip (F8). In the Properties Window name the instance col
Add layers on top for details (these layers will not change color)
Go to Scene 1
Drag your tile from the library. Use the Property Inspector to put it at 0,0
Make a duplicate of the tileand move it to the right. Modify>Transform>Flip Vertical. Use the Property Inspector to position it as close to perfect as possible
Make a duplicate of the duplicate of the first tile and move it to the right. Use the Property Inspector to position it as close to perfect as possible
Make a duplicate of the duplicate of the tile and move it underneath the first tile in the first row. Use the Property Inspector to position it as close to perfect as possible
Insert a new layer and name it ACTIONS
Open the Actionscript panel

Paste the following and complete:

//how many columns do you want?
columns = ___;

//how many rows do you want?
rows = ___;

//set hDist to the _x of the second tile in row 1 (tile 2)
hDist = _____;

//set h to the _y of the first tile of the second row (tile 4)
h = ______;

//set vDist to _y of the second tile in the first row (tile 2)
vDist = _____;

//get the center of the Stage
centerX = Stage.width/2;
centerY = Stage.height/2;


//create a canvas
canvas = _root.createEmptyMovieClip("canvas", _root.getNextHighestDepth());

//loop rows
for (r=0; r<____; r++) {

    //loop columns
	for (c=0; c<___________; c++) {
	
	    //attach your tile from the lbrary
		mc = canvas.attachMovie("_______", "tile"+r+"_"+c, canvas.getNextHighestDepth());

		mc._x = (c-columns/2)*hDist+centerX;
		mc._y = ((r-rows/2)*h)+centerY;
		
		if (c%2 != 0) {
		
		    mc.colorTile=new Color(mc.col);
		    //set the color using hex format 0xFFFFFF
			mc.colorTile.setRGB(__________);
			
			//here's the glide
			mc._y += vDist;
			mc._rotation = 180;
			mc._xscale *= -1;

		}
		//scale your canvas if you think your shapes are too large
		canvas._xscale = ___;
		canvas._yscale = ___;

	}
}

Delete the tiles on the stage