Hexagonal Truchet Tiles

hexagonal-truchet-tiles.markdown

Hexagonal Truchet Tiles

A Pen by Ben Matthews on CodePen.

License.

index.html

<div id="controls"></div>

script.js

let hMod = Math.sqrt(3)/2;
let gw, gh;
let cellSize = 100;

let verts = [
  [ 1, 0], [ .5, -hMod], [-.5,-hMod],
  [-1, 0], [-.5,  hMod], [ .5, hMod],
]

let types = [
  [[0,1], [2,3], [4,5]],
  [[0,2], [1,3], [4,5]],
  [[0,2], [1,4], [3,5]],
  [[0,3], [1,2], [4,5]],
  [[0,3], [1,4], [2,5]],
]
let hexGrid = [];
let hexs    = [];

class HexCell{
  constructor(x, y, size){
    this.x = x;
    this.y = y;
    this.size = size;
    this.type = random(types);
    this.rOffset = floor(random(6))*TAU/6;
  }
  update(){
    if (random() < .1){
      this.rOffset = floor(random(6))*TAU/6;
    }
  }
  render(){
    pushPop(()=>{
      noFill();
      stroke(.25, 1, 1);
      hex(this.x, this.y, this.size/hMod);
      translate(this.x, this.y);
      rotate(this.rOffset);
      scale(this.size*1.01);
      stroke(1);
      strokeWeight(10/this.size);
      for (let pair of this.type){
        stroke(.15, 1, .5);
        strokeWeight(24/this.size);
        renderPair(pair);
        
        for (let i = 0; i < 10; i++){
          stroke(i/10);
          strokeWeight((20-i*2)/this.size);
          renderPair(pair);
        }
      }
    })
  }
}

function setup (){
  pixelDensity(1);
  createCanvas();
  colorMode(HSB, 1, 1, 1);
  strokeCap(SQUARE);
  windowResized();
}

function init(){
  hexGrid = [];
  hexs    = [];
  for (let i = 0; i < gw; i++){
    hexGrid[i] = [];
    for (let j = 0; j < gh; j++){
      let x = (i+(j%2)/2)*cellSize;
      let y = j*cellSize*hMod;
      let hex = new HexCell(x, y, cellSize*.5)
      hexGrid[i][j] = hex;
      hexs.push(hex);
    }
  }
}

let renderPair = (pair) => {
  let t = (pair[1] - pair[0])
  let p1 = createVector(...(verts[pair[0]]));
  let p2 = createVector(...(verts[pair[1]]));
  if (t == 1){
    let center = p1.copy().rotate(-PI/6).mult(1/hMod);
    let a = createVector(1, 0).angleBetween(p1) + PI/2;
    arc(center.x, center.y, 1/hMod, 1/hMod, a, a+PI*2/3)
  }
  if (t == 2){
    let center = p1.copy().rotate(-PI/3).mult(2);
    let a = createVector(1, 0).angleBetween(p1) + PI/2;
    arc(center.x, center.y, 3/hMod, 3/hMod, a, a+PI/3)
  }
  if (t == 3){
    line(p1.x, p1.y, p2.x, p2.y);
  }  
}

let hex = (x, y, size, stroke=1) => {
  pushPop(() => {
    translate(x, y);
    rotate(PI/6)
    scale(size);
    strokeWeight(stroke/size);
    beginShape();
    for (let v of verts) vertex(v[0], v[1]);
    endShape(CLOSE);
  })
}

function draw(){
  background(0);
  noStroke();
  for (let h of hexs){
    h.update();
    h.render();
  }
}

function windowResized(){
  resizeCanvas(windowWidth, windowHeight);
  gw = floor(width/cellSize)+1;
  gh = floor((height/hMod)/cellSize)+2;
  init();
}

let pushPop = (f) => {push();f();pop();}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>

style.css

* { margin:0; padding:0; } 
html, body { width:100%; height:100%; overflow: hidden; background:black;} 
canvas { display:block; }
#controls {
  z-index: 2;
  margin: 20px;
  position: absolute;
  top: 0; left: 0;
  color: white;
}