{
const ctx = DOM.context2d(width,height,1);
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "#2e2e2e"
ctx.fillRect(0,0, width, height);
for (let x = 0; x < width * 2; x = x + 31) {
for (let y = 0; y < height * 1.6; y = y + 31) {
let t = noise2D(x, y);
ctx.strokeStyle = color(noise3D(x,y,now/18)*1000);
ctx.beginPath()
let [y1, x1] = [x, y + 5 * noise3D(x,y,now/8)]
ctx.rect(x1, y1, x + 5, y + 5)
ctx.stroke()
}
}
yield ctx.canvas
}
noise2D = {
const simplex = new (await require("simplex-noise@2"))(seed);
return (x,y,) => simplex.noise2D.bind(simplex)(x/noiseScale, y/noiseScale)
}
noise3D = {
const simplex = new (await require("simplex-noise@2"))(seed);
return (x,y,z) => simplex.noise3D.bind(simplex)(x/noiseScale, y/noiseScale, z/noiseScale);
}
height = 400
seed = 2
noiseScale = 500
d3 = require("d3@5")
color = (x,y) => d3.hcl(x/width * 360, 80, 100).hex()
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.
