Published
Edited
Sep 24, 2019
2 stars
md`# sine patterns`
viewof canvas = {
const ctx = DOM.context2d(width, height);
const size = 10;
const cx = width / 2;
const cy = height /2;
const numOfArcs = 20;
let frame = 0;
while (true) {
ctx.beginPath();
ctx.fillStyle = "black";
ctx.rect(0, 0, width, height);
ctx.fill();
ctx.closePath();
for(let i = 0; i < 4; i++){
waveArc(ctx, numOfArcs, "pink", cx, cy, size, 1, 0, 0, 0.5 * i * Math.PI, frame);
waveArc(ctx, numOfArcs, "hotpink", cx, cy, size, -1, size / 2, Math.PI, 0.5 * i * Math.PI, frame);
}
frame += 1;
yield ctx.canvas;
}
}
height = width / 2
function waveArc (ctx, numOfArcs, color, cx, cy, size, direction, initRadius, initPhase, initAngle, frame) {
ctx.strokeStyle = color;
for(let i = 0; i < numOfArcs; i++) {
ctx.lineWidth = 1;
ctx.beginPath();
const wave = Math.sin(initPhase + frame * 0.04 + i / numOfArcs * 2.5 * Math.PI) * 0.25
const startAngle = direction * (initAngle + frame * 0.01);
const endAngle = startAngle + 0.32 * Math.PI;
ctx.arc(cx, cy, size * i + initRadius, startAngle - wave, endAngle + wave);
ctx.stroke();
ctx.closePath();
}
}
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.
