Update demo to use flat API

packages/modeling/src/primitives/arc.js

@@ -7,7 +7,9 @@ import * as path2 from '../geometries/path2/index.js'
 import { isGT, isGTE, isNumberArray } from './commonChecks.js'
 
 /**
+ *
  * Construct an arc in two dimensional space where all points are at the same distance from the center.
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0]] - center of arc
  * @param {number} [options.radius=1] - radius of arc

packages/modeling/src/primitives/circle.js

@@ -7,6 +7,7 @@ import { isGTE } from './commonChecks.js'
 /**
  * Construct a circle in two dimensional space where all points are at the same distance from the center.
  * @see [ellipse]{@link module:modeling/primitives.ellipse} for more options
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0]] - center of circle
  * @param {number} [options.radius=1] - radius of circle

packages/modeling/src/primitives/cube.js

@@ -4,6 +4,7 @@ import { isGTE } from './commonChecks.js'
 /**
  * Construct an axis-aligned solid cube in three dimensional space with six square faces.
  * @see [cuboid]{@link module:modeling/primitives.cuboid} for more options
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0,0]] - center of cube
  * @param {number} [options.size=2] - dimension of cube

packages/modeling/src/primitives/cuboid.js

@@ -5,6 +5,7 @@ import { isNumberArray } from './commonChecks.js'
 
 /**
  * Construct an axis-aligned solid cuboid in three dimensional space.
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0,0]] - center of cuboid
  * @param {Array} [options.size=[2,2,2]] - dimensions of cuboid; width, depth, height

packages/modeling/src/primitives/cylinder.js

@@ -5,6 +5,7 @@ import * as geom3 from '../geometries/geom3/index.js'
 /**
  * Construct a Z axis-aligned cylinder in three dimensional space.
  * @see [cylinderElliptic]{@link module:modeling/primitives.cylinderElliptic} for more options
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0,0]] - center of cylinder
  * @param {number} [options.height=2] - height of cylinder

packages/modeling/src/primitives/cylinderElliptic.js

@@ -11,6 +11,7 @@ import { isGT, isGTE, isNumberArray } from './commonChecks.js'
 
 /**
  * Construct a Z axis-aligned elliptic cylinder in three dimensional space.
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0,0]] - center of cylinder
  * @param {number} [options.height=2] - height of cylinder

packages/modeling/src/primitives/ellipse.js

@@ -11,6 +11,7 @@ import { isGTE, isNumberArray } from './commonChecks.js'
 /**
  * Construct an axis-aligned ellipse in two dimensional space.
  * @see https://en.wikipedia.org/wiki/Ellipse
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0]] - center of ellipse
  * @param {Array} [options.radius=[1,1]] - radius of ellipse, along X and Y

packages/modeling/src/primitives/ellipsoid.js

@@ -9,6 +9,7 @@ import { isGTE, isNumberArray } from './commonChecks.js'
 
 /**
  * Construct an axis-aligned ellipsoid in three dimensional space.
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0,0]] - center of ellipsoid
  * @param {Array} [options.radius=[1,1,1]] - radius of ellipsoid, along X, Y and Z

packages/modeling/src/primitives/geodesicSphere.js

@@ -8,6 +8,7 @@ import { isGTE } from './commonChecks.js'
 
 /**
  * Construct a geodesic sphere based on icosahedron symmetry.
+ * @function
  * @param {object} [options] - options for construction
  * @param {number} [options.radius=1] - target radius of sphere
  * @param {number} [options.frequency=6] - subdivision frequency per face, multiples of 6

packages/modeling/src/primitives/line.js

@@ -3,6 +3,7 @@ import * as path2 from '../geometries/path2/index.js'
 /**
  * Construct a new line in two dimensional space from the given points.
  * The points must be provided as an array, where each element is a 2D point.
+ * @function
  * @param {Array} points - array of points from which to create the path
  * @returns {Path2} new 2D path
  * @alias module:modeling/primitives.line

packages/modeling/src/primitives/polygon.js

@@ -4,7 +4,7 @@ import * as geom2 from '../geometries/geom2/index.js'
  * Construct a polygon in two dimensional space from a list of points, or a list of points and paths.
  *
  * NOTE: The ordering of points is important, and must define a counter clockwise rotation of points.
- *
+ * @function
  * @param {object} options - options for construction
  * @param {Array} options.points - points of the polygon : either flat or nested array of 2D points
  * @param {Array} [options.paths] - paths of the polygon : either flat or nested array of point indexes

packages/modeling/src/primitives/polyhedron.js

@@ -8,6 +8,7 @@ import { isNumberArray } from './commonChecks.js'
  *
  * The faces can define outward or inward facing polygons (orientation).
  * However, each face must define a counterclockwise rotation of vertices which follows the right hand rule.
+ * @function
  * @param {object} options - options for construction
  * @param {Array} options.points - list of points in 3D space
  * @param {Array} options.faces - list of faces, where each face is a set of indexes into the points

packages/modeling/src/primitives/rectangle.js

@@ -6,6 +6,7 @@ import { isNumberArray } from './commonChecks.js'
 
 /**
  * Construct an axis-aligned rectangle in two dimensional space with four sides at right angles.
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0]] - center of rectangle
  * @param {Array} [options.size=[2,2]] - dimension of rectangle, width and length

packages/modeling/src/primitives/roundedCuboid.js

@@ -115,6 +115,7 @@ const stitchSides = (bottomCorners, topCorners) => {
 
 /**
  * Construct an axis-aligned solid cuboid in three dimensional space with rounded corners.
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0,0]] - center of rounded cube
  * @param {Array} [options.size=[2,2,2]] - dimension of rounded cube; width, depth, height

packages/modeling/src/primitives/roundedCylinder.js

@@ -12,6 +12,7 @@ import { cylinder } from './cylinder.js'
 
 /**
  * Construct a Z axis-aligned solid cylinder in three dimensional space with rounded ends.
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0,0]] - center of cylinder
  * @param {number} [options.height=2] - height of cylinder

packages/modeling/src/primitives/roundedRectangle.js

@@ -10,6 +10,7 @@ import { rectangle } from './rectangle.js'
 
 /**
  * Construct an axis-aligned rectangle in two dimensional space with rounded corners.
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0]] - center of rounded rectangle
  * @param {Array} [options.size=[2,2]] - dimension of rounded rectangle; width and length

packages/modeling/src/primitives/sphere.js

@@ -4,6 +4,7 @@ import { isGTE } from './commonChecks.js'
 /**
  * Construct a sphere in three dimensional space where all vertices are at the same distance from the center.
  * @see [ellipsoid]{@link module:modeling/primitives.ellipsoid} for more options
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0,0]] - center of sphere
  * @param {number} [options.radius=1] - radius of sphere

packages/modeling/src/primitives/square.js

@@ -4,6 +4,7 @@ import { isGTE } from './commonChecks.js'
 /**
  * Construct an axis-aligned square in two dimensional space with four equal sides at right angles.
  * @see [rectangle]{@link module:modeling/primitives.rectangle} for more options
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0]] - center of square
  * @param {number} [options.size=2] - dimension of square

packages/modeling/src/primitives/star.js

@@ -29,6 +29,7 @@ const getPoints = (vertices, radius, startAngle, center) => {
 /**
  * Construct a star in two dimensional space.
  * @see https://en.wikipedia.org/wiki/Star_polygon
+ * @function
  * @param {object} [options] - options for construction
  * @param {Array} [options.center=[0,0]] - center of star
  * @param {number} [options.vertices=5] - number of vertices (P) on the star

packages/modeling/src/primitives/torus.js

@@ -10,6 +10,7 @@ import { isGT, isGTE } from './commonChecks.js'
 
 /**
  * Construct a torus by revolving a small circle (inner) about the circumference of a large (outer) circle.
+ * @function
  * @param {object} [options] - options for construction
  * @param {number} [options.innerRadius=1] - radius of small (inner) circle
  * @param {number} [options.outerRadius=4] - radius of large (outer) circle

packages/modeling/src/primitives/triangle.js

@@ -117,6 +117,7 @@ const createTriangle = (A, B, C, a, b, c) => {
  * Construct a triangle in two dimensional space from the given options.
  * The triangle is always constructed CCW from the origin, [0, 0, 0].
  * @see https://www.mathsisfun.com/algebra/trig-solving-triangles.html
+ * @function
  * @param {object} [options] - options for construction
  * @param {string} [options.type='SSS'] - type of triangle to construct; A ~ angle, S ~ side
  * @param {Array} [options.values=[1,1,1]] - angle (radians) of corners or length of sides

packages/utils/regl-renderer/README.md

@@ -63,7 +63,10 @@ The source code of the demo can be found in 'demo-cli.js'
 This module has been tested using several browsers, includig Firefox, Chrome, Safari, etc.
 For an exmple of how to use the module, please see 'demo.es.html'
 
-NOTE: 'demo.es.html' cannot be opened from the local file system. This is due to CORS security limitiations. See the next section.
+NOTE: 
+
+* 'demo.es.html' cannot be opened from the local file system. This is due to CORS security limitiations. See the next section.
+* One needs to link/copy the file `jscad-dpdeling.es.js` in this directory. For example in Linux: `ln -s ../../modeling/dist/jscad-modeling.es.js`.
 
 ### Developers
 

packages/utils/regl-renderer/demo.es.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-  <title>Demo Application</title>
-    <style>
+  <title>Demo Application ES6</title>
+  <style>
       #jscad{
         width: 15cm;
         height: 15cm;
@@ -12,53 +12,15 @@
     </style>
 </head>
 <body>
+  <span>How to use regl-renderer as ES6 Module</span>
   <div id="jscad"></div>
+  <script type="module" id="MODELING" src="model.js"></script>
 
-  <script type="module" id="MODELING">
+
+  <script type="module" id="RENDERING">
 // ********************
-// The design to render.
+// Renderer configuration and initiation.
 // ********************
-import { booleans, colors, primitives } from "./jscad-modeling.es.js"
-
-const { intersect, subtract } = booleans
-const { colorize } = colors
-const { cube, cuboid, line, sphere, star } = primitives
-
-const main = (parameters) => {
-  parameters = {scale: 1}
-  const logo = [
-    colorize([1.0, 0.4, 1.0], subtract(
-      cube({ size: 300 }),
-      sphere({ radius: 200 })
-    )),
-    colorize([1.0, 1.0, 0], intersect(
-      sphere({ radius: 130 }),
-      cube({ size: 210 })
-    ))
-  ]
-
-  const transpCube = colorize([1, 0, 0, 0.25], cuboid({ size: [100 * parameters.scale, 100, 210 + (200 * parameters.scale)] }))
-  const star2D = star({ vertices: 8, innerRadius: 300, outerRadius: 400 })
-  const line2D = colorize([1.0, 0, 0], line([[260, 260], [-260, 260], [-260, -260], [260, -260], [260, 260]]))
-  // some colors are intentionally without alpfa channel to test geom2ToGeometries will add alpha channel
-  const colorChange = [
-    [1, 0, 0, 1],
-    [1, 0.5, 0],
-    [1, 0, 1],
-    [0, 1, 0],
-    [0, 0, 0.7]
-  ]
-  star2D.outlines.forEach((outline, i) => {
-    outline.color = colorChange[i % colorChange.length]
-  })
-
-  return [star2D, line2D, ...logo]
-}
-// HACK... export the results of the design to global space
-window.shapes = main()
-  </script>
-
-  <script type="module">
 import { cameras, commands, controls, entitiesFromSolids, prepareRender } from "./dist/jscad-regl-renderer.es.js"
 
 // HACK... import the results of the design from global space
@@ -230,7 +192,5 @@
 containerElement.onwheel = wheelHandler
 
   </script>
-
-
 </body>
 </html>

packages/utils/regl-renderer/demo.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-  <title>Demo Application</title>
+  <title>Demo Application CommonJS</title>
     <style>
       #jscad{
         width: 15cm;
@@ -12,56 +12,13 @@
     </style>
 </head>
 <body>
-  <script language="javascript" src="./dist/jscad-regl-renderer.min.js" id="RENDERING"></script>
-
+  <span>How to use regl-renderer as CommonJS module</span>
   <div id="jscad"></div>
-
-  <script type="module" id="MODELING">
-// ********************
-// The design to render.
-// ********************
-import { booleans, colors, primitives } from "./jscad-modeling.es.js"
-
-const { intersect, subtract } = booleans
-const { colorize } = colors
-const { cube, cuboid, line, sphere, star } = primitives
-
-const main = (parameters) => {
-  parameters = {scale: 1}
-  const logo = [
-    colorize([1.0, 0.4, 1.0], subtract(
-      cube({ size: 300 }),
-      sphere({ radius: 200 })
-    )),
-    colorize([1.0, 1.0, 0], intersect(
-      sphere({ radius: 130 }),
-      cube({ size: 210 })
-    ))
-  ]
-
-  const transpCube = colorize([1, 0, 0, 0.25], cuboid({ size: [100 * parameters.scale, 100, 210 + (200 * parameters.scale)] }))
-  const star2D = star({ vertices: 8, innerRadius: 300, outerRadius: 400 })
-  const line2D = colorize([1.0, 0, 0], line([[260, 260], [-260, 260], [-260, -260], [260, -260], [260, 260]]))
-  // some colors are intentionally without alpfa channel to test geom2ToGeometries will add alpha channel
-  const colorChange = [
-    [1, 0, 0, 1],
-    [1, 0.5, 0],
-    [1, 0, 1],
-    [0, 1, 0],
-    [0, 0, 0.7]
-  ]
-  star2D.outlines.forEach((outline, i) => {
-    outline.color = colorChange[i % colorChange.length]
-  })
-
-  return [star2D, line2D, ...logo]
-}
-// HACK... export the results of the design to global space
-window.shapes = main()
-  </script>
+  <script type="module" id="MODELING" src="model.js"></script>
 
 
-  <script type="module", id="RENDERING">
+  <script src="./dist/jscad-regl-renderer.min.js"></script>
+  <script type="module" id="RENDERING">
 // ********************
 // Renderer configuration and initiation.
 // ********************

packages/utils/regl-renderer/model.js

@@ -0,0 +1,45 @@
+// ********************
+// The design to render.
+// This file is used in both demo.es.html and demo.html to show that
+// nothing has to be changed by modeling when once changes used API from common global
+// (demo.html) to ES6 Module (demo.es.html)
+// ********************
+import {
+    intersect, subtract,
+    cube, cuboid, line, sphere, star,
+    colorize
+} from './jscad-modeling.es.js';
+
+
+export const main = (parameters) => {
+    parameters = {scale: 1}
+    const logo = [
+        colorize([1.0, 0.4, 1.0], subtract(
+            cube({ size: 300 }),
+            sphere({ radius: 200 })
+        )),
+        colorize([1.0, 1.0, 0], intersect(
+            sphere({ radius: 130 }),
+            cube({ size: 210 })
+        ))
+    ]
+
+    const transpCube = colorize([1, 0, 0, 0.25], cuboid({ size: [100 * parameters.scale, 100, 210 + (200 * parameters.scale)] }))
+    const star2D = star({ vertices: 8, innerRadius: 300, outerRadius: 400 })
+    const line2D = colorize([1.0, 0, 0], line([[260, 260], [-260, 260], [-260, -260], [260, -260], [260, 260]]))
+    // some colors are intentionally without alpfa channel to test geom2ToGeometries will add alpha channel
+    const colorChange = [
+        [1, 0, 0, 1],
+        [1, 0.5, 0],
+        [1, 0, 1],
+        [0, 1, 0],
+        [0, 0, 0.7]
+    ]
+    star2D.outlines.forEach((outline, i) => {
+        outline.color = colorChange[i % colorChange.length]
+    })
+
+    return [star2D, line2D, transpCube, ...logo]
+}
+// HACK... export the results of the design to global space
+window.shapes = main()