Quick start with algovivo simulation
mainTo create a simple simulation in a web environment, import the algovivo.min.js ES6 module and load the algovivo.wasm binary. You initialize a System by passing the WASM instance, configure the simulation geometry (positions, triangles, and muscles) using system.set(), and use SystemViewport to render the results to the DOM.
To run the simulation loop, call system.step() and viewport.render() at a regular interval (e.g., 30 FPS).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="module">
import * as algovivo from "https://cdn.jsdelivr.net/gh/juniorrojas/algovivo@bea663b/build/algovivo.min.js";
async function loadWasm() {
const response = await fetch("https://cdn.jsdelivr.net/gh/juniorrojas/algovivo@bea663b/build/algovivo.wasm");
const wasm = await WebAssembly.instantiateStreaming(response);
return wasm.instance;
}
async function main() {
const system = new algovivo.System({
wasmInstance: await loadWasm()
});
system.set({
pos: [[0, 0], [2, 0], [1, 1]],
triangles: [[0, 1, 2]],
muscles: [[0, 2], [1, 2]]
});
const viewport = new algovivo.SystemViewport({ system });
document.body.appendChild(viewport.domElement);
viewport.render();
let t = 0;
setInterval(() => {
// Example: periodic muscle control
system.a.set([
1,
0.2 + 0.8 * (Math.cos(t * 0.1) * 0.5 + 0.5)
]);
t++;
system.step();
viewport.render();
}, 1000 / 30);
}
main();
</script>
</body>
</html>