Published
Edited
Feb 16, 2020
2 forks
2 stars
Insert cell
Insert cell
Insert cell
{
const ctx = DOM.context2d(width,height,1);
ctx.clearRect(0, 0, width, height);

for (let x = 0; x < width; x = x + 20) {
for (let y = 0; y < height; y = y + 25) {
let t = noise3D(x, y, 10) * Math.PI;
ctx.beginPath();
ctx.moveTo(x, y);
let [x1, y1] = [x + 2 * Math.cos(t), y + 2 * Math.sin(t)]
const param = Math.max(2,x/40 - y/30)
for (let i = 0; i < param; i++){
t = noise3D(x1, y1, 10) * Math.PI;
[x1, y1] = [x1 + 2 * Math.cos(t), y1 + 2 * Math.sin(t)]
ctx.lineTo(x1, y1);
}
ctx.stroke();
}
}
yield ctx.canvas
}
Insert cell
noise2D = {
const simplex = new (await require("simplex-noise@2"))(seed);
return (x,y,) => simplex.noise2D.bind(simplex)(x/noiseScale, y/noiseScale)
}
Insert cell
noise3D = {
const simplex = new (await require("simplex-noise@2"))(seed);
return (x,y,z) => simplex.noise3D.bind(simplex)(x/noiseScale, y/noiseScale, z/noiseScale);
}
Insert cell
height = 400
Insert cell
seed = 3
Insert cell
noiseScale = {
yield 340 + 220 * Math.sin(now/3000)
}
Insert cell
noise2D(3, 1.1)
Insert cell
[1,2,3,4,5,6,7].map(x=> noise2D(1,x /100))
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