📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Sep 20, 2021
1 star
Hello, Smart Shape!Hello, messagepipe!Hello, Atomico!Hello, Markdown-Tag !Hello, js-sdl!Hello Trivia API!Hello auto-animate!Hello, papa parse!Hello, lazy.js!Hello, mout!Hello, sugar js!Hello, lil-gui!Hello, owoify-js!Hello, Maverick JS -> Observables!Hello, Canvas Confetti!Hello, OWL!Hello, Bunny Fonts!Hello Color JS!Hello, Kute.js !Hello Color Legend Element!Hello, is-online!Hello, pretty-ms!Hello, Liveblocks!Convex ChatHello, filesize.js!Hello, SVG.jsHello, Counter-element!Hello, Ramda!Hello, Block Protocol!Hello, Reef!Hello, Croquet!Hello, Markdoc!Hello, Multiavatar!Hello, Tableful!Hello, kdl-jsHello, Wild Wild Path!Hello, Lexical!Hello, Statery!Hello, pdfme!Shuffle an ArrayHello, PikasoHello, Miniplex!Hello, CandyGraph!Hello, Supabase!Hello, Embla Carousel!Hello, core-js!Hello, tinybaseHello, umbrellajsHello, pintoraSkypack PixijsHello, sortablejsHello, JS-YAMLHello jService!Hello, iro.jsHello, SplideHello, Cosmic JSHello, singuiKaboom JS TemplateHello, JSPDFHello, Awesome Dev JokesRandom DAD JokeHello, model-viewerThe OracleTarot UtilitiesHello, lokiJSHello, cash ( cash-dom )Hello, Dice RollerHello, Slide-ElementHello, tsParticlesKaboom - dynamic valuesHello Lit.devHello, Melon JSHello Kontra
Testing bitECS for Tempest
{
// first, create a world
const world = bitECS.createWorld();
// give it a name
world.name = "TempestWorld";
addToConsole(world);
// add an entity - it's just an ID - a number
const entity001 = bitECS.addEntity(world)
addToConsole(entity001);
// add a component - components are just data structures
// first create a new type - it's just data with types.
// this is a reusable thing we can assign to a component shortly
const Vector3 = {
x: bitECS.Types.f32,
y: bitECS.Types.f32,
z: bitECS.Types.f32
}
addToConsole(Vector3)
// create a few components using this type
const Position = bitECS.defineComponent(Vector3)
const Velocity = bitECS.defineComponent(Vector3)
addToConsole(Position);
addToConsole(Velocity);
// create a list component via shorthand
const List = bitECS.defineComponent({
values: [bitECS.Types.f32, 3]
}) // [type, length]
// uncomment to see - takes a long time to render.
// addToConsole(List)
// a generic container
const Tag = bitECS.defineComponent()
addToConsole(Tag)
// add these components to our entity - entity001
bitECS.addComponent(world, Position, entity001)
bitECS.addComponent(world, Velocity, entity001)
bitECS.addComponent(world, List, entity001)
bitECS.addComponent(world, Tag, entity001)
// set the velocity of our entity via the components. Each value in a component is an array of the entities that posess it.
Velocity.x[entity001] = 1;
Velocity.y[entity001] = 1;
// note entity001 has not changed. It's just that the value in the Velicity.x array with that entity ID now has those values.
addToConsole(Velocity.x) //look at first item in array - it has a value of 1 now.
// next let's create a query into the world. Return to us all the entities that have a Position and a Velocity
const movementQuery = bitECS.defineQuery([Position, Velocity])
// it has no meaning until associated with a world
const ents = movementQuery(world)
addToConsole(ents); // returns the ID of the only entity in the world
// add concept of time. Just a plain attribute of the world.
world.time = { delta: 0, elapsed: 0, then: performance.now() }
addToConsole(world)
// add a system - a way to update some component values
const movementSystem = (world) => {
const ents = movementQuery(world)
for (let i = 0; i < ents.length; i++) {
const eid = ents[i]
Position.x[eid] += Velocity.x[eid]
Position.y[eid] += Velocity.y[eid]
Position.z[eid] += Velocity.z[eid]
}
return world
}
// add a "time" system to keep track of time
const timeSystem = world => {
const { time } = world
const now = performance.now()
const delta = now - time.then
time.delta = delta
time.elapsed += delta
time.then = now
return world
}
// a pipeline to run the systems
const pipeline = bitECS.pipe(movementSystem, timeSystem)
//now run the pipleline ever 1000 msec
setInterval(() => {
pipeline(world);
console.log("Position", Position.x[entity001])
scanner.querySelector("#xpos").innerHTML = Position.x[entity001]
console.log("tobj", JSON.stringify(world.time))
timeview.querySelector("#tobj").innerHTML = JSON.stringify(world.time);
}, 1000)
}
con = html`<div style="border: 1px solid green; height: 200px; overflow: scroll;"></div>`
scanner = html`<div> Entity001 current x position: <b id="xpos"></b></div>`
timeview = html`<div>Time obj: <pre id='tobj'></pre></div>`
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.
