From bf99b43bc9916a29f6dcb47358e84334df28b7f1 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 16:35:46 +0000 Subject: [PATCH 01/12] Now docker --- now.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/now.json b/now.json index 8991e85..1a7cc62 100755 --- a/now.json +++ b/now.json @@ -1,6 +1,8 @@ { "name": "BasicCanvas", "alias" : "canvas.knutsen.co", - "version": 2, - "builds": [{ "src": "*.py", "use": "@now/python"}] + "type": "docker", + "features": { + "cloud": "v2" + } } From 2c302ec34a93fef308da72dc2a0882f3b288bb63 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 17:15:13 +0000 Subject: [PATCH 02/12] Use python index --- .nowignore | 1 + Dockerfile | 6 ------ index.py | 9 +++++++++ now.json | 9 +++++---- 4 files changed, 15 insertions(+), 10 deletions(-) create mode 100644 .nowignore delete mode 100755 Dockerfile create mode 100644 index.py diff --git a/.nowignore b/.nowignore new file mode 100644 index 0000000..ec6d3cd --- /dev/null +++ b/.nowignore @@ -0,0 +1 @@ +package.json diff --git a/Dockerfile b/Dockerfile deleted file mode 100755 index 40711b2..0000000 --- a/Dockerfile +++ /dev/null @@ -1,6 +0,0 @@ -FROM python:3.6-alpine -COPY . /app -WORKDIR /app -RUN pip3 install httpserver -EXPOSE 8000 -CMD ["sh", "server.sh"] diff --git a/index.py b/index.py new file mode 100644 index 0000000..92e5860 --- /dev/null +++ b/index.py @@ -0,0 +1,9 @@ +import http.server +import socketserver + +PORT = 8000 + +Handler = http.server.SimpleHTTPRequestHandler + +class handler(Handler): + pass diff --git a/now.json b/now.json index 1a7cc62..2773ab6 100755 --- a/now.json +++ b/now.json @@ -1,8 +1,9 @@ { "name": "BasicCanvas", "alias" : "canvas.knutsen.co", - "type": "docker", - "features": { - "cloud": "v2" - } + "version": 2, + "builds": [ + { "src": "index.py", "use": "@now/python" } + ] } + From c5e48712c7b10e7bedd28a2c8f9ed42fbc77d5ed Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 17:31:44 +0000 Subject: [PATCH 03/12] File routing..? --- index.py | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.py b/index.py index 92e5860..d216627 100644 --- a/index.py +++ b/index.py @@ -6,4 +6,6 @@ Handler = http.server.SimpleHTTPRequestHandler class handler(Handler): - pass + def do_GET(self): + httpd = socketserver.TCPServer(("", 8000), Handler) + httpd.server_forever() From 224a346af6c221454996d64962e608022d394945 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 17:34:31 +0000 Subject: [PATCH 04/12] File routing. --- index.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.py b/index.py index d216627..77c2d11 100644 --- a/index.py +++ b/index.py @@ -7,5 +7,5 @@ class handler(Handler): def do_GET(self): - httpd = socketserver.TCPServer(("", 8000), Handler) - httpd.server_forever() + httpd = socketserver.TCPServer(("", 46500), Handler) + httpd.serve_forever() From f7db4bdc26e706339398fa51679959f19ff088f3 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 17:42:05 +0000 Subject: [PATCH 05/12] Just use SimpleHTTP --- index.py | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/index.py b/index.py index 77c2d11..aa5917e 100644 --- a/index.py +++ b/index.py @@ -1,11 +1,5 @@ import http.server import socketserver -PORT = 8000 +handler = http.server.SimpleHTTPRequestHandler -Handler = http.server.SimpleHTTPRequestHandler - -class handler(Handler): - def do_GET(self): - httpd = socketserver.TCPServer(("", 46500), Handler) - httpd.serve_forever() From 27bc7bc8ff552b471ef95f0f63588af93fa8b6d3 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 17:45:37 +0000 Subject: [PATCH 06/12] change dir --- index.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.py b/index.py index aa5917e..a0bfbe0 100644 --- a/index.py +++ b/index.py @@ -1,5 +1,7 @@ import http.server import socketserver +import os +os.chdir('./example') handler = http.server.SimpleHTTPRequestHandler From bc01bbd65bd2853285708c7e539eeba2ded54c37 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 17:53:41 +0000 Subject: [PATCH 07/12] static rest --- now.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/now.json b/now.json index 2773ab6..fd37292 100755 --- a/now.json +++ b/now.json @@ -3,7 +3,8 @@ "alias" : "canvas.knutsen.co", "version": 2, "builds": [ - { "src": "index.py", "use": "@now/python" } + { "src": "example/*", "use": "@now/static" }, + { "src": "index.py", "use": "@now/python" } ] } From ec448ca749b06b24e274948a943640f9aa63b799 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 17:55:25 +0000 Subject: [PATCH 08/12] static everything --- index.py | 7 ------- now.json | 3 +-- 2 files changed, 1 insertion(+), 9 deletions(-) delete mode 100644 index.py diff --git a/index.py b/index.py deleted file mode 100644 index a0bfbe0..0000000 --- a/index.py +++ /dev/null @@ -1,7 +0,0 @@ -import http.server -import socketserver -import os - -os.chdir('./example') -handler = http.server.SimpleHTTPRequestHandler - diff --git a/now.json b/now.json index fd37292..1025efd 100755 --- a/now.json +++ b/now.json @@ -3,8 +3,7 @@ "alias" : "canvas.knutsen.co", "version": 2, "builds": [ - { "src": "example/*", "use": "@now/static" }, - { "src": "index.py", "use": "@now/python" } + { "src": "example/*", "use": "@now/static" } ] } From 1d203d5c223330078b2301a6a88cb1728bfdc604 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 17:59:13 +0000 Subject: [PATCH 09/12] static everything --- now.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/now.json b/now.json index 1025efd..27ef2e6 100755 --- a/now.json +++ b/now.json @@ -3,6 +3,8 @@ "alias" : "canvas.knutsen.co", "version": 2, "builds": [ + { "src": "*", "use": "@now/static" }, + { "src": "lib/*", "use": "@now/static"}, { "src": "example/*", "use": "@now/static" } ] } From 0ac51d1937486c8ba82214c7d2667331d3cb0434 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 18:34:03 +0000 Subject: [PATCH 10/12] Auto fill --- lib/BasicCanvas.js | 4 ++-- server.sh | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/BasicCanvas.js b/lib/BasicCanvas.js index 0b2078b..2414514 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); @@ -626,8 +626,8 @@ class Canvas { }; this.context.beginPath(); _construction(this.shapes[_name].shape); - this.context.closePath(); this.shapes[_name].shape.fill(this.fill); + this.context.closePath(); return this.shapes[_name].shape; } diff --git a/server.sh b/server.sh index 3f2792e..0a3c6a6 100755 --- a/server.sh +++ b/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 From cf0bee120107b5755af5b3ea5d7e0596ec0f1bc1 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 20:06:11 +0000 Subject: [PATCH 11/12] 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); From fc27733f664f2482a47a531ee2d345fad7a4c784 Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Sat, 2 Mar 2019 20:22:59 +0000 Subject: [PATCH 12/12] Fix filling again... --- README.md | 6 +++--- lib/BasicCanvas.js | 6 ++++-- package.json | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 29939d6..8c9dde5 100755 --- a/README.md +++ b/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. diff --git a/lib/BasicCanvas.js b/lib/BasicCanvas.js index 9bf9ea9..d8ed2db 100755 --- a/lib/BasicCanvas.js +++ b/lib/BasicCanvas.js @@ -422,7 +422,9 @@ class Shape { temp_color = this.canvas.fill; } - if (this.hollow || temp_color.valueOf() === 'transparent') { + if (this.hollow + || temp_color.valueOf() === 'transparent' + || (this.vertices.length < 3 && !this.primitive)) { return; } @@ -432,7 +434,7 @@ class Shape { c.moveTo(...this.vertices[0]); for (const vertex of this.vertices.slice(1)) { c.lineTo(...vertex); - } + } } } else { this.primitive(); diff --git a/package.json b/package.json index 955f337..47df108 100755 --- a/package.json +++ b/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": {