Generative artist, sharing my journey in visual experiments.
n = 50
gridSize = 30
brushLength = 10
p = getRandomPalette()
palette = shuffle(p)
{
const SVG = svg`<svg width="${w}" height="${h}"></svg>`
const rc = rough.svg(SVG)
const addToSVG = el => SVG.appendChild(el)
addToSVG(rc.rectangle(0, 0, w, h, {
fill: palette[0],
fillWeight: 4,
fillStyle: 'sunburst',
hachureAngle: randInt(720),
stroke: 'none'
}))
array(n).forEach(i => {
addToSVG(rc.path(`${polygonPath(randInt(w), randInt(h), randInt(12), randInt(50, (n-i) * 10), random(TAU))}`, {
fill: palette[randInt(1,palette.length)],
fillWeight: randInt(1, 5),
// ['hachure', 'solid', 'zigzag', 'cross-hatch', 'dots', 'sunburst', 'dashed', 'zigzag-line']
fillStyle: 'sunburst',
hachureAngle: randInt(720),
stroke: 'none'
}))
})
return SVG
}
polygonPath = (cx, cy, n, rad, startAngle = 0) => {
return array(n).map(i => {
const angle = startAngle + TAU/n * i
const x = cx + Math.cos(angle) * rad
const y = cy + Math.sin(angle) * rad
return `${i === 0 ? 'M' : 'L'} ${x} ${y}`
}).join(' ')
}
coin = () => random() < .5 ? -1 : 1
rough = require('roughjs@4.0.4').catch(() => window["rough"])
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.
