{
// variables and functions to help with events
let eventLog;
const eventListeners = {};
function updateLog(agent, eventType, event) {
if (eventLog.text.split('\n').length > 17) eventLog.text = '';
const {x, y} = event.data.global;
eventLog.text +=`${agent.state}: ${eventType} (${
Math.round(x)},${Math.round(y)})\n`;
}
for (let eventType of [
'click', 'pointerdown', 'pointerout', 'pointerover',
'pointertap', 'pointerup', 'pointerupoutside'
]) {
eventListeners[eventType] = function(event) { updateLog(this, eventType, event) };
}
// simulation
const sim = new AA.Simulation({
width: 700,
height: 400,
gridStep: 100,
state: 'background'
}).vis({
background: true,
tint: 0xccccee,
...eventListeners
});
invalidation.then(() => sim.end());
// squares
for (let sq of sim.squares) {
if (sq.index === 2) continue; // so can see the background
sq.zIndex = -Infinity;
if (sq.index === 4) {
sq.vis({
tint: 0xdddddd,
text: 'no listeners - background fires events'
});
}
else if (sq.index === 6) {
sq.vis({
tint: 0xdddddd,
text: 'empty listener - blocks background from firing events',
click: evt => () => {}
});
}
else {
sq.state = `${sq.xIndex},${sq.yIndex}`;
sq.vis({
tint: sq.checker ? 0xeeeeee : 0xdddddd,
text: sq.state,
...eventListeners
});
}
}
// zones
new AA.Zone({
indexLimits: [1, 2, 2, 2],
state: 'orange rectangle',
zIndex: Infinity
}).vis({tint: AV.colors.orange, text: 'at front', ...eventListeners})
.addTo(sim);
new AA.Zone({indexLimits: [4, 5, 1, 1], state: 'stretched bricks'})
.vis({image: bricks, ...eventListeners})
.addTo(sim);
new AA.Zone({indexLimits: [5, 6, 3, 3], state: 'bricks'})
.vis({image: bricks, tile: true, ...eventListeners})
.addTo(sim);
// actors
sim.populate({
n: 2,
padding: 100,
setup: ((ac, i) => {
ac.updateRadius = () => sim.tickIndex % 240 / 5 + 20;
ac.vel = AA.Vector.randomAngle(0.5);
ac.pointing = 0;
ac.state = i ? 'red circle' : 'green sphere';
ac.vis({
tint: i ? AV.colors.red : null,
image: i ? null : sphere,
...eventListeners
})
})
});
sim.interaction.set('bounce', {
group1: sim,
group2: sim.actors,
behavior: 'bounce'
});
// vis
return AV.visObs(sim, {
images: [swansea, bricks, sphere],
fontName: 'Swansea',
textTint: 0x333333,
basicCircleRadius: 256,
afterSetup: (sim, app, PIXI) => {
eventLog = app.stage.addChild(new PIXI.BitmapText('', {
fontName: 'Swansea',
fontSize: 22,
tint: 0x0
}));
}
});
}
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.
