moving in the direction of independent worlds

artworld/drawable.js

@@ -2,18 +2,17 @@ import { Vector2 } from "./math.js";
 import { Color } from "./color.js";
 import { Random } from "./random.js";
 import { World } from "./world.js";
+import { getVal } from "./variables.js";
 
 export class Drawable {
   constructor(parent) {
     this._parent = null;
     this._world = null;
-    // if parent is provided, set directly, then delegate to parent class
+    // if parent is provided, then delegate to parent class
     if (parent instanceof World) {
-      this._world = parent;
-      this._world.drawable(this);
+      parent.registerDrawable(this);
     } else if (parent) {
-      this._parent = parent;
-      this._parent.addChild(this);
+      parent.addChild(this);
     }
     this._fill = parent ? parent._fill : null;
     this._stroke = parent ? parent._stroke : null;
@@ -110,14 +109,14 @@ export class Drawable {
   get worldPos() {
     // offset from parent if needed
     return this._parent
-      ? this._parent.worldPos.add(this._posVec)
-      : this._posVec;
+      ? this._parent.worldPos.add(getVal(this._posVec))
+      : getVal(this._posVec);
   }
 }
 
 export class Group extends Drawable {
-  constructor() {
-    super();
+  constructor(parent) {
+    super(parent);
     this._children = [];
   }
 
@@ -138,22 +137,22 @@ export class Group extends Drawable {
       newGroup._parent = this._parent;
       newGroup._parent.addChild(newGroup);
     }
+    if (this._world) {
+      this._world.registerDrawable(newGroup);
+    }
 
     return newGroup;
   }
 
-  draw() {
-    for (let c of this._children) {
-      c.draw();
-    }
-  }
+  draw() {}
 
   addChild(drawable) {
     this._children.push(drawable);
     // probably alraedy true, but make sure
     drawable._parent = this;
-    // ensure we're in the same world
-    drawable.world(this._world);
+    if (this._world) {
+      this._world.registerDrawable(drawable);
+    }
     return this;
   }
 

artworld/shapes.js

@@ -12,6 +12,10 @@ function makeCopy(Cls, obj, override) {
   if (newObj._parent) {
     newObj._parent.addChild(newObj);
   }
+  // attach to world
+  if (newObj._world) {
+    newObj._world.registerDrawable(newObj);
+  }
   return newObj;
 }
 

artworld/world.js

@@ -29,9 +29,9 @@ export class World {
     return v;
   }
 
-  drawable(thing) {
+  registerDrawable(thing) {
     this.drawables.push(thing);
-    thing._world = this; // set world for access to renderer (TODO: revisit)
+    thing._world = this;
     return thing;
   }
 

examples/circles.html

@@ -4,7 +4,7 @@
     <canvas id="mainCanvas" width="500" height="500"></canvas>
     <script type="module">
       import {
-        artworld,
+        World,
         Color,
         Pico8,
         Group,
@@ -13,8 +13,8 @@
         Vector2,
         degToRad,
       } from "../artworld/index.js";
-      artworld.bindCanvas("mainCanvas");
-      window.artworld = artworld;
+      let world = new World("mainCanvas");
+      window.world = world;
 
       function* color_cycle() {
         while (true) {
@@ -25,14 +25,14 @@
       }
       let cycle = color_cycle();
 
-      let g = new Group().pos(new Vector2(250, 250));
+      let g = new Group(world).pos(new Vector2(250, 250));
       for (let r = 20; r < 100; r += 12) {
         new Circle(g).radius(r).fill(cycle.next().value).z(-r).strokeWeight(0);
       }
       for (let r = 100; r < 250; r += 12) {
         new Circle(g).radius(r).fill(cycle.next().value).z(-r).strokeWeight(0);
       }
-      artworld.draw();
+      world.draw();
     </script>
   </body>
 </html>

examples/copies.html

@@ -4,7 +4,7 @@
     <canvas id="mainCanvas" width="500" height="500"></canvas>
     <script type="module">
       import {
-        artworld,
+        World,
         Color,
         Pico8,
         Group,
@@ -12,17 +12,17 @@
         Random,
         Vector2,
       } from "../artworld/index.js";
-      artworld.bindCanvas("mainCanvas");
-      window.artworld = artworld;
+      let world = new World("mainCanvas");
+      window.world = world;
 
-      let g = new Group().pos(new Vector2(0, 0));
+      let g = new Group(world).pos(new Vector2(0, 0));
       let c = new Circle(g).radius(80).stroke(Pico8.RED).strokeWeight(5);
       for (let i = 0; i < 15; i++) {
         c = c.copy().move(new Vector2(45, 45));
       }
       g.copy().move(new Vector2(200, 0)).stroke(Pico8.GREEN);
       g.copy().move(new Vector2(-200, 0)).stroke(Pico8.BLUE);
-      artworld.draw();
+      world.draw();
     </script>
   </body>
 </html>

examples/lines.html

@@ -3,17 +3,17 @@
   <body>
     <canvas id="mainCanvas" width="800" height="800"></canvas>
     <script type="module">
-      import { artworld, Color, Line, Vector2 } from "../artworld/index.js";
-      artworld.bindCanvas("mainCanvas");
-      window.artworld = artworld;
+      import { World, Color, Line, Vector2 } from "../artworld/index.js";
+      let world = new World("mainCanvas");
+      window.world = world;
       for (let i = 0; i < 10; i++) {
-        new Line()
+        new Line(world)
           .pos(new Vector2(5 * i * 14, 5))
           .to(new Vector2(5 * i * 14, 140))
           .stroke(new Color(20 * i, 50, 50))
           .strokeWeight(1 + i);
       }
-      artworld.draw();
+      world.draw();
     </script>
   </body>
 </html>

examples/rects.html

@@ -4,7 +4,7 @@
     <canvas id="mainCanvas" width="500" height="500"></canvas>
     <script type="module">
       import {
-        artworld,
+        World,
         Color,
         Pico8,
         Group,
@@ -13,16 +13,16 @@
         Vector2,
         degToRad,
       } from "../artworld/index.js";
-      artworld.bindCanvas("mainCanvas");
-      window.artworld = artworld;
+      let world = new World("mainCanvas");
+      window.world = world;
 
       for (let i = 0; i < 50; i++) {
-        new Rect().random(200).fill(Pico8.BLACK).z(10);
-        new Rect().random(150).fill(Pico8.DARK_BLUE).z(15);
-        new Rect().random(100).fill(Pico8.DARK_GREY).z(20);
-        new Rect().random(50).fill(Pico8.LIGHT_GREY).z(30);
+        new Rect(world).random(200).fill(Pico8.BLACK).z(10);
+        new Rect(world).random(150).fill(Pico8.DARK_BLUE).z(15);
+        new Rect(world).random(100).fill(Pico8.DARK_GREY).z(20);
+        new Rect(world).random(50).fill(Pico8.LIGHT_GREY).z(30);
       }
-      artworld.draw();
+      world.draw();
     </script>
   </body>
 </html>

examples/spiral.html

@@ -4,23 +4,24 @@
     <canvas id="mainCanvas" width="800" height="800"></canvas>
     <script type="module">
       import {
-        artworld,
+        World,
         Color,
+        Pico8,
         Group,
         Line,
         Random,
         Vector2,
         degToRad,
       } from "../artworld/index.js";
-      artworld.bindCanvas("mainCanvas");
-      window.artworld = artworld;
+      const world = new World("mainCanvas");
 
       function* spirals() {
         while (true) {
-          let g = new Group();
+          let g = new Group(world);
+          let rc = Random.choice(Object.values(Pico8));
           for (let d = 0; d < 180; d += 10) {
             if (Random.chance(0.9)) {
-              new Line(g).to(Vector2.polar(190 - d, degToRad(d)));
+              new Line(g).to(Vector2.polar(190 - d, degToRad(d))).stroke(rc);
             }
           }
           yield g;
@@ -52,7 +53,7 @@
         yOff: 10,
       });
 
-      artworld.draw();
+      world.draw();
     </script>
   </body>
 </html>