Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
<svg id="art" style="/*border: 10px solid black; padding: 30px;*/ background-color: white" width=500 height=500 viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
${
getTiles(100, 100, 30, 30, randomColorTile, {
colors: ["orange", "hotpink", "purple"],
colorIndex: 0,
noiseField: impureGetNoiseField("colors"),
tileIndex: 0
})
}
</svg>
SimplexNoise = require("simplex-noise@2.4")
function impureGetNoiseField(seed) {
const simplex = new SimplexNoise(seed);
return simplex;
}
function randomColorTile(width, height, { colors, noiseField, tileIndex }) {
const noiseHere = noiseField.noise2D(tileIndex * width, tileIndex * height);
const colorIndex = Math.floor(Math.abs(noiseHere * 50)) % colors.length;
return [
`<rect x=0 y=0 width=${width} height=${height} fill="${colors[colorIndex]}" />`,
{
noiseField,
colors,
tileIndex: tileIndex + 1
}
];
}
function getTiles(width, height, cols, rows, makeTile, data) {
if (width === 0 || height === 0) {
return svg``;
}
const [colWidth, rowHeight] = [width / cols, height / rows];
const [thisTile, newData] = makeTile(colWidth, rowHeight, data);
return svg`${thisTile}
${
cols > 1
? // rest of this row to the right of this tile
svg`<g transform="translate(${colWidth}, 0)">
${getTiles(
width - colWidth,
rowHeight,
cols - 1,
1,
makeTile,
newData
)}
</g>`
: ``
}
${
rows > 1
? // rows below this one
svg`<g transform="translate(0, ${rowHeight})">
${getTiles(width, height - rowHeight, cols, rows - 1, makeTile, {
...newData,
tileIndex: newData.tileIndex + cols - 1
})}
</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.
