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, 5, 5, clockTile, {
noiseField: impureGetNoiseField("clocks are super fun"),
colors: ["yellow", "limegreen", "hotpink", "orange"],
colorIndex: 0,
degree: 0,
tileIndex: 0
})
}
</svg>
SimplexNoise = require("simplex-noise@2.4")
function impureGetNoiseField(seed) {
return new SimplexNoise(seed);
}
function clockTile(width, height, data) {
const { colors, tileIndex, noiseField } = data;
const noiseHere = noiseField.noise2D(tileIndex * width, tileIndex * height);
const degree = 45 * (noiseHere * 4);
const colorIndex = tileIndex % colors.length;
return [
`<circle cx=${width / 2} cy=${height / 2} r=${
width / 2 - 1
} stroke="black" fill="${colors[colorIndex]}" />
<line x1=${width / 2} x2=${width / 2} y1=1 y2=${
height / 2 - 1
} stroke="black" transform="rotate(${degree}, ${width / 2}, ${
height / 2
})"/>`,
{
...data,
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.
