Public
Edited
Feb 20
render = {
let ctx = DOM.context2d(ctxSize, ctxSize / 2);
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, ctxSize, ctxSize);
{
ctx.save();
ctx.scale(ctxSize, ctxSize);
draw(ctx);
ctx.restore();
}
return ctx.canvas;
}
draw = (ctx) => {
ctx.fillStyle = "red";
// ctx.fillRect(0, 0, 0.1, 0.1);
ctx.strokeStyle = curveColor;
ctx.lineWidth = 0.005;
ctx.lineCap = "round";
// drawLine(0, 0, 0.1, 0.2, ctx);
kochIter(detailLevel, 0.1, 0.1, 0.8, 0, ctx);
}
function kochIter(order, x1, y1, length, angle, ctx) {
if (order === 0) {
let x2 = x1 + length * cos(angle),
y2 = y1 + length * sin(angle);
drawLine(x1, y1, x2, y2, ctx);
return { x2, y2 };
} else {
length *= kValue;
let p;
p = kochIter(order - 1, x1, y1, length, angle, ctx);
p = kochIter(order - 1, p.x2, p.y2, length, angle + da, ctx);
p = kochIter(order - 1, p.x2, p.y2, length, angle - da, ctx);
p = kochIter(order - 1, p.x2, p.y2, length, angle, ctx);
return p;
}
}
drawLine = (x1, y1, x2, y2, ctx) => {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
da = computeDAngle(kValue)
computeDAngle = (k) => {
return (Math.acos((0.5 - k) / k) * 180) / Math.PI;
}
sin = (angle) => {
return Math.sin((angle / 180) * Math.PI);
}
cos = (angle) => {
return Math.cos((angle / 180) * Math.PI);
}
ctxSize = 400
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.
