Generative artist, sharing my journey in visual experiments.
palette = getRandomPalette().map(hex => ({hex, lightness: rgbToHsl(hexToRgb(hex))[2]}))
.sort((a,b) => a.lightness > b.lightness ? 1 : -1)
.map(d => d.hex)
{
const SVG = svg`<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="white" />
</svg>`
const rc = rough.svg(SVG)
const addToSVG = el => SVG.appendChild(el)
addToSVG(rc.rectangle(0, 0, w, h, {
fill: palette[0],
fillWeight: 3.5,
fillStyle: 'sunburst',
hachureAngle: randInt(720),
stroke: 'none'
}))
thresholds.forEach((d, i) => {
addToSVG(rc.path(path(contour(contourData, i/palette.length)), {
roughness: 2.8,
fill: palette[i],
fillWeight: 2,
// ['hachure', 'solid', 'zigzag', 'cross-hatch', 'dots', 'sunburst', 'dashed', 'zigzag-line']
fillStyle: 'sunburst',
hachureAngle: randInt(720),
stroke: palette[i]
}))
})
return SVG
}
imageData = readPixels('https://source.unsplash.com/featured?streetlife', { w, h , format: 'hsl', fit: true })
contourData = imageData.pixels.map(p => p[2]) // use lightness for contours
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.
