Generative artist, sharing my journey in visual experiments.
svg`<svg width="${w}" height="${h}">
<rect width="${w}" height="${h}" fill="none" stroke="blue" />
<g transform="translate(${w/2}, ${h/2})">
${hatches.map(seg => `<line
stroke="grey"
x1="${seg.a.x}"
y1="${seg.a.y}"
x2="${seg.b.x}"
y2="${seg.b.y}"
/>`).join('\n')}
${polys.map((p, j) => `<path
stroke="black"
stroke-width="2"
fill="none"
d="${pathFromPolygon(p)}"
/>`).join('\n')}
</g>
</svg>`
N = 32
polys = array(N).map(j => Polygon.fromPath(`${array(7).map(i => {
const curr = PVector((j + 1) * 10, 0).rotateTo(TAU / 6 * i + j * TAU / ((N - 1) * 3))
if(i === 0) return `M${curr.x} ${curr.y}`
else {
const prev = curr.clone().rotateBy(-TAU / 6)
const handle1 = prev.clone().mag(2 + j).rotateBy(PI/2).add(prev)
const handle2 = curr.clone().mag(2 + j).rotateBy(-PI/2).add(curr)
return `C${handle1.x} ${handle1.y} ${handle2.x} ${handle2.y} ${curr.x} ${curr.y}`
}
}).join(' ')} Z`))
hatches = hatchMultiplePolygons(polys, 0, 2, true)
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.
