Public
Edited
Mar 6, 2024
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
{
const width = 600;
const height = width;
const ctx = DOM.context2d(width, height);

const ringCount = d3.range(4);
const d = 8;
ctx.lineWidth = 2;
let i = 0;

while (true) {
if (i === 400) {
ctx.clearRect(0, 0, width, height);
i = 0;
}
ringCount.map(n => {
ctx.beginPath();
// ctx.strokeStyle = `rgb(${r},${g},${b})`;
ctx.strokeStyle = d3.interpolateCool(Math.random());
ctx.moveTo(width * Math.random(), width * Math.random());
ctx.lineTo(width / 2, height / 2);
ctx.stroke();
});
i = i + 1;
yield ctx.canvas;
// return ctx.canvas;
}
}
Insert cell
Insert cell
{
const height = 200;
const ctx = DOM.context2d(width, height);

ctx.fillStyle = "white";
ctx.fillRect(0, 0, width, height);

const factor = 8;
const padding = 1;
const row = Math.floor((width - padding) / (factor + padding));
const column = Math.floor((height - padding) / (factor + padding));
let color = column;
let len = 40;
let turns = 0;

while (true) {
if (turns > 1000) {
ctx.clearRect(0, 0, width, height);
turns = 0;
}

let x = Array.from({ length: len }, Math.random);
let y = Array.from({ length: len }, Math.random);

for (let cx of x) {
for (let cy of y) {
let i = Math.floor(cx * row);
let j = Math.floor(cy * column);
ctx.fillStyle = d3.interpolateCool(Math.random());
ctx.fillRect(
i * (factor + padding),
j * (factor + padding),
factor,
factor
);
}
}
turns = turns + 1;
yield ctx.canvas;
}

// return ctx.canvas;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
let ctx = DOM.context2d(width, height);
const canvas = ctx.canvas;

ctx.fillStyle = '#303A8F';
ctx.fillRect(0, 0, width, height);

let cx = width / 2;
let cy = height / 2;
let sp = speed / 1000;
const color = d3.scaleSequential([1, nbr_dots], d3.interpolatePlasma);

// ctx.fillStyle = "rgba(0,0,0," + (1 - trail_length) + ")";
ctx.fillRect(0, 0, width, height);

for (let i = 1; i < nbr_dots; i++) {
let r = i / nbr_dots;
let a = r * (Math.PI * 2);
let d = Math.sin(tm * sp * i * 1.2) * rose_rad;
let x = cx + Math.cos(a) * d;
let y = cy + Math.sin(a) * d;
// ctx.fillStyle =
// "hsla(" +
// Math.floor(r * 360) +
// "," +
// dot_sat +
// "%," +
// dot_bri +
// "%," +
// dot_alpha +
// ")";
ctx.fillStyle = color(i);
ctx.beginPath();
ctx.arc(x, y, dot_rad, 0, 2 * Math.PI, false);
ctx.fill();
}

yield canvas;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// viewof trail_length = slider({ description: "Trail length", value: .95 })
Insert cell
Insert cell
Insert cell
Insert cell
tm = now / 1000 + tm_offset
Insert cell
rose_rad = width * 0.45
Insert cell
height = width
Insert cell
Insert cell
Insert cell
import { slider } from "@jashkenas/inputs"
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