Creative Technologist, Data Visualizer and HCI researcher.
{
const canvas = d3.create("canvas").node();
const ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
while (true) {
loop(ctx);
yield canvas;
}
}
loop = (ctx) => {
let passedTime = new Date().getTime();
ctx.clearRect(0, 0, w, h);
for (let i = 0; i < unitNum * unitNum; i++) {
let verticalNum = parseInt(i / unitNum);
let horizontalNum = i % unitNum;
let x = offsetX + unitSize * horizontalNum + unitSize / 2;
let y = offsetY + unitSize * verticalNum + unitSize / 2;
let par1 = (i % (unitNum + 1)) / unitNum;
let radius = (par1 * unitSize) / 2;
let par2 = (passedTime % 1000) / 999;
par2 *= unitSize / 2;
radius = (radius + par2) % (unitSize / 2);
let parC = (radius / (unitSize / 2)) * 255;
ctx.fillStyle = `rgb(${parC}, ${parC}, ${parC})`;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, true);
ctx.fill();
}
}
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.
