vis = {
// simulation
const sim = new AA.Simulation({
width: 500,
height: 500,
gridStep: 50
}).vis({
background: true,
image: 'grass.png',
tile: true,
});
invalidation.then(() => sim.end());
// cat
const catSpeed = 1.5;
const cat = new AA.Actor({
x: 150,
y: 150,
radius: 50,
maxSpeed: catSpeed,
vel: new AA.Vector(0, -catSpeed),
updateState: function() {
if (sim.tickIndex % 133 === 0) {
this.vel.turn(Math.PI / 2);
}
}
}).vis({image: ac => `cat-${ac.vel.direction()}-${sim.frame(28, 4)}.png`})
.addTo(sim);
// ants
const antSpeed = 1.5;
sim.populate({
n: 30,
radius: 10,
random: true,
exclude: [cat],
setup: ac => {
ac.maxSpeed = antSpeed;
ac.maxForce = 0.3;
ac.label('ant', true);
ac.steer.set('ant-flee-cat', {
behavior: 'flee',
target: cat,
off: 10
});
ac.steer.set('ant-wander', {
behavior: 'wander',
wanderStrength: 0.05,
});
ac.vis({image: ac => `ant-${sim.frame(12, 4)}.png`});
}
});
// boundary repels ants
sim.interaction.set('boundary-repels-ants', {
group1: sim,
group2: sim.withLabel('ant'),
behavior: 'repel',
off: 10
});
// ants avoid each other
sim.interaction.set('ants-avoid-ants', {
group1: sim.withLabel('ant'),
behavior: 'avoid',
off: 20,
strength: 1
});
// vis
return AV.visObs(sim, {
images: [
'https://cdn.jsdelivr.net/gh/gjmcn/sprites/sprite-sheets/outside.json',
'https://cdn.jsdelivr.net/gh/gjmcn/sprites/sprite-sheets/ants.json',
'https://cdn.jsdelivr.net/gh/gjmcn/sprites/sprite-sheets/cat-walk.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.
