porting balls over to test new world

artworld/drawable.js

@@ -1,20 +1,26 @@
 import { Vector2 } from "./math.js";
 import { Color } from "./color.js";
 import { Random } from "./random.js";
+import { World } from "./world.js";
 
 export class Drawable {
   constructor(parent) {
-    this._parent = parent;
+    this._parent = null;
-    this._updates = [];
+    this._world = null;
+    // if parent is provided, set directly, then delegate to parent class
+    if (parent instanceof World) {
+      this._world = parent;
+      this._world.drawable(this);
+    } else if (parent) {
+      this._parent = parent;
+      this._parent.addChild(this);
+    }
     this._fill = parent ? parent._fill : null;
     this._stroke = parent ? parent._stroke : null;
     this._strokeWeight = parent ? parent._strokeWeight : null;
     this._zIndex = parent ? parent._zIndex : null;
     this._posVec = new Vector2(0, 0);
     this._animations = [];
-    if (this._parent) {
-      this._parent.addChild(this);
-    }
   }
 
   copy() {
@@ -37,6 +43,10 @@ export class Drawable {
   }
 
   // setters
+  world(world) {
+    this._world = world;
+    return this;
+  }
 
   fill(color) {
     this._fill = color;
@@ -140,8 +150,10 @@ export class Group extends Drawable {
 
   addChild(drawable) {
     this._children.push(drawable);
+    // probably alraedy true, but make sure
     drawable._parent = this;
-    drawable._world = this._world;
+    // ensure we're in the same world
+    drawable.world(this._world);
     return this;
   }
 

examples/balls.html

@@ -4,7 +4,7 @@
     <canvas id="mainCanvas" width="500" height="500"></canvas>
     <script type="module">
       import {
-        artworld,
+        World,
         Color,
         Pico8,
         Group,
@@ -13,18 +13,18 @@
         Vector2,
         degToRad,
       } from "../artworld/index.js";
-      artworld.bindCanvas("mainCanvas");
+      let world = new World("mainCanvas");
-      window.artworld = artworld;
+      window.world = world;
 
       class Ball extends Circle {
         constructor() {
-          super();
+          super(world);
           this.speed = new Vector2(0, Random.between(9, 15));
         }
 
         update() {
           this.move(this.speed);
-          if (this.worldPos.y > artworld.height + 20) {
+          if (this.worldPos.y > world.height + 20) {
             this.y(-20);
           }
         }
@@ -32,7 +32,7 @@
 
       class GravityBall extends Circle {
         constructor() {
-          super();
+          super(world);
           this.accel = new Vector2(0, 0.5);
           this.speed = Vector2.random(0, 5);
         }
@@ -40,9 +40,9 @@
         update() {
           this.speed = this.speed.add(this.accel);
           this.move(this.speed);
-          if (this.worldPos.y > artworld.height - 10) {
+          if (this.worldPos.y > world.height - 10) {
             this.speed = this.speed.scale(-0.98); // bounce w/ dampening
-            this.y(artworld.height - 10.01);
+            this.y(world.height - 10.01);
           }
         }
       }
@@ -57,7 +57,7 @@
           .radius(10)
           .fill(Pico8.PURPLE);
       }
-      artworld.loopStep();
+      world.loopStep();
     </script>
   </body>
 </html>