Merge pull request #35 from Demonstrandum/devel

Devel

.nowignore

@@ -0,0 +1 @@
+package.json

README.md

@@ -5,15 +5,15 @@ A friendlier way interact with the canvas.
 jsdelivr CDN (use this to import):
 - Canvas
   ```
-  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.6/lib/BasicCanvas.js
+  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.8/lib/BasicCanvas.js
   ```
 - Shapes
   ```
-  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.6/lib/BasicShapes.js
+  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.8/lib/BasicShapes.js
   ```
 - DOM
   ```
-  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.6/lib/BasicDOM.js
+  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.8/lib/BasicDOM.js
   ```
 
 TODO: Instructions on usage, for now look at the example files (and/or source files), still a small project.

example/double_pendulum.js

@@ -74,7 +74,6 @@ css`
 `;
 
 const BG = HEX('#dfcbeb');
-sketch.fill = HEX('#000000aa');
 sketch.stroke_cap = 'round';
 
 let coord_1 = Point(0, L_1);
@@ -83,6 +82,7 @@ const trail = [];
 
 sketch.loop(() => {
   sketch.background(BG);
+  sketch.fill = 'transparent';
   sketch.shape('trail', shape => {
     sketch.stroke_weight = 1;
     let alpha = 1;
@@ -97,6 +97,7 @@ sketch.loop(() => {
   }
 
   sketch.stroke_weight = 2.5;
+  sketch.fill = HEX('#000000aa');
   sketch.stroke = HEX('#000');
   sketch.shape('origin', ellipse(Point(0, 0), 3));
   sketch.shape('harnes', line(Point(0, 0), coord_1));

example/night_sky.coffee

@@ -18,14 +18,15 @@ sketch.loop (frame) ->
   alpha = 0
   for location in stars
     size = alpha / 40
-    shape = sketch.render star location, 4, 5 + size, 5
-    shape.fill RGBA 255, 255, 130, alpha
+    sketch.fill = RGBA 255, 255, 130, alpha
+    sketch.render star location, 4, 5 + size, 5
 
     alpha += 255 / stars.length
 
   if stars.length > 100
     stars.shift()
 
+  sketch.fill = '#fff'
   sketch.font = 'bold 100px Georgia'
   sketch.text 'Heilige', P 71, 148
   sketch.text 'Nacht', P 60, 230

example/polygons.js

@@ -8,7 +8,6 @@ canvas.dimensions(400, 400);
 canvas.translate(canvas.width / 2, canvas.height / 2);
 canvas.scale(40, 40);
 
-canvas.fill = BC.HEX('#ccc');
 canvas.stroke = BC.HEX('#111');
 canvas.font = '12px monospace';
 

example/sketchbook.js

@@ -8,7 +8,6 @@ canvas.scale(10, 10);
 canvas.stroke = BC.HEX`#a9f`;
 canvas.stroke_weight = 20;
 canvas.stroke_cap = 'round';
-canvas.fill = BC.HEX('#fafafa');
 canvas.font = '12px monospace';
 
 let vertices = [];
@@ -23,12 +22,14 @@ BC.mouse_up(() => {
   vertices = [];
 }, canvas);
 
+canvas.fill = BC.HEX('#fafafa');
 canvas.background();
 canvas.loop(() => {
   if (drawing) {
     vertices.push(canvas.mouse);
   }
 
+  canvas.fill = 'transparent';
   canvas.shape('path', shape => {
     for (const vertex of vertices) {
       shape.vertex(vertex);

example/wiggler.js

@@ -9,6 +9,7 @@ const death   = new Audio('https://freesound.org/data/previews/190/190843_329661
 
 BC.css`body, html { overflow: hidden; }`;
 canvas.dimensions(window.innerWidth, window.innerHeight);
+canvas.stroke_cap = 'round';
 
 class Snake {
   constructor(name) {

lib/BasicCanvas.js

@@ -337,6 +337,7 @@ class Shape {
 
     this.vertices = [];
     this.center = Point(0, 0);
+    this.hollow = false;
   }
 
   flesh() {
@@ -354,7 +355,7 @@ class Shape {
       stroke = 'transparent';
     }
     const c = this.canvas.context;
-    c.fillStyle = fill.toString();
+    c.fillStyle = (this.hollow) ? 'transparent' : fill.toString();
     c.strokeStyle = stroke.toString();
     c.lineWidth = stroke_weight;
     c.lineCap = stroke_cap;
@@ -421,11 +422,19 @@ class Shape {
       temp_color = this.canvas.fill;
     }
 
+    if (this.hollow
+     || temp_color.valueOf() === 'transparent'
+     || (this.vertices.length < 3 && !this.primitive)) {
+      return;
+    }
+
     if (this.primitive === null) {
-      const c = this.canvas.context;
-      c.moveTo(...this.vertices[0]);
-      for (const vertex of this.vertices.slice(1)) {
-        c.lineTo(...vertex);
+      if (this.vertices.length > 0) {
+        const c = this.canvas.context;
+        c.moveTo(...this.vertices[0]);
+        for (const vertex of this.vertices.slice(1)) {
+          c.lineTo(...vertex);
+      	}
       }
     } else {
       this.primitive();
@@ -456,7 +465,7 @@ class Canvas {
     this.data = this.image_data.data;
 
     // Main API properties.
-    this.fill = RGB(255, 255, 255);
+    this.fill = RGBA(255, 255, 255, 0);
     this.stroke = RGB(0, 0, 0);
     this._stroke_weight = 1;
     this.stroke_cap = 'butt';
@@ -620,15 +629,19 @@ class Canvas {
       _name = name;
     }
 
+    const SHAPE = new Shape(_name, this);
     this.shapes[_name] = {
       draw: _construction,
-      shape: new Shape(_name, this)
+      shape: SHAPE
     };
     this.context.beginPath();
-    _construction(this.shapes[_name].shape);
+    _construction(SHAPE);
     this.context.closePath();
-    this.shapes[_name].shape.fill(this.fill);
-    return this.shapes[_name].shape;
+
+    if (this.fill !== 'transparent' && SHAPE.primitive === null) {
+      SHAPE.fill();
+    }
+    return SHAPE;
   }
 
   render(...args) {

lib/BasicShapes.js

@@ -16,6 +16,7 @@ export const ellipse = (point, w, h = null, fill = null, stroke = null) => shape
 };
 
 export const line = (origin, position) => shape => {
+  shape.hollow = true;
   shape.vertex(origin);
   shape.vertex(position);
 };
@@ -50,6 +51,7 @@ export const polar_line = (mag, angle, origin = BC.Point(0, 0)) => shape => {
 };
 
 export const arrow = (mag, angle, origin = BC.Point(0, 0), headsize = 1 / 5) => shape => {
+  shape.hollow = true;
   polar_line(mag, angle, origin)(shape);
   const arrow_angle = 2.4;
   const point = BC.Polar(mag, angle, origin);
@@ -60,6 +62,7 @@ export const arrow = (mag, angle, origin = BC.Point(0, 0), headsize = 1 / 5) =>
 };
 
 export const vector = (point, origin = BC.Point(0, 0), headsize = 1 / 5) => shape => {
+  shape.hollow = true;
   line(origin, point)(shape);
   const arrow_angle = 2.4;
   const length = point.length(origin);

now.json

@@ -2,5 +2,10 @@
   "name": "BasicCanvas",
   "alias" : "canvas.knutsen.co",
   "version": 2,
-  "builds": [{ "src": "*.py", "use": "@now/python"}]
+  "builds": [
+    { "src": "*", "use": "@now/static" },
+    { "src": "lib/*", "use": "@now/static"},
+    { "src": "example/*", "use": "@now/static" }
+  ]
 }
+

package.json

@@ -2,7 +2,7 @@
   "name": "basiccanvas",
   "title": "BasicCanvas",
   "description": "Simple JavaScript canvas abstractions.",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "main": "lib/BasicCanvas.js",
   "homepage": "https://github.com/Demonstrandum/BasicCanvas/",
   "author": {

server.sh

@@ -1,3 +1,3 @@
 #!/bin/sh
 echo "Go to: http://localhost:8000/example"
-python3 -m http.server 8000 &> server.log
+python3 -m http.server 8000