Consultant Designer & Developer
maxLineWidth = width / numOfLines
padding = (paddingRatio * maxLineWidth) / 2
breakSize = {
const max = height / 2;
const min = height / 16;
return CSMath.lerp(min, max, breakSizeRatio);
}
palette = {
shuffle;
if (colorScheme === "monochrome") {
return {
bg: "#e9e5da",
fg: "#101419"
};
}
const fg = getRandomColor();
const bg = getRandomContrastColor(fg);
return {
bg,
fg
};
}
seedData = CSMath.linspace(numOfLines, true).map((u) => ({
p: [u, 0],
// w: 0,
// m: 0
}))
mutable t = 0
data = {
while (animate) {
mutable t = t + 1;
yield updateState(seedData, t);
}
yield updateState(seedData, t);
}
updateState = (data, t) =>
chunk(data, chunkSize)
.map((c, i) => {
const m = 0.5 * CSRandom.noise2D(i / 2, t / 200) + 0.5;
return c.map((d) => {
const [u] = d.p;
return {
...d,
// w: 0.5 * CSRandom.noise1D(u + t / 2000, 4) + 0.5,
w: 0.5 * CSRandom.noise2D(u * 4, t / 500) + 0.5,
m
};
});
})
.flat()
ctx = DOM.context2d(width, height)
drawBg = () => {
ctx.fillStyle = palette.bg;
ctx.beginPath();
ctx.fillRect(0, 0, width, height);
}
drawLines = () => {
const maxWidth = maxLineWidth - padding;
ctx.fillStyle = palette.fg;
ctx.beginPath();
data.forEach((l) => {
const {
p: [u1, v1],
w,
m
} = l;
const x = CSMath.lerp(maxWidth / 2, width - maxWidth / 2, u1);
const y = CSMath.lerp(0, height, v1);
const breakY = CSMath.lerp(breakSize / 2, height - breakSize / 2, m);
const lineWidth = CSMath.lerp(maxWidth / 10, maxWidth, w);
const breakLineWidth = CSMath.lerp(maxWidth, maxWidth / 8, w);
// First segment
ctx.rect(x - lineWidth / 2, y, lineWidth, breakY - breakSize / 2);
// Break segment
ctx.rect(
x - breakLineWidth / 2,
breakY - breakSize / 2,
breakLineWidth,
breakSize
);
// Second segment
ctx.rect(
x - lineWidth / 2,
breakY + breakSize / 2,
lineWidth,
height - (breakY + breakSize / 2)
);
});
ctx.fill();
}
width
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.
