From 5c88d2977d72ac29871d0a91d4558d716f7ebc8e Mon Sep 17 00:00:00 2001 From: Demonstrandum Date: Mon, 25 Mar 2019 23:18:16 +0000 Subject: [PATCH] New version bump. --- README.md | 57 ++++++++++++++++++++++++++++++++++++++++++------- example/tree.js | 40 +++++++++++++++------------------- package.json | 1 + 3 files changed, 67 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 8c9dde5..938ab3b 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.8/lib/BasicCanvas.js + https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.9/lib/BasicCanvas.js ``` - Shapes ``` - https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.8/lib/BasicShapes.js + https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.9/lib/BasicShapes.js ``` - DOM ``` - https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.8/lib/BasicDOM.js + https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.9/lib/BasicDOM.js ``` TODO: Instructions on usage, for now look at the example files (and/or source files), still a small project. @@ -36,14 +36,50 @@ then run with: ``` And go to http://localhost:8000/example/ (for an example file, see the index.html code to switch example). -## Try Yourself -Check out the CodePen: https://codepen.io/wernstrom/project/editor/DKzVaY -Explore the library by making small modifications to the CodePen and/or rewriting it to do something new. +## Quick Examples +![tree.js](https://user-images.githubusercontent.com/26842759/54957430-a7a08580-4f4a-11e9-8928-7477b41ca01e.png) + +[See Animation.](https://canvas.knutsen.co/example/?tree.js) + +```js +import * as BC from '../lib/BasicCanvas.js'; +import {line} from '../lib/BasicShapes.js'; + +use(BC); + +const sketch = canvas_id('sketch'); +sketch.dimensions(400, 400); +sketch.translate(sketch.width / 2, sketch.height / 2); + +sketch.fill = RGB(50, 30, 80); +sketch.stroke = HSL(340, 100, 45, 170); +sketch.stroke_weight = 4; +sketch.stroke_cap = 'round'; + +const branch = (previous, angle, depth, inc, first = true) => { + if (depth < 0) return; + + let next = previous; + if (!first) { + next = Polar(Math.sqrt(depth) * 16, -angle, previous); + sketch.render(line(next, previous)); + } + + branch(next, angle + inc, depth - 1, inc, false); + branch(next, angle - inc, depth - 1, inc, false); +}; + +const tree = P(0, 10); +sketch.loop(frame => { + sketch.background(); + sketch.render(line(P(0, 200), tree)); + branch(tree, Math.PI / 2, 7, 0.6 + Math.sin(frame / 20) / 3); +}); +``` -### Quick Example Drawing a simple sinusoidal progressive wave: ```js -import * as BC from 'https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.3/lib/BasicCanvas.js'; +import * as BC from 'https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.0.9/lib/BasicCanvas.js'; // If running this locally, you need a server running for `import`s to work, (for now). use(BC) // To avoid having to write `BC.` all the time. @@ -84,3 +120,8 @@ If the above file is called something like `sine_wave.js` then the `index.html` ``` Or, you could use the `your_example.js` file found in the example/ folder of the repo. + + +## Try Yourself +Check out the CodePen: https://codepen.io/wernstrom/project/editor/DKzVaY +Explore the library by making small modifications to the CodePen and/or rewriting it to do something new. diff --git a/example/tree.js b/example/tree.js index d098fa8..f27e0a6 100755 --- a/example/tree.js +++ b/example/tree.js @@ -1,39 +1,33 @@ import * as BC from '../lib/BasicCanvas.js'; +import {line} from '../lib/BasicShapes.js'; -const sketch = BC.canvas_id('sketch'); +use(BC); + +const sketch = canvas_id('sketch'); sketch.dimensions(400, 400); sketch.translate(sketch.width / 2, sketch.height / 2); -sketch.fill = BC.RGB(50, 30, 80); -sketch.stroke = BC.HSL(340, 100, 45, 170); +sketch.fill = RGB(50, 30, 80); +sketch.stroke = HSL(340, 100, 45, 170); sketch.stroke_weight = 4; sketch.stroke_cap = 'round'; -const vector = (origin, length, angle) => { - const final = BC.Point( - length * Math.cos(-angle) + origin.x, - length * Math.sin(-angle) + origin.y - ); - sketch.shape(null, shape => { - shape.vertex(origin); - shape.vertex(final); - }); - return final; -}; +const branch = (previous, angle, depth, inc, first = true) => { + if (depth < 0) return; -const branch = (previus, angle, depth, inc) => { - if (depth < 0) { - return; + let next = previous; + if (!first) { + next = Polar(Math.sqrt(depth) * 16, -angle, previous); + sketch.render(line(next, previous)); } - const next = vector(previus, (depth) ** (1 / 2) * 16, angle); - - branch(next, angle + inc, depth - 1, inc); - branch(next, angle - inc, depth - 1, inc); + branch(next, angle + inc, depth - 1, inc, false); + branch(next, angle - inc, depth - 1, inc, false); }; +const tree = P(0, 10); sketch.loop(frame => { sketch.background(); - vector(BC.Point(0, 200), 130, Math.PI / 2); - branch(BC.Point(0, 70), Math.PI / 2, 7, 0.6 + Math.sin(frame / 10) / 3); + sketch.render(line(P(0, 200), tree)); + branch(tree, Math.PI / 2, 7, 0.6 + Math.sin(frame / 20) / 3); }); diff --git a/package.json b/package.json index 2b83e9c..c9126fe 100755 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "xo": { "space": true, "rules": { + "curly": "off", "camelcase": "off", "unicorn/filename-case": "off", "new-cap": "off",