Skip to content

Commit 77a11bb

Browse files
authored
Update README.md
1 parent aa646a2 commit 77a11bb

File tree

1 file changed

+92
-2
lines changed

1 file changed

+92
-2
lines changed

README.md

Lines changed: 92 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,102 @@ The engine provides an efficient way to simulate and visualize complex systems w
1919
- **Mouse Interaction**: Drag and release entities with realistic forces applied, such as spring pullback and friction.
2020
- **Chart Visualization**: Real-time visualization of entity properties (position, velocity, and force) using Chart.js, allowing you to observe the effect of forces over time.
2121

22+
### Usage
23+
24+
Check `src/main.ts`
25+
26+
```ts
27+
// Engine
28+
import { AnimationEngine } from "./engine";
29+
30+
// ECS - Core
31+
import { MovementSystem, FrictionSystem } from "./systems";
32+
import { BoxEntity, AnchorEntity } from "./entities";
33+
34+
// Specialized Systems and Entities
35+
import { MouseForceSystem, DOMUpdateSystem } from "./dom";
36+
import { SpringEntity, SpringPhysicsSystem } from "./spring";
37+
import { ChartSystem } from "./chart";
38+
39+
//
40+
// -- Entities --
41+
//
42+
43+
// Create the box entity
44+
const boxElement = document.getElementById("box1") as HTMLElement;
45+
const boxEntity = new BoxEntity(boxElement, { x: 100, y: 100 }, "box1");
46+
47+
// Creating a fixed anchor
48+
const anchorEntity = new AnchorEntity({ x: 100, y: 100 }, "anchor");
49+
50+
// Create a spring entity that connects box1 and anchor
51+
const springEntity = new SpringEntity(boxEntity, anchorEntity, 0.2, 0.05, 1.0);
52+
53+
// Create second box entity
54+
const boxElement2 = document.getElementById("box2") as HTMLElement;
55+
const boxEntity2 = new BoxEntity(boxElement2, { x: 250, y: 100 }, "box2");
56+
57+
// Creating the spring force connecting box and box2
58+
const springEntity2 = new SpringEntity(boxEntity, boxEntity2, 0.2, 0.05, 2.0);
59+
60+
// Create third box entity
61+
const boxElement3 = document.getElementById("box3") as HTMLElement;
62+
const boxEntity3 = new BoxEntity(boxElement3, { x: 400, y: 100 }, "box3");
63+
64+
// Creating the spring force connecting box2 and box3
65+
const springEntity3 = new SpringEntity(boxEntity2, boxEntity3, 0.1, 0.05, 1.0);
66+
67+
//
68+
// --- Systems ---
69+
//
70+
71+
// Set up the movement system (handles physics and movement)
72+
const movementSystem = new MovementSystem();
73+
74+
// Creating the friction component and system
75+
const frictionSystem = new FrictionSystem();
76+
77+
// Spring physics system
78+
const springPhysicsSystem = new SpringPhysicsSystem();
79+
80+
// Set up the mouse force system (handles the spring-like dragging effect)
81+
const mouseForceSystem = new MouseForceSystem(0.2, 0.1); // Drag strength and damping
82+
83+
// Set up the DOM update system (handles syncing the DOM with the entity position)
84+
const domUpdateSystem = new DOMUpdateSystem();
85+
86+
//
87+
// -- Engine --
88+
//
89+
90+
// Create the ECS engine
91+
const engine = new AnimationEngine();
92+
93+
// Add Entities to the engine
94+
engine.addEntity(anchorEntity);
95+
engine.addEntity(boxEntity);
96+
engine.addEntity(boxEntity2);
97+
engine.addEntity(boxEntity3);
98+
engine.addEntity(springEntity);
99+
engine.addEntity(springEntity2);
100+
engine.addEntity(springEntity3);
101+
102+
// Add systems to the engine
103+
engine.addSystem(springPhysicsSystem);
104+
engine.addSystem(frictionSystem);
105+
engine.addSystem(mouseForceSystem);
106+
engine.addSystem(movementSystem);
107+
engine.addSystem(domUpdateSystem);
108+
109+
// Start the engine
110+
engine.start();
111+
```
112+
22113
### Getting Started
23114

24115
#### Prerequisites
25116

26-
- **Node.js** (v12 or higher)
27-
- **npm** (v6 or higher)
117+
- **Bun**
28118

29119
#### Installation
30120

0 commit comments

Comments
 (0)