Merge pull request #7 from Demonstrandum/devel

Better shape creation and typeof alternative

example/still_shapes.js

@@ -56,7 +56,7 @@ const d = 50;
 for (let r = 0; r < sketch.width / d; r++) {
   for (let c = 0; c < sketch.height / d; c++) {
     if ((r + c) % 2 === 0) {
-      sketch.shape(null, rectangle(BC.Point(r * d, c * d), d, d));
+      sketch.shape(rectangle(BC.Point(r * d, c * d), d, d));
     }
   }
 }

lib/BasicCanvas.js

@@ -1,7 +1,20 @@
 export const clone = obj => Object.assign(Object.create(Object.getPrototypeOf(obj)), console);
 
-const use = (namespace, global=window) => Object.assign(global, namespace);
-window.use = use;
+export const type = element => {
+  ({}).toString.call(element).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
+};
+
+let _use;
+if (typeof window === 'undefined') {
+  _use = (namespace, global) => Object.assign(global, namespace);
+} else {
+  _use = (namespace, global = window) => Object.assign(global, namespace);
+
+  window.use = _use;
+  window.type = type;
+}
+
+export const use = _use;
 
 export const load_font = (name, path, description) => {
   const font = new FontFace(name, path, description);
@@ -211,11 +224,13 @@ class HEXobj {
 }
 
 export const Point = (x, y) => new PointObj(x, y);
-export const polar = (r, theta, origin = Point(0, 0)) => Point(
+export const Polar = (r, theta, origin = Point(0, 0)) => Point(
   r * Math.cos(theta) + origin.x,
   r * Math.sin(theta) + origin.y
 );
 
+export const [P, point, polar] = [Point, Point, Polar];
+
 export const Color = (r, g = -1, b = -1, a = 255) => {
   if (typeof r === 'string') {
     return new NamedColorObj(r);
@@ -311,7 +326,8 @@ class Shape {
     // TODO: Either redraw all vertices and use built-in fill function,
     //       or, implement own fill function (see: https://stackoverflow.com/questions/31799038/filling-a-polygon)
 
-    // Redraws all vertices, SLOW and BAD, SAD! (tbh, prolly faster than whatever I'd write)
+    // Secretly redraws all vertices,
+    //   SLOW and BAD, SAD! (tbh, prolly faster than whatever I'd write)
     const c = this.canvas.context;
     c.moveTo(...this.vertices[0]);
     for (const vertex of this.vertices.slice(1)) {
@@ -469,18 +485,27 @@ class Canvas {
     return this.color(point, color);
   }
 
-  shape(name, construction) {
-    if (!name) {
-      name = `ImplicitShape${Object.keys(this.shapes).length}`;
+  shape(name, construction = null) {
+    let [_name, _construction] = [null, null];
+    if (construction === null && typeof name === 'function') {
+      _construction = name;
+    } else {
+      _construction = construction;
+    }
+    if (name === null || name === undefined || construction === null) {
+      _name = `ImplicitName${Object.keys(this.shapes).length}`;
+    } else {
+      _name = name;
     }
-    this.shapes[name] = {
-      construction,
-      shape: new Shape(name, this)
+
+    this.shapes[_name] = {
+      draw: _construction,
+      shape: new Shape(_name, this)
     };
     this.context.beginPath();
-    construction(this.shapes[name].shape);
+    _construction(this.shapes[_name].shape);
     this.context.closePath();
-    return this.shapes[name].shape;
+    return this.shapes[_name].shape;
   }
 
   text(string, point, font = this.font, fill = this.fill, storke = this.stroke) {
@@ -526,12 +551,18 @@ class Canvas {
   }
 }
 
-export const canvas = elem => {
-  return new Canvas(elem);
-};
+export const canvas = elem => (
+  new Canvas(elem)
+);
 
-export const canvas_id = id => {
-  return canvas(document.getElementById(id));
-};
+export const canvas_id = id => (
+  canvas(document.getElementById(id))
+);
+
+export const canvas_new = (id, parent_selector = 'body') => {
+  created = document.createElement('canvas');
+  created.id = id;
 
-// new canvas thing...
+  document.querySelector(parent_selector).appendChild(created);
+  return canvas_id(id);
+};