{
// simulation
AA.random.seed(seed);
const sim = new AA.Simulation({
width: 900,
height: 500,
gridStep: 20
}).vis({
background: true,
tile: true,
image: terrain === 'town'
? 'stones.png'
: terrain === 'beach'
? 'sand.png'
: 'nature-grass.png'
});
invalidation.then(() => sim.end());
// beach
if (terrain === 'beach') {
sim.regions({
minRegions: 1,
maxRegions: Infinity,
minSquares: params.beachMinSquares,
maxSquares: params.beachMaxSquares,
shape: params.beachShape,
padding: params.beachPadding,
gap: params.beachGap,
grow: params.beachGrow,
retry: 500,
setup: sq => {
sq.zIndex = -Infinity;
sq.vis({image: 'water-green.png'});
}
});
}
// town
else if (terrain === 'town') {
sim.partition({
n: params.townBlocks,
minWidth: params.townMinWidth,
minHeight: params.townMinHeight,
padding: params.townPadding,
gap: params.townGap,
randomSplit: params.townRandomSplit,
randomDim: params.townRandomDim,
randomSite: params.townRandomSite,
setup: (zn, i) => zn.vis({
image: 'bricks-yellow.png',
tile: true,
tint: AV.colors[i % 9]
})
});
}
// park
else {
sim.populate({
n: params.parkTrees,
gap: params.parkGap,
padding: params.parkPadding,
random: params.parkRandom,
overlap: params.parkOverlap,
retry: 10_000,
radius: () => AA.random.normal(params.parkMeanRadius, params.parkMeanRadius / 5)(),
setup: ac => ac.vis({image: 'tree-gold.png'})
});
}
// vis
return AV.visObs(sim, {
images: ['https://cdn.jsdelivr.net/gh/gjmcn/sprites/sprite-sheets/outside.json'],
});
}
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.
