function koch (r, order, ctx) {
// recursively iterate through the flake crystal angles,
// drawing a line at the conclusion of each recursion
if (order) {
// rotate angle for drawing
// iterate through [-60, 120, -60, 0]
// -theta, 2*theta, -theta, 0
for (let t of flakeAngles) {
// recursion iterator
koch(r / 3, order - 1, ctx)
// left rotation iterator
ctx.rotate(degree2radian(t))
}
} else {
// draw line
ctx.lineTo(r, 0)
ctx.translate(r, 0)
}
}
function drawKoch (c) {
c.clearRect(0, 0, w * 10, h * 10);
const width = w;
const angle = degree2radian(__L.angle);
const step = __L.scale;
c.strokeStyle = '#666';
c.lineWidth = n < 4 ? 2 : 1;
c.translate(__L.left, __L.top);
c.beginPath();
c.moveTo(0, 0);
const instructions = {
'F' () {
c.beginPath();
c.moveTo(0, 0);
c.lineTo(step, 0);
c.stroke();
c.translate(step, 0);
},
'+' () {
c.rotate(angle);
},
'-' () {
c.rotate(-angle);
},
};
instructions.X = instructions.F;
instructions.Y = instructions.F;
const iterate = kochL.split('')
iterate.forEach(i => {
instructions[i]()
});
c.stroke();
}
dpi = window.devicePixelRatio || 1
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
