added some docs and other stuff

demos/demo1.html

@@ -10,14 +10,16 @@
   <canvas id="lightingCanvas" width="800" height="600"></canvas>
   <script>
 
+    // Pull out the Scene, Polygon, Light, and SceneManager classes from the ANVIL object
+    const { Scene, Polygon, Light, SceneManager } = ANVIL;
+
+    // get the canvas
     const lightingCanvas = document.getElementById("lightingCanvas");
+
+    // create a scene with lighting and FPS monitoring enabled
     const lightingScene = new Scene({
-      width: 800,
-      height: 600,
-      canvas: lightingCanvas,
       lighting: true,
       fpsMonitoringEnabled: true,
-      start: true,
     });
 
     // Create and add polygons
@@ -34,11 +36,18 @@
     lightingScene.addObject(polygon2);
 
     // Create and add lights
+    // 1 light at [50, 50] with radius 100, strength 0.8 and colored white, 1 at [250, 250] with radius 150, strength 0.6 and colored white
     const light1 = new Light([50, 50], 100, 0.8, [255, 255, 255]);
     const light2 = new Light([250, 250], 150, 0.6, [255, 255, 255]);
 
     lightingScene.addLight(light1);
     lightingScene.addLight(light2);
+
+    // Create a SceneManager and pass it the canvas and scene
+    var manager = new SceneManager({
+      canvas: lightingCanvas,
+      initialScene: lightingScene,
+    });
   </script>
 </body>
 </html>

demos/demo2.html

@@ -70,4 +70,4 @@
     moveRight.activate();
   </script>
 </body>
-</html>
+</html>

docs/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

docs/assets/highlight.css

@@ -0,0 +1,120 @@
+:root {
+    --light-hl-0: #800000;
+    --dark-hl-0: #808080;
+    --light-hl-1: #800000;
+    --dark-hl-1: #569CD6;
+    --light-hl-2: #000000FF;
+    --dark-hl-2: #D4D4D4;
+    --light-hl-3: #E50000;
+    --dark-hl-3: #9CDCFE;
+    --light-hl-4: #0000FF;
+    --dark-hl-4: #CE9178;
+    --light-hl-5: #000000;
+    --dark-hl-5: #D4D4D4;
+    --light-hl-6: #0000FF;
+    --dark-hl-6: #569CD6;
+    --light-hl-7: #0070C1;
+    --dark-hl-7: #4FC1FF;
+    --light-hl-8: #795E26;
+    --dark-hl-8: #DCDCAA;
+    --light-hl-9: #001080;
+    --dark-hl-9: #9CDCFE;
+    --light-hl-10: #098658;
+    --dark-hl-10: #B5CEA8;
+    --light-hl-11: #A31515;
+    --dark-hl-11: #CE9178;
+    --light-hl-12: #267F99;
+    --dark-hl-12: #4EC9B0;
+    --light-hl-13: #008000;
+    --dark-hl-13: #6A9955;
+    --light-code-background: #FFFFFF;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
+    --code-background: var(--dark-code-background);
+} }
+
+:root[data-theme='light'] {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
+    --code-background: var(--light-code-background);
+}
+
+:root[data-theme='dark'] {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
+    --code-background: var(--dark-code-background);
+}
+
+.hl-0 { color: var(--hl-0); }
+.hl-1 { color: var(--hl-1); }
+.hl-2 { color: var(--hl-2); }
+.hl-3 { color: var(--hl-3); }
+.hl-4 { color: var(--hl-4); }
+.hl-5 { color: var(--hl-5); }
+.hl-6 { color: var(--hl-6); }
+.hl-7 { color: var(--hl-7); }
+.hl-8 { color: var(--hl-8); }
+.hl-9 { color: var(--hl-9); }
+.hl-10 { color: var(--hl-10); }
+.hl-11 { color: var(--hl-11); }
+.hl-12 { color: var(--hl-12); }
+.hl-13 { color: var(--hl-13); }
+pre, code { background: var(--code-background); }