Public
Edited
Feb 7, 2023
1 star
Insert cell
Insert cell
Insert cell
maskIndex = 0
Insert cell
Insert cell
Insert cell
Insert cell
function transform(position, t, i, r) {
// (Math.sin(t) + 1) / 2);
return [
position[0] / 1 + (Math.sin((t / 2) * r + r * 2) + 1) * 2 * r * 10 - 500, //+ t * i, //+ t * 100 - i * 500,
position[1] / 1 + (Math.cos((t / 2) * r + r * 3) + 1) * 2 * r * 10 - 900 //- t * i //+ t * 100 - i * 100
];
}
Insert cell
{
const context = DOM.context2d(width, height);
for (const t of animate()) {
yield t.then((t) => {
// return x;
context.fillStyle = "#101656";
context.fillRect(0, 0, width, height);

context.beginPath();

context.strokeStyle = "#fe5e60";
context.lineWidth = 4;
context.fillStyle = "#4d2858";
context.beginPath();

let i = 0;
context.moveTo(...transform(mask[0], t, i, randomPerVertex[i]));
for (let position of mask.slice(1)) {
i++;
context.lineTo(...transform(position, t, i, randomPerVertex[i]));
}

context.closePath();
context.fill();
context.stroke();

return context.canvas;
});
}
}
Insert cell
height = 900
Insert cell

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.
Learn more