created by http://livecoding.io

README.md

View this code at http://livecoding.io/6025039

options.json

{
    "libraries": [
        "Processing"
    ],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

/* css goes here */
#container, h1 {
  text-align: center;
  margin: 1em auto;
}

water.html

<div id='container'>
  <canvas width="500" height="500"></canvas>
</div>

water.js

var $canvas = $('canvas');
var canvas = $canvas.get(0);

function triangle(pt1, pt2, pt3) {
  var ctx = canvas.getContext('2d');
  
  ctx.beginPath();
  ctx.moveTo(pt1.x, pt1.y);
  ctx.lineTo(pt2.x, pt2.y);
  ctx.lineTo(pt3.x, pt3.y);
  ctx.closePath();
  ctx.stroke();
}

function pointOnPath(pt1, pt2, factor) {
  return {x: (factor * (pt2.x - pt1.x)) + pt1.x,
          y: (factor * (pt2.y - pt1.y)) + pt1.y};
}

function nestedTriangle(pt1, pt2, pt3, factor, depth) {
  var ctx = canvas.getContext('2d');
  
  if (depth > 0) {
    triangle(pt1, pt2, pt3);
    pt1 = pointOnPath(pt1, pt2, factor);
    pt2 = pointOnPath(pt2, pt3, factor);
    pt3 = pointOnPath(pt3, pt1, factor);
    nestedTriangle(pt1, pt2, pt3, factor, depth - 1);
  }
  
}


var f = 0.053;
var d = 88;
var len = 240;

function hexnest (o) {
  var slen = Math.sin(Math.PI / 3) * len;
  var pt1 = {x: 0 + o.x, y:0.5*len + o.y};
  var pt2 = {x: slen + o.x, y:0 + o.y};
  var pt3 = {x: slen + o.x, y:len +o.y};
  var pt4 = {x: 2 * slen + o.x, y:0.5*len +o.y};
  var pt5 = {x: 2 * slen + o.x, y:1.5*len + o.y};
  var pt6 = {x: slen + o.x, y: 2*len + o.y};
  var pt7 = {x: 0 + o.x, y: 1.5*len + o.y};
  
  nestedTriangle(pt1, pt2, pt3, f, d);
  nestedTriangle(pt2, pt3, pt4, f, d);
  nestedTriangle(pt3, pt4, pt5, f, d);
  nestedTriangle(pt6, pt5, pt3, f, d);
  nestedTriangle(pt3, pt6, pt7, f, d);
  nestedTriangle(pt3, pt1, pt7, f, d);
}

hexnest({x:0, y:0});
hexnest({x:-208, y:-360});
hexnest({x:208, y:-360});
hexnest({x:208, y:360});
hexnest({x:-208, y:360});
hexnest({x:416, y:0});

water.json

{ }