Published
Edited
Apr 3, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
MiniPlex = import('https://unpkg.com/miniplex@0.9.0/dist/miniplex.esm.js?module')
Insert cell
world = new MiniPlex.World()
Insert cell
entity = world.createEntity({ position: { x: 0, y: 0, z: 0 } })
Insert cell
world.addComponent(entity, {velocity: { x: 10, y: 0, z: 0 }})
Insert cell
movingEntities = world.archetype("position", "velocity")

Insert cell
function movementSystem(world) {
for (const { position, velocity } of movingEntities.entities) {
position.x += velocity.x
position.y += velocity.y
position.z += velocity.z
}
}
Insert cell
output = html`<div>${posX}</div>`
Insert cell
{
while (true) {
yield Promises.tick(100, movementSystem(world)); //wait 100 msec then run movementSystem
mutable posX = entity.position.x // cannot just refer to entity.position.x in HTML because it is not recognized as a 'change'
}
}
Insert cell
mutable posX = entity.position.x
Insert cell

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.
Learn more