Fluid Lined Hexagon

fluid-lined-hexagon.markdown

Fluid Lined Hexagon

There are lines... which are fluid... and form a hexagon...

A Pen by Tim Aikens on CodePen.

License.

index.html

<canvas id="hex-canvas"></canvas>

script.js

/*
 * Inspired by:
 * https://www.d3lt4.com/post/83103187726/hexagonal-xi-60x80-cm
 * (I'm guessing that this is the original version.)
*/

var canvas = document.getElementById('hex-canvas'),
    ctx = canvas.getContext('2d'),
    afr,
    rto;

function drawHex() {

  var cw = canvas.width = window.innerWidth,
      ch = canvas.height = window.innerHeight;
  var sq = Math.min(cw, ch),
      hexX = Math.floor(sq - sq/10),
      hexY = hexX*Math.sin(Math.PI/3),
      hexS = hexX/2;

  var lineWidth = sq < 500 ? 2 : (sq < 1000 ? 3 : 4),
      dashMax = 400,
      dashMin = 100,
      gapMax = 80,
      gapMin = 30,
      osMax = 14,
      osMin = 8,
      dsMax = 3,
      colors = [
        "#F2675B",
        "#EBEAE8",
        "#518EAB",
        "#315084"
      ],
      lines = [];

  ctx.lineWidth = lineWidth;
  ctx.lineCap = 'round';
  ctx.translate(cw/2, ch/2);
  ctx.rotate((Math.PI / 180) * 210);
  ctx.translate(-cw/2, -ch/2);
  if (lineWidth % 2 === 0) {
    ctx.translate(0.5, 0.5);
  }

  function Line(x, y, w) {
    this.x = Math.floor(x);
    this.y = Math.ceil(y);
    this.w = Math.floor(w);
    this.color = colors[Math.floor(Math.random() * colors.length)];

    this.dash = [
      Math.floor(Math.random()*(dashMax-dashMin)) + dashMin,
      Math.floor(Math.random()*(gapMax-gapMin)) + gapMin
    ];
    var dashOff = Math.floor(Math.random()*(this.dash[0] + this.dash[1]))*10;
    this.sdo = Math.floor(Math.random()*dashOff)-dashOff*2;

    this.sdoMax = (this.dash[0] + this.dash[1])*10;
    this.sdoSpeed = Math.floor(Math.random()*(osMax-osMin))+osMin;
    this.dashSpeed = [
      (Math.floor(Math.random()*dsMax*2)-dsMax)/10,
      (Math.floor(Math.random()*dsMax*2)-dsMax)/10
    ];
  }
  
  Line.prototype = {
    drawLine: function() {
      var l = this;

      ctx.beginPath();
      ctx.strokeStyle = l.color;
      ctx.setLineDash(l.dash);
      ctx.lineDashOffset = l.sdo/10;
      ctx.moveTo(l.x, l.y);
      ctx.lineTo(l.x + l.w, l.y);
      ctx.stroke();
      l.adjustSpeeds();
    },
    adjustSpeeds: function() {
      var l = this;
      
      if (l.dash[0] <= dashMin || l.dash[0] >= dashMax) {
        l.dashSpeed[0] = -l.dashSpeed[0];
      }
      if (l.dash[1] <= gapMin || l.dash[1] >= gapMax) {
        l.dashSpeed[1] = -l.dashSpeed[1];
      }
      l.dash[0] += l.dashSpeed[0];
      l.dash[1] += l.dashSpeed[1];
      
      l.sdoMax = (l.dash[0] + l.dash[1])*10;
      l.sdo += l.sdoSpeed;
      if (l.sdo >= l.sdoMax) {
        l.sdo %= l.sdoMax;
      }
    }
  };
  
  function makeLines() {
    var numLines = Math.floor(hexY / (lineWidth*3)),
        h4 = hexS/2,
        lh = 3/2*lineWidth,
        bx = (cw - hexX)/2,
        by = (ch - hexY)/2,
        r2 = lh/(lh*numLines/2);

    for (var i=0;i<numLines;i++) {
      var dx = Math.abs(h4 - h4*i*r2),
          x = bx + dx,
          y = by + i*lineWidth*3;
      lines.push(new Line(x, y, hexX-2*dx));
    }
  }
  makeLines();
  
  function drawLines() {
    ctx.clearRect(0,0,cw,ch);
    for (var i=0,j=lines.length;i<j;i++) {
      lines[i].drawLine();
    }
    afr = requestAnimationFrame(drawLines);
  }
  drawLines();
}

drawHex();

window.addEventListener('resize', function(){
  cancelAnimationFrame(afr);
  ctx.clearRect(0,0,window.innerWidth,window.innerHeight);
  clearTimeout(rto);
  rto = setTimeout(drawHex, 500);
});

style.css

html, body, canvas {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
  background-color: #444243;
  overflow: hidden;
}