Generative artist, sharing my journey in visual experiments.
seed = Date.now()
strokeWeight = 20
trailLength = 220
stepLength = 3
svg`<svg width="${w}" height="${h}">
<rect width="${w}" height="${h}" stroke="blue" fill="none" />
${layer('red')}
${layer('black')}
</svg>`
layer = (color) => `<g>
${array(n).map(() => {
const v = PVector.random(PVector(0, 0), PVector(w, h))
const pts = [v.clone()]
for(let i = 0; i < trailLength; i++){
const angle = simplex.noise3D(v.x/noiseScale, v.y/noiseScale, seed) * TAU/2
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())
}
return pts.map((pt, i, arr) => `<circle
cx="${pt.x}"
cy="${pt.y}"
r="${(1 - i/arr.length) * strokeWeight * arr.length / trailLength}"
stroke="${color}"
fill="none"
opacity="0.2"
/>`).join('\n')
}).join('\n')}
</g>`
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.
