Trembling triangle horse

Just a little trembling half-bred triangle horse.

forked from veltman's block: Trembling triangle

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
</head>
<body>
<canvas width="960" height="500"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

let context = document.querySelector("canvas").getContext("2d"),
    interval = 60000,
    triangle = [[1,249],[63,123],[59,94],[49,109],[42,115],[33,114],[27,106],[26,93],[30,85],[36,68],[34,57],[34,52],[39,42],[40,36],[38,27],[38,13],[46,25],[46,29],[55,26],[59,27],[60,16],[66,18],[70,26],[71,33],[79,37],[89,37],[89,45],[97,45],[94,53],[95,57],[98,55],[125,0],[184,117],[194,115],[206,119],[216,126],[224,137],[227,147],[228,158],[234,167],[243,167],[250,161],[254,155],[255,159],[252,165],[246,170],[249,171],[254,169],[250,175],[255,172],[253,177],[259,173],[257,180],[251,187],[245,187],[234,187],[220,191],[249,248],[182,249],[175,260],[171,271],[170,279],[171,289],[170,293],[162,295],[156,294],[155,290],[165,264],[165,260],[165,249],[148,249],[147,256],[147,262],[152,265],[157,264],[158,275],[154,283],[147,287],[143,287],[140,284],[137,264],[132,257],[136,249],[119,249],[119,255],[124,260],[129,261],[126,264],[127,269],[131,268],[136,269],[138,285],[137,288],[134,291],[131,293],[126,291],[123,288],[120,284],[120,279],[114,283],[109,284],[104,284],[101,282],[99,279],[99,274],[105,266],[111,263],[115,263],[117,262],[110,249],[97,249],[97,256],[98,260],[104,265],[107,264],[97,276],[81,261],[80,249]],
    line = d3.line().context(context),
    pixelScale = d3.scaleLinear()
      .range([2, 8]),
    depthScale = d3.scaleLinear()
      .rangeRound([3, 7]),
    offsetter;

context.globalAlpha = 0.1;
context.translate(50, 50);
  
d3.timer(function(t){
  t = Math.min(t % interval / interval, 1 - t % interval / interval) * 2;

offsetter = d3.randomNormal(0, pixelScale(t));

context.clearRect(-50, -50, 960 + 100, 500 + 100);
  context.fillStyle = d3.interpolateWarm(t / 2);
  for (let i = 0; i < 10; i++) {
    context.beginPath();
    line(tremble(triangle, depthScale(t)));
    context.closePath();
    context.fill();
  }

});

function tremble(shape, depth) {
  return shape.reduce((newPoints, val, i) => {
    return [...newPoints, val, ...getBetween(val, shape[i + 1] || shape[0], depth)];
  }, []);
}

function getBetween(a, b, depth) {
  const midpoint = [
    a[0] + (b[0] - a[0]) * 0.5 + offsetter(),
    a[1] + (b[1] - a[1]) * 0.5 + offsetter()
  ];

if (depth === 1) {
    return [midpoint];
  }

return [...getBetween(a, midpoint, depth - 1), midpoint, ...getBetween(midpoint, b, depth - 1)];

}

</script>

https://d3js.org/d3.v4.min.js