30:T1575,{ const NUM_ELEMENTS = 600; const SPEED_MULTIPLIER = 0.1; const SHAPE_SIZE = 20; const SHAPE_HALF_SIZE = SHAPE_SIZE / 2; // Initialize canvas // let canvas = document.querySelector("canvas"); //let canvasWidth = canvas.width = window.innerWidth; //let canvasHeight = canvas.height = window.innerHeight; let canvasWidth = 500; let canvasHeight = 500; let ctx = canvas.getContext("2d"); //---------------------- // Components //---------------------- // Velocity component class Velocity extends ECSY.Component {} Velocity.schema = { x: { type: ECSY.Types.Number }, y: { type: ECSY.Types.Number } }; // Position component class Position extends ECSY.Component {} Position.schema = { x: { type: ECSY.Types.Number }, y: { type: ECSY.Types.Number } }; // Shape component class Shape extends ECSY.Component {} Shape.schema = { primitive: { type: ECSY.Types.String, default: 'box' } }; // Renderable component class Renderable extends ECSY.TagComponent {} //---------------------- // Systems //---------------------- // MovableSystem class MovableSystem extends ECSY.System { // This method will get called on every frame by default execute(delta, time) { // Iterate through all the entities on the query this.queries.moving.results.forEach(entity => { var velocity = entity.getComponent(Velocity); var position = entity.getMutableComponent(Position); position.x += velocity.x * delta; position.y += velocity.y * delta; if (position.x > canvasWidth + SHAPE_HALF_SIZE) position.x = - SHAPE_HALF_SIZE; if (position.x < - SHAPE_HALF_SIZE) position.x = canvasWidth + SHAPE_HALF_SIZE; if (position.y > canvasHeight + SHAPE_HALF_SIZE) position.y = - SHAPE_HALF_SIZE; if (position.y < - SHAPE_HALF_SIZE) position.y = canvasHeight + SHAPE_HALF_SIZE; }); } } // Define a query of entities that have "Velocity" and "Position" components MovableSystem.queries = { moving: { components: [Velocity, Position] } } // RendererSystem class RendererSystem extends ECSY.System { // This method will get called on every frame by default execute(delta, time) { ctx.globalAlpha = 1; ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvasWidth, canvasHeight); //ctx.globalAlpha = 0.6; // Iterate through all the entities on the query this.queries.renderables.results.forEach(entity => { var shape = entity.getComponent(Shape); var position = entity.getComponent(Position); if (shape.primitive === 'box') { this.drawBox(position); } else { this.drawCircle(position); } }); } drawCircle(position) { ctx.fillStyle = "#888"; ctx.beginPath(); ctx.arc(position.x, position.y, SHAPE_HALF_SIZE, 0, 2 * Math.PI, false); ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = "#222"; ctx.stroke(); } drawBox(position) { ctx.beginPath(); ctx.rect(position.x - SHAPE_HALF_SIZE, position.y - SHAPE_HALF_SIZE, SHAPE_SIZE, SHAPE_SIZE); ctx.fillStyle= "#f28d89"; ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = "#800904"; ctx.stroke(); } } // Define a query of entities that have "Renderable" and "Shape" components RendererSystem.queries = { renderables: { components: [Renderable, Shape] } } // Create world and register the systems on it var world = new ECSY.World(); world .registerComponent(Renderable) .registerComponent(Shape) .registerComponent(Velocity) .registerComponent(Position) .registerSystem(MovableSystem) .registerSystem(RendererSystem); // Some helper functions when creating the components function getRandomVelocity() { return { x: SPEED_MULTIPLIER * (2 * Math.random() - 1), y: SPEED_MULTIPLIER * (2 * Math.random() - 1) }; } function getRandomPosition() { return { x: Math.random() * canvasWidth, y: Math.random() * canvasHeight }; } function getRandomShape() { return { primitive: Math.random() >= 0.5 ? 'circle' : 'box' }; } for (let i = 0; i < NUM_ELEMENTS; i++) { world .createEntity() .addComponent(Velocity, getRandomVelocity()) .addComponent(Shape, getRandomShape()) .addComponent(Position, getRandomPosition()) .addComponent(Renderable) } // Run! function run() { // Compute delta and elapsed time var time = performance.now(); var delta = time - lastTime; // Run all the systems world.execute(delta, time); lastTime = time; requestAnimationFrame(run); } var lastTime = performance.now(); run(); }31:[] 2e:{"title":"Testing ecsyjs","cells":[{"id":0,"value":"md`# Testing ecsyjs`","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"html`\n

Trying out sample code from ECSY

\n Circles and Boxes\n(source)\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"ECSY = import (\"https://cdn.skypack.dev/ecsy\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"canvas = DOM.canvas(500,500)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}