Tessellation & Tiling

The concept

A tessellation tiles the plane with no gaps or overlaps. Regular tilings use one polygon (triangle, square, hexagon). In creative coding, we generate hexagonal grids or Islamic patterns by combining translations and rotations. Moroccan zellige is a complex tessellation based on stars and rhombuses.

The code

// Hexagonal grid tessellation
let sz = 20;
function setup() { createCanvas(400, 280); noLoop(); }
function draw() {
  background(11,15,20);
  for (let row=0; row<height/sz+1; row++) {
    for (let col=0; col<width/sz+1; col++) {
      let x = col*sz*1.5, y = row*sz*1.73 + (col%2)*sz*0.866;
      stroke(55,227,195,100); noFill(); strokeWeight(1);
      beginShape();
      for (let a=0;a<6;a++) vertex(x+cos(a*PI/3)*sz*0.55, y+sin(a*PI/3)*sz*0.55);
      endShape(CLOSE);
    }
  }
}

Going further

Explore other free courses on the Learn page, or book a call to discuss your project.