{
// simulation
const sim = new AA.Simulation({
width: Math.floor(width / 50) * 50,
height: 500,
gridStep: 50
}).vis({baseColor: 0xffffff});
const speed = 3;
invalidation.then(() => sim.end());
// angle to prize
function angleToPrize() {
return AA.Vector.fromObject(prize).sub(this).heading();
}
// small eyes
const smallEyes = sim.populate({
n: sim.squares.size,
radius: 26,
padding: 25,
setup: ac => {
ac.updatePointing = angleToPrize.bind(ac);
ac.vis({image: eyeballBlue});
}
});
// big eyes
const bigEyes = sim.populate({
n: 3,
radius: 35,
padding: 35,
setup: ac => {
ac.vel = AA.Vector.randomAngle(speed);
ac.updatePointing = angleToPrize.bind(ac);
ac.vis({image: eyeballPink});
}
});
// prize
const prize = new AA.Actor({
x: 80,
y: 80,
vel: AA.Vector.randomAngle(speed),
radius: 60,
pointing: 0
}).vis({image: rosette})
.addTo(sim);
// big eye and prize bounce off boundary
sim.interaction.set('boundary-bounce', {
group1: sim,
group2: [...bigEyes, prize],
behavior: 'bounce',
speed
});
// big eyes and prize all bounce off each other
sim.interaction.set('moving-bounce', {
group1: [...bigEyes, prize],
behavior: 'bounce',
speed
});
return AV.visObs(sim, {
images: [eyeballBlue, eyeballPink, rosette],
});
}
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.
