Fixed how fills for non-prims work

Demonstrandum · Mar 2, 2019 · cf0bee1 · cf0bee1
1 parent 0ac51d1
commit cf0bee1
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 20 deletions.
diff --git a/example/double_pendulum.js b/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));

diff --git a/example/night_sky.coffee b/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
diff --git a/example/night_sky.js b/example/night_sky.js
diff --git a/example/polygons.js b/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';
 

diff --git a/example/sketchbook.js b/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);

diff --git a/example/wiggler.js b/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) {

diff --git a/lib/BasicCanvas.js b/lib/BasicCanvas.js
@@ -1,4 +1,4 @@
---// Basic semi-related tools.
+// Basic semi-related tools.
 export const clone = obj => Object.assign(Object.create(Object.getPrototypeOf(obj)), obj);
 Object.prototype.clone = function () {
   return clone(this);
@@ -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,17 @@ class Shape {
       temp_color = this.canvas.fill;
     }
 
+    if (this.hollow || temp_color.valueOf() === 'transparent') {
+      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 +463,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 +627,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);
-    this.shapes[_name].shape.fill(this.fill);
+    _construction(SHAPE);
     this.context.closePath();
-    return this.shapes[_name].shape;
+
+    if (this.fill !== 'transparent' && SHAPE.primitive === null) {
+      SHAPE.fill();
+    }
+    return SHAPE;
   }
 
   render(...args) {

diff --git a/lib/BasicShapes.js b/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);