From cf0bee120107b5755af5b3ea5d7e0596ec0f1bc1 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 20:06:11 +0000 Subject: [PATCH] Fixed how fills for non-prims work --- example/double_pendulum.js | 3 ++- example/night_sky.coffee | 5 +++-- example/night_sky.js | 9 +++++---- example/polygons.js | 1 - example/sketchbook.js | 3 ++- example/wiggler.js | 1 + lib/BasicCanvas.js | 33 ++++++++++++++++++++++----------- lib/BasicShapes.js | 3 +++ 8 files changed, 38 insertions(+), 20 deletions(-) diff --git a/example/double_pendulum.js b/example/double_pendulum.js index a4971de..e2adcf9 100755 --- 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 index d4ff446..8b78c8e 100644 --- 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 index 4d39c58..c4e575b 100644 --- a/example/night_sky.js +++ b/example/night_sky.js @@ -1,12 +1,12 @@ // Generated by CoffeeScript 2.3.2 -var sketch, stars; - import * as BasicCanvas from '../lib/BasicCanvas.js'; import { star } from '../lib/BasicShapes.js'; +let sketch, stars; + use(BasicCanvas); sketch = canvas_id('sketch'); @@ -17,8 +17,8 @@ sketch.stroke_weight = 0; stars = []; -sketch.loop(function(frame) { - var alpha, i, len, location, shape, size; +sketch.loop(frame => { + let alpha, i, len, location, shape, size; sketch.background(HEX(0x100044)); if (frame % 3 === 0) { stars.push(Point(Math.random() * sketch.width, Math.random() * sketch.height)); @@ -34,6 +34,7 @@ sketch.loop(function(frame) { if (stars.length > 100) { stars.shift(); } + sketch.fill = '#fff'; sketch.font = 'bold 100px Georgia'; sketch.text('Heilige', P(71, 148)); return sketch.text('Nacht', P(60, 230)); diff --git a/example/polygons.js b/example/polygons.js index 49cf3e9..e1f4924 100644 --- 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 index 4e9e82e..3bc3eb0 100644 --- 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 index 773882b..5a78ea3 100644 --- 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 index 2414514..9bf9ea9 100755 --- 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 index a439959..9869020 100755 --- 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);