Merge pull request #40 from Demonstrandum/devel

Devel

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`
 </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.

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);
 });

lib/BasicCanvas.js

@@ -291,7 +291,8 @@ class HSLObj {
 
   to_rgb() {
     let r, g, b;
-    const [h, s, l] = [this.h, this.s, this.l];
+    const h = this.h / 360;
+    const [s, l] = [this.s, this.l].map(n => n / 100);
 
     if (s == 0) {
       r = g = b = l;
@@ -324,7 +325,8 @@ class HSVObj {
 
   to_rgb() {
     let r, g, b;
-    const [h, s, v] = [this.h, this.s, this.v];
+    const h = this.h / 360;
+    const [s, v] = [this.s, this.v].map(n => n / 100);
 
     const i = Math.floor(h * 6);
     const f = h * 6 - i;

package.json

@@ -2,7 +2,7 @@
   "name": "basiccanvas",
   "title": "BasicCanvas",
   "description": "Simple JavaScript canvas abstractions.",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "main": "lib/BasicCanvas.js",
   "homepage": "https://github.com/Demonstrandum/BasicCanvas/",
   "author": {
@@ -38,6 +38,7 @@
   "xo": {
     "space": true,
     "rules": {
+      "curly": "off",
       "camelcase": "off",
       "unicorn/filename-case": "off",
       "new-cap": "off",