set up collision system

Author: Walle Cyril

general/wasm/js/main.js

@@ -1,23 +1,31 @@
 import {d} from "../node_modules/dom99/source/dom99.js";
-import {generateRandomWorld, drawWorld, updateWorld} from "./world.js";
+import {generateRandomWorld, generateSimpleWorld, drawWorld, updateWorld} from "./world.js";
 import {reduceDraw, initializeCanvas} from "./canvas.js";
 
+let drawEverything;
 
-const drawEverything = reduceDraw(d.elements.canvas, [
-    drawWorld
-]);
-
-const world = generateRandomWorld();
+const world = generateSimpleWorld(800, 400) || generateRandomWorld(800, 400);
 
+let animationFrameId = 0;
 const loop = function () {
-    requestAnimationFrame(loop);
+    animationFrameId = requestAnimationFrame(loop);
     drawEverything(world);
     updateWorld(world);
 };
 
 d.start(
     {
-
+        playPause: function () {
+            if (animationFrameId === 0) {
+                animationFrameId = requestAnimationFrame(loop);
+                d.feed(`playPause`, `Pause`);
+            } else {
+                cancelAnimationFrame(animationFrameId);
+                animationFrameId = 0;
+                d.feed(`playPause`, `Play`);
+            }
+
+        }
     }, // functions
     {
 
@@ -29,5 +37,8 @@ d.start(
 
         d.elements.loadingHint.remove();
         initializeCanvas(d.elements.canvas);
-        requestAnimationFrame(loop);
+        drawEverything = reduceDraw(d.elements.canvas, [
+            drawWorld
+        ]);
+        animationFrameId = requestAnimationFrame(loop);
 });

general/wasm/js/world.js

@@ -1,4 +1,10 @@
-export {generateRandomWorld, drawWorld, updateWorld};
+
+/*
+A world is a rectangle
+Inside a world there are living creatures with
+speed, direction, etc
+*/
+export {generateRandomWorld, drawWorld, updateWorld, generateSimpleWorld};
 
 import {
     randomPositiveInt,
@@ -8,6 +14,7 @@ import {
 import {
     fillArrayWithFunctionResult
 } from "../node_modules/utilsac/utility.js";
+import {Collisions, Circle, Polygon, Point} from "../node_modules/collisions/src/Collisions.mjs";
 
 
 /*
@@ -19,11 +26,24 @@ const drawWorld = function (context, world) {
     });
 };
 
-/*
-A world is a rectangle
-Inside a world there are living creatures with
-speed, direction, etc
-*/
+
+
+const generateSimpleWorld = function (width = 300, height = 300) {
+    const world = {
+        width,
+        height,
+        creatures : [{
+            width: 30,
+            height: 20,
+            speedX: 0.5,
+            speedY: 0.1,
+            x: 15,
+            y: 15
+        }]
+    };
+    return world;
+};
+
 const generateRandomWorld = function (width = 300, height = 300) {
     const populationSize = 25;
     const world = {
@@ -39,6 +59,8 @@ const generateRandomWorld = function (width = 300, height = 300) {
     return world;
 };
 
+
+
 const generateRandomCreature = function (maxX, maxY) {
     const maxSize = 5;
     const maxSpeed2d = 1

general/wasm/package-lock.json

@@ -9,6 +9,7 @@
   "license": "ISC",
   "devDependencies": {},
   "dependencies": {
+    "collisions": "^2.0.13",
     "dom99": "^14.4.0",
     "utilsac": "^7.0.0"
   }

general/wasm/package.json

@@ -14,7 +14,7 @@
     <h1>wasm-disabled</h1>
 
     <p data-element="loadingHint">Loading ...</p>
-
+    <button data-function="playPause" data-variable="playPause">Pause</button>
     <canvas data-element="canvas"></canvas>