w = 400
//h = w / 210 * 297
//h = w / 297 * 210
h = w * 1.5
seed1 = 1671062416477
seed2 = 1671062640987
seed3 = 1671062753465
seed4 = 1671062788006
seed5 = 1671097576437
seed6=1671146506903
seed7=1671146762862
n = 40
strokeWeight = 20
trailLength = 220
stepLength = 10
noiseScale = 800
seed = Date.now()
seed_bot = Math.floor(Date.now() * .5)
svg`<svg width="${w}" height="${h}">
<rect width="${w}" height="${h}" stroke="#888" fill="none" />
${layer('lightblue')}
</svg>`
layer = (color) => `<g>
${array(n).map((ns,idx) => {
const v = PVector(PVector.random(PVector(0, 0), PVector(0,0)).x,((h/n) * idx * 1.25));//PVector.random(PVector(0, 0), PVector(w, h))
const pts = [v.clone()]
const this_seed = seed;
for(let i = 0; i < trailLength; i++){
const angle2 = simplex.noise3D(v.x/noiseScale, v.y/noiseScale, seed) * TAU/2
const angle = simplex.noise3D(v.x/noiseScale, v.y/noiseScale, this_seed) * TAU/4
console.log(angle)
const dir = PVector.fromAngle(angle)
v.add(dir.setMag(stepLength))
if(!(v.x > 0 && v.x < w && v.y > 0 && v.y < h)) break
pts.push(v.clone())
}
const points = pts.map ( d => [d.x,d.y]);
return `<path stroke="${color}" d="${line(points)}" fill="none" />`
// return pts.map((pt, i, arr) => `<circle
// cx="${pt.x}"
// cy="${pt.y}"
// r="${2}"
// stroke="${color}"
// fill="none"
// opacity="0.2"
// />`).join('\n')
}).join('\n')}
</g>`
d3 = require("d3@6")
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.
