Skip to content

Instantly share code, notes, and snippets.

@jmuyskens

jmuyskens/README.md

Created July 17, 2013 22:15
Show Gist options
  • Save jmuyskens/6025039 to your computer and use it in GitHub Desktop.
Save jmuyskens/6025039 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
options.json
{
"libraries": [
"Processing"
],
"mode": "javascript",
"layout": "fullscreen mode (vertical)",
"resolution": "reset"
}
Raw
water.css
/* css goes here */
#container, h1 {
text-align: center;
margin: 1em auto;
}
Raw
water.html
<div id='container'>
<canvas width="500" height="500"></canvas>
</div>
Raw
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});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment