Consultant Designer & Developer
function koch(p0, p1, limit) {
const dx = p1[0] - p0[0];
const dy = p1[1] - p0[1];
const dist = Math.sqrt(dx * dx + dy * dy);
const unit = dist / 3;
const angle = Math.atan2(dy, dx);
const pA = [p0[0] + dx / 3, p0[1] + dy / 3];
const pC = [p1[0] - dx / 3, p1[1] - dy / 3];
const pB = [
pA[0] + Math.cos(angle - Math.PI / 3) * unit,
pA[1] + Math.sin(angle - Math.PI / 3) * unit
];
if (limit > 0) {
return [
koch(p0, pA, limit - 1),
koch(pA, pB, limit - 1),
koch(pB, pC, limit - 1),
koch(pC, p1, limit - 1)
].flat();
}
return [p0, pA, pB, pC, p1];
}
pairUp([1, 2, 3, 4, 5, 6])
pairUp = (input) => {
const result = [];
for (let i = 0; i < input.length; i++) {
result[i] =
i === input.length - 1 ? [input[i], input[0]] : [input[i], input[i + 1]];
}
return result;
}
strokWidth = 1
generatePathD = d3.line() //.curve(d3.curveCatmullRomClosed.alpha(1))
palette = ({
bg: `hsl(0,0%,95%)`,
fg: `hsl(0,0%,5%)`,
debug: `hsl(300, 100%, 50%)`
})
maxSize = Math.min(width, height)
margin = maxSize / 10
size = maxSize - 2 * margin
marginX = (width - size) / 2
marginY = (height - size) / 2
height = Math.floor((width * 9) / 16)
svg = htl.svg
import { distance, angleOfInclination } from "@saneef/helper-functions-geometry"
import { CSMath as math, CSRandom as random } from "@saneef/canvas-sketch-util"
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.
