​

// click on the picture to download the SVG file.

​

// play with these numbers:

tileSize = 20;

patterns_number = 10;

​

​

function setup() {

  _width = tileSize * patterns_number * 10/8 - 1;

  _height = _width;

​

  createCanvas(_width, _height, SVG); // Allows downloading SVG !

  background(0);

  stroke(255);

  noLoop();

}

​

​

function draw() {

  offset = tileSize*5/8;  // interlocking offset 

​

  for (x = -tileSize/2 - 1; x < width; x += tileSize * 10/8)

  {

    for (y = -tileSize/2 - 1; y < height; y += tileSize * 10/8)

    {

      drawShape(x,          y,          tileSize);

      drawShape(x + offset, y + offset, tileSize);

    }

  }

}

​

​

// Download SVG file 

function mouseClicked() {

  save("pattern.svg");

  // SVG download: need p5.svg.js in project + in index.html

  // see https://github.com/zenozeng/p5.js-svg

}

​

​

function drawShape(x, y, size) {

  let halfSize = size / 2;

  let quarterSize = size / 4;

​

  // center cross

  line(x + 0,                y + halfSize,  // horizontal

       x + size,             y + halfSize);

  line(x + halfSize,         y + 0,         // vertical

       x + halfSize,         y + size);

​

  // top left

  line(x + 0,                y + 0,

       x + halfSize,         y + 0);

  line(x + 0,                y + 0,

       x + 0,                y + quarterSize);

  line(x + 0,                y + quarterSize,

       x + quarterSize,      y + quarterSize);

​

  // top right

  line(x + size,             y + halfSize,

       x + size,             y + 0);

  line(x + size,             y + 0,

       x + 3*quarterSize,    y + 0);

  line(x + 3*quarterSize,    y + 0,

       x + 3*quarterSize,    y + quarterSize);

​

  // bottom left

  line(x + 0,                y + halfSize,

       x + 0,                y + size);

  line(x + 0,                y + size,

       x + quarterSize,      y + size)

  line(x + quarterSize,      y + size,

       x + quarterSize,      y + 3*quarterSize);

​

  // bottom right

  line(x + halfSize,         y + size,

       x + size,             y + size);

  line(x + size,             y + size,

       x + size,             y + 3*quarterSize);

  line(x + size,             y + 3*quarterSize,

       x + 3*quarterSize,    y + 3*quarterSize);

}

​