Custom Hex Tiling - OpenProcessing

mySketch.js
xxxxxxxxxx
 
let r, s;
let hexagons;
​
const palette = [
["#F96167","#FCE77D"],
["#F9D342","#292826"],
["#DF678C","#3D155F"],
["#CCF381","#4831D4"],
["#4A274F","#F0A07C"],
["#2B3252","#EF5455"],
["#2B3252","#FAD744"],
["#FFF748","#3C1A5B"],
["#2F3C7E","#FBEAEB"],
["#EC4D37","#1D1B1B"],
["#8BD8BD","#243665"],
["#141A46","#EC8B5E"],
["#FFFFFF","#8AAAE5"],
["#295F2D","#FFE67C"],
["#F4A950","#161B21"],
["#ED2188","#080A52"],
["#4A171E","#E2AD44"],
["#D2302C","#F7F7F9"],
["#358597","#F4A896"],
["#E7D045","#A04EF6"],
["#262223","#DDC6B6"],
["#F4EFEA","#7D141D"],
["#AA96DA","#FFFFD2"],
["#F7F7F7","#006838"],
["#234E70","#FBF8BE"],
["#FFE8F5","#8000FF"],
["#191919","#FDF5A6"],
["#CC313D","#F7C5CC"],
["#E2D3F4","#013DC4"],
["#533549","#F6B042"],
["#F9ED4E","#533549"],
["#99F443","#EC449B"],
["#050505","#E6E7E8"],
["#EE4E34","#FCEDDA"],
["#072C50","#B88746"],
["#FDF5A6","#072C50"],
["#96351E","#DBB98F"],
["#53A57D","#FBF7F4"],
["#CFCAA8","#635E87"],
["#E3B448","#3A6B35"],
["#CBD18F","#3A6B35"],
["#FCE77D","#F96167"],
["#292826","#F9D342"],
["#3D155F","#DF678C"],
["#4831D4","#CCF381"],
["#F0A07C","#4A274F"],
["#EF5455","#2B3252"],
["#FAD744","#2B3252"],
["#3C1A5B","#FFF748"],
["#FBEAEB","#2F3C7E"],
["#1D1B1B","#EC4D37"],
["#243665","#8BD8BD"],
["#EC8B5E","#141A46"],
["#8AAAE5","#FFFFFF"],
["#FFE67C","#295F2D"],
["#161B21","#F4A950"],
["#080A52","#ED2188"],
["#E2A144","#4A171E"],
["#F7F7F9","#D2302C"],
["#F4A896","#358597"],
["#A04EF6","#E7D045"],
["#DDC6B6","#262223"],
["#7D141D","#F4EFEA"],
["#FFFFD2","#AA96DA"],
["#006838","#F7F7F7"],
["#FBF8BE","#234E70"],
["#8000FF","#FFE8F5"],
["#FDF5A6","#191919"],
["#F7C5CC","#CC313D"],
["#013DC4","#E2D3F4"],
["#F6B042","#533549"],
["#533549","#F9ED4E"],
["#EC449B","#99F443"],
["#E6E7E8","#050505"],
["#FCEDDA","#EE4E34"],
["#B88746","#072C50"],
["#072C50","#FDF5A6"],
["#DBB98F","#96351E"],
["#FBF7F4","#53A57D"],
["#635E87","#CFCAA8"],
["#3A6B35","#E3B448"],
["#3A6B35","#CBD18F"],
];
​
function hashString(str) {
//set variable hash as 0
var hash = 0;
// if the length of the string is 0, return 0
if (str.length == 0) return hash;
for (i = 0 ;i<str.length ; i++)
{
ch = str.charCodeAt(i);
hash = ((hash << 5) - hash) + ch;
hash = hash & hash;
}
return abs(hash);
}
​
function nextSeed(seed) {
  return (27644437*seed + 7907)%7919;
}
​
​
function setup() {
  createCanvas(1280, 720);
  background(25,40,25);
  stroke(225,200,200);
  fill(255);
  textSize(32);
  textWrap(CHAR);
  textAlign(CENTER,CENTER);
  text('Enter some text',300,225);
  textAlign(LEFT,TOP);
  input = createInput();
  input.position(95,250);
  input.size(400,25);
  input.style('font-size', '20px');
  input.changed(drawHex);
  button = createButton("GO");
  button.size(56,50)
  button.style('font-size', '26px');
  button.position(272,300);
  button.mousePressed(drawHex);  
}
​
function drawHex() {  
  clear();
  createCanvas(1280,720);
  button.remove();
  input.remove();
  angleMode(DEGREES);
  centerX = width / 2;
  centerY = height / 2;
  r = 15; //center to vertex of a hexagon (or radius of circumcircle)
  s = (r * sqrt(3)) / 2; //center to mid-point of size of hexagon (pr radius of incircle)
  seed = input.value();
  seed = hashString(seed);
  background(palette[seed%82][0]);
  stroke(palette[seed%82][1]);
  hextype = [];
  count = 0;
  for (let y = 0; y < height + s; y += 2 * s) {
    for (let x = 0; x < width + r; x += 3 * r) {
      hextype[count] = [typeH, typeI, typeG][seed%3];
      count++;
      seed = nextSeed(seed);
      hextype[count] = [typeH, typeI, typeG][seed%3];
      count++;
      seed = nextSeed(seed);
    }
  }
  noFill();
  count = 0;
  for (let y = 0; y < height + s; y += 2 * s) {
    for (let x = 0; x < width + r; x += 3 * r) {
      switch (hextype[count]) {
        case typeG:
          hextype[count] = typeH;
          break;
        case typeH:
          hextype[count] = typeI;
          break;
        case typeI:
          hextype[count] = typeG;
          break;
      }
      angle = random([0, 60, 120, 180, 240, 300]);
      //angle = 0;
      hextyp = hextype[count];
      hexagon(x, y, r, hextyp, angle);
​
      count++;
      switch (hextype[count]) {
        case typeG:
          hextype[count] = typeH;
          break;
        case typeH:
          hextype[count] = typeI;
          break;
        case typeI:
          hextype[count] = typeG;
          break;
      }
      hextyp = hextype[count];
      hexagon(x + 1.5 * r, y + s, r, hextyp, angle);
      count++;
    }
  }
}
​
function hexagon(x, y, r, hextypeFn, angle) {
  strokeWeight(0.5);
  beginShape();
  for (let a = 0; a < 360; a += 60) {
    let x2 = cos(a) * r;
    let y2 = sin(a) * r;
    vertex(x + x2, y + y2);
  }
  endShape(CLOSE);
  strokeWeight(3);
  hextypeFn(x, y, r, angle);
}
​
function typeA(x, y, r, angle) {
  push();
  noFill();
  for (var a = angle; a < angle + 360; a += 60) {
    var x2 = cos(a) * r;
    var y2 = sin(a) * r;
    var startAngle = -1;
    switch (a % 360) {
      case 0:
        startAngle = 120;
        break;
      case 120:
        startAngle = 240;
        break;
      case 240:
        startAngle = 0;
    }
    if (startAngle >= 0) {
      arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 120);
    }
  }
  pop();
}
​
function typeB(x, y, r, angle) {
  push();
  noFill();
  for (var a = angle; a < angle + 360; a += 60) {
    var x2 = cos(a) * r;
    var y2 = sin(a) * r;
    var startAngle = -1;
    switch (a % 360) {
      case 60:
        startAngle = 180;
        break;
      case 180:
        startAngle = 300;
        break;
      case 300:
        startAngle = 60;
        break;
    }
    if (startAngle >= 0) {
      arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 120);
    }
  }
  pop();
}
function typeC(x, y, r, angle) {
  push();
  noFill();
  for (var a = angle; a < angle + 360; a += 60) {
    var x2 = ((cos(a) + cos(a + 60)) / 2) * r;
    var y2 = ((sin(a) + sin(a + 60)) / 2) * r;
    var startAngle = -1;
    switch (a % 360) {
      case 0:
        startAngle = 120;
        break;
      case 120:
        startAngle = 240;
        break;
      case 240:
        startAngle = 0;
    }
    if (startAngle >= 0) {
      arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 180);
    }
  }
  pop();
}
function typeD(x, y, r, angle) {
  push();
  noFill();
  for (var a = angle; a < angle + 360; a += 60) {
    var x2 = ((cos(a) + cos(a + 60)) / 2) * r;
    var y2 = ((sin(a) + sin(a + 60)) / 2) * r;
    var startAngle = -1;
    switch (a % 360) {
      case 60:
        startAngle = 180;
        break;
      case 180:
        startAngle = 300;
        break;
      case 300:
        startAngle = 60;
        break;
    }
    if (startAngle >= 0) {
      arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 180);
    }
  }
  pop();
}
​
function typeE(x, y, r, angle) {
  push();
  noFill();
  for (var a = angle; a < angle + 360; a += 60) {
    var x2 = ((cos(a) + cos(a + 60)) / 2) * r;
    var y2 = ((sin(a) + sin(a + 60)) / 2) * r;
    var startAngle = -1;
    switch (a % 360) {
      case 0:
        startAngle = 120;
        break;
      case 120:
        startAngle = 240;
        break;
      case 240:
        startAngle = 0;
        break;
      case 60:
        startAngle = 180;
        break;
      case 180:
        startAngle = 300;
        break;
      case 300:
        startAngle = 60;
        break;
    }
    if (startAngle >= 0) {
      arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 180);
    }
  }
  pop();
}
​
function typeF(x, y, r, angle) {
  push();
  noFill();
  for (var a = angle; a < angle + 360; a += 60) {
    var x2 = cos(a) * r;
    var y2 = sin(a) * r;
    var startAngle = -1;
    switch (a % 360) {
      case 0:
        startAngle = 120;
        break;
      case 120:
        startAngle = 240;
        break;
      case 240:
        startAngle = 0;
        break;
      case 60:
        startAngle = 180;
        break;
      case 180:
        startAngle = 300;
        break;
      case 300:
        startAngle = 60;
        break;
    }
    if (startAngle >= 0) {
      arc(x + x2, y + y2, r / 2, r / 2, startAngle, startAngle + 120);
    }
  }
  pop();
}
​
function typeG(x, y, r, angle) {
  push();
  noFill();
  for (var a = angle; a < angle + 360; a += 60) {
    var x2 = cos(a) * r;
    var y2 = sin(a) * r;
    var startAngle = -1;
    switch (a % 360) {
      case 0:
        startAngle = 120;
        break;
      case 180:
        startAngle = 300;
        break;
    }
    if (startAngle >= 0) {
      arc(x + x2, y + y2, r, r, startAngle, startAngle + 120);
    }
  }
  line(x, y + (r * sqrt(3)) / 2, x, y - (r * sqrt(3)) / 2);
  pop();
}
​
function typeH(x, y, r, angle) {
  push();
  noFill();
  for (var a = angle; a < angle + 360; a += 60) {
    var x2 = cos(a) * r;
    var y2 = sin(a) * r;
    var startAngle = -1;
    switch (a % 360) {
      case 60:
        startAngle = 180;
        break;
      case 240:
        startAngle = 0;
        break;
    }
    if (startAngle >= 0) {
      arc(x + x2, y + y2, r, r, startAngle, startAngle + 120);
    }
  }
  line(
    x + (((r * sqrt(3)) / 2) * sqrt(3)) / 2,
    y - ((r / 2) * sqrt(3)) / 2,
    x - (((r * sqrt(3)) / 2) * sqrt(3)) / 2,
    y + ((r / 2) * sqrt(3)) / 2
  );
  pop();
}
​
function typeI(x, y, r, angle) {
  push();
  noFill();
  for (var a = angle; a < angle + 360; a += 60) {
    var x2 = cos(a) * r;
    var y2 = sin(a) * r;
    var startAngle = -1;
    switch (a % 360) {
      case 120:
        startAngle = 240;
        break;
      case 300:
        startAngle = 60;
        break;
    }
    if (startAngle >= 0) {
      arc(x + x2, y + y2, r, r, startAngle, startAngle + 120);
    }
  }
  line(
    x + (((r * sqrt(3)) / 2) * sqrt(3)) / 2,
    y + ((r / 2) * sqrt(3)) / 2,
    x - (((r * sqrt(3)) / 2) * sqrt(3)) / 2,
    y - ((r / 2) * sqrt(3)) / 2
  );
  pop();
}
​