From aa2885c930add6c8dadd8940a0701b7f7a6c1faa Mon Sep 17 00:00:00 2001
From: James Turk <dev@jpt.sh>
Date: Sun, 9 Mar 2025 23:41:13 -0500
Subject: [PATCH] moving in the direction of independent worlds

---
 artworld/drawable.js  | 31 +++++++++++++++----------------
 artworld/shapes.js    |  4 ++++
 artworld/world.js     |  4 ++--
 examples/circles.html | 10 +++++-----
 examples/copies.html  | 10 +++++-----
 examples/lines.html   | 10 +++++-----
 examples/rects.html   | 16 ++++++++--------
 examples/spiral.html  | 13 +++++++------
 8 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/artworld/drawable.js b/artworld/drawable.js
index 096fe9f..27100a6 100644
--- a/artworld/drawable.js
+++ b/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;
   }
 
diff --git a/artworld/shapes.js b/artworld/shapes.js
index b979860..c8ef009 100644
--- a/artworld/shapes.js
+++ b/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;
 }
 
diff --git a/artworld/world.js b/artworld/world.js
index aa29a73..3c451b0 100644
--- a/artworld/world.js
+++ b/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;
   }
 
diff --git a/examples/circles.html b/examples/circles.html
index 8c5c577..b47ce57 100644
--- a/examples/circles.html
+++ b/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>
diff --git a/examples/copies.html b/examples/copies.html
index 540349d..c268b7d 100644
--- a/examples/copies.html
+++ b/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>
diff --git a/examples/lines.html b/examples/lines.html
index 41b0fb3..402dca9 100644
--- a/examples/lines.html
+++ b/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>
diff --git a/examples/rects.html b/examples/rects.html
index 8174c5d..41c1c0c 100644
--- a/examples/rects.html
+++ b/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>
diff --git a/examples/spiral.html b/examples/spiral.html
index 807d985..bd651c1 100644
--- a/examples/spiral.html
+++ b/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>