Published
Edited
Jun 15, 2019
4 stars
md`# pong patterns`
viewof canvas = {
const ctx = DOM.context2d(width, height);
const size = 50;
const gap = size;
ctx.fillStyle = "black"
ctx.rect(0, 0, width, height);
ctx.fill();
for(let i = -2; i < 21; i++){
for(let l = 0; l < 14; l++){
ctx.beginPath();
ctx.strokeStyle = "white";
ctx.lineWidth = Math.max(1, 17 - l ** 1.3);
if(l % 2 === 0) {
ctx.arc(i * gap, l * gap * Math.sin(1 / 6 * Math.PI * 2) - 20, size, 0, 2.0 * Math.PI);
} else {
ctx.arc(i * gap + gap * Math.cos(1 / 6 * Math.PI * 2), l * gap * Math.sin(1 / 6 * Math.PI * 2) - 20, size, 0, 2.0 * Math.PI);
}
ctx.stroke();
ctx.closePath();
}
}
return ctx.canvas;
}
height = width/2
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.
