Merge pull request #65 from Demonstrandum/devel

Transforms on primitives & new example.

Author: Demonstrandum

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.2.2/lib/BasicCanvas.js
+  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.2.3/lib/BasicCanvas.js
   ```
 - Shapes
   ```
-  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.2.2/lib/BasicShapes.js
+  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.2.3/lib/BasicShapes.js
   ```
 - DOM
   ```
-  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.2.2/lib/BasicDOM.js
+  https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.2.3/lib/BasicDOM.js
   ```
 ### Docs
 
@@ -83,7 +83,7 @@ sketch.loop(frame => {
 
 Drawing a simple sinusoidal progressive wave:
 ```js
-import * as BC from 'https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.2.2/lib/BasicCanvas.js';
+import * as BC from 'https://cdn.jsdelivr.net/gh/Demonstrandum/BasicCanvas@v1.2.3/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.

example/AM_GM_inequality.js

@@ -0,0 +1,152 @@
+import * as BC from '../lib/BasicCanvas.js';
+import { ellipse, line, rectangle } from '../lib/BasicShapes.js';
+
+use(BC);
+
+// Load 'mathcal' font.
+load_font('Parisienne',
+	"url(https://fonts.gstatic.com/s/parisienne/v8/E21i_d3kivvAkxhLEVZpQyhwDw.woff2)");
+
+const a_mean_svg = new Image();
+a_mean_svg.src = './a_mean.svg';
+const g_mean_svg = new Image();
+g_mean_svg.src = './g_mean.svg';
+
+const r = 260
+const G = (a, b) => Math.sqrt(a * b);
+
+const BG = HEX('#fff');
+const COLOUR_A = HEX('#f47').to_rgb();
+const COLOUR_B = HEX('#3bf').to_rgb();
+
+const sketch = canvas_id('sketch');
+window.sketch = sketch;
+sketch.dimensions(600, 400);
+sketch.translate(sketch.width / 2, 3 * sketch.height / 4);
+sketch.scale(1, -1);
+sketch.text_align = 'center'
+
+const dip = -5;
+
+let a = 400;
+let follow = false;
+mouse_down(() => {
+	follow = true;
+}, sketch);
+mouse_up(() => {
+	follow = false;
+}, sketch);
+
+sketch.loop(() => {
+	sketch.background(BG, true);
+
+	if (follow) {
+		a = sketch.mouse.x + r;
+		if (a > 2*r-40)
+			a = 2*r-40;
+		else if (a < 40)
+			a = 40;
+		a = Math.round(a) || 400;
+	}
+	const b = 2*r - a;
+	const g = G(a, b);
+
+	sketch.fill = 'transparent'
+	sketch.stroke = 'black'
+	sketch.stroke_weight = 1;
+	sketch.stroke_dash = [];
+	sketch.render(ellipse(P(0, 0), r));
+	sketch.render(line(P(-r - 20, 0), P(r + 20, 0)));
+
+	sketch.stroke_dash = [4, 5];
+	sketch.render('A', line(P(0, dip), P(0, r)));
+	sketch.render('G', line(P(a-r, dip), P(a-r, g)));
+	sketch.stroke_dash = [8, 5];
+	sketch.render('delta', line(P(0, g), P(a-r, g)));
+
+	sketch.stroke_weight = 0;
+	sketch.fill = 'black';
+	sketch.font = "32px 'Parisienne'";
+	sketch.temp(() => {
+		sketch.unscale();
+		sketch.text('A', P(0, -r - 10));
+		sketch.text('G', P(a-r, -g - 10));
+	});
+
+	sketch.fill = 'transparent';
+	sketch.stroke_dash = [7, 2];
+	sketch.stroke_weight = 2;
+	sketch.stroke = COLOUR_A;
+	sketch.render('a', line(P(-r, dip), P(a-r, dip)));
+	sketch.render(line(P(-r, 0), P(a-r, g)));
+	sketch.stroke = COLOUR_B;
+	sketch.render('b', line(P(a-r, dip), P(a+b-r, dip)));
+	sketch.render(line(P(r, 0), P(a-r, g)));
+
+	sketch.stroke = 'gray';
+	sketch.shape(rectangle(P(a-r, g), 20))
+		.rotate(3*Math.PI/2 - Math.atan(a/g))
+		.render();
+
+	sketch.stroke_weight = 0;
+	sketch.font = "italic 24px 'CMUClassicalSerifItalic'";
+	sketch.fill = COLOUR_A
+	sketch.temp(() => {
+		sketch.unscale();
+		sketch.text('a', Point(a/2-r - 22, 30));
+		sketch.font = "24px 'CMUSerifRoman'";
+		sketch.text(' = ' + a, Point(a/2-r + 22, 30));
+	});
+
+	sketch.fill.a = 100;
+	sketch.render(shape => {
+		shape.vertex(P(-r, 0));
+		shape.vertex(P(a-r, g));
+		shape.vertex(P(a-r, 0));
+		shape.close()
+	});
+	sketch.fill.a = 255;
+
+	sketch.fill = COLOUR_B
+	sketch.temp(() => {
+		sketch.unscale();
+		sketch.text('b', Point(a-r + b/2 - 22, 30));
+		sketch.font = "24px 'CMUSerifRoman'";
+		sketch.text(' = ' + b, Point(a-r + b/2 + 22, 30));
+	});
+
+	sketch.fill.a = 100;
+	sketch.render(shape => {
+		shape.vertex(P(r, 0));
+		shape.vertex(P(a-r, g));
+		shape.vertex(P(a-r, 0));
+		shape.close()
+	});
+	sketch.fill.a = 255;
+
+
+	sketch.temp(() => {
+		sketch.unscale();
+		sketch.context.drawImage(a_mean_svg, -75, -r/2);
+		sketch.context.drawImage(g_mean_svg, a-r + 5, -g/2);
+	});
+});
+
+
+document.body.html`
+	<div id="caption">
+		<p style="font-family: 'CMUSerifRoman', sans-serif">
+			Click and drag to interact with the proof.
+		</p>
+		<p>\[ \frac{a+b}{2} \ge \sqrt{ab} \]</p>
+	</div>
+`;
+
+css`#caption {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	padding-bottom: 40px;
+	margin-top: ${3 * sketch.height / 4}px;
+}`;

example/a_mean.svg

@@ -81,6 +81,7 @@
       <option value="orthographic.js">orthographic.js</option>
       <option value="weak_perspective.js">weak_perspective.js</option>
       <option value="vector_plot.js">vector_plot.js</option>
+      <option value="AM_GM_inequality.js">AM_GM_inequality.js</option>
       <option value="wiggler.js">wiggler.js (Snake with physics)</option>
       <option value="sinusoidal.js">sinusoidal.js</option>
       <option value="joy.js">joy.js</option>

example/g_mean.svg

@@ -91,7 +91,7 @@ sketch.loop(() => {
     Point(0, sketch.corner.y),
     Point(0, sketch.corner.y + sketch.height)));
 
-  sketch.context.setLineDash([4, 5]);
+  sketch.stroke_dash = [4, 5];
   sketch.fill = 'transparent';
   sketch.stroke = ANGLE_COLOUR;
   const cw = ϑ < 0;
@@ -103,7 +103,7 @@ sketch.loop(() => {
   sketch.stroke = Y_COLOUR;
   sketch.render('y-value', line(Point(coord.x, L/2), coord));
 
-  sketch.context.setLineDash([]);
+  sketch.stroke_dash = [];
   sketch.stroke = 'transparent';
 
   sketch.fill = X_COLOUR;

example/index.html

@@ -322,8 +322,22 @@ class PointObj {
 class RGBAObj {
   constructor(r, g, b, a) {
     [this.r, this.g, this.b, this.a] = [r, g, b, a].map(Math.round);
-    this.rgba = [this.r, this.g, this.b, this.a];
-    this.rgb = this.rgba.slice(0, -1);
+  }
+
+  get rgba() {
+    return [this.r, this.g, this.b, this.a];
+  }
+
+  get rgb() {
+    return this.rgba.slice(0, -1);
+  }
+
+  set rgba(arr) {
+    [this.r, this.g, this.b, this.a] = arr;
+  }
+
+  set rgb(arr) {
+    [this.r, this.g, this.b] = arr;
   }
 
   toString() {
@@ -457,8 +471,10 @@ class HEXobj {
       given = hex.split('#').slice(-1)[0];
     } else if (type(hex) === 'array') {
       given = plain(...hex).split('#').slice(-1)[0];
-    } else {
+    } else if (type(hex) === 'number') {
       given = hex.toString(16).padStart(6, '0');
+    } else {
+      given = hex.toString().split('#').slice(-1)[0];
     }
 
     if (given.length === 3 || given.length === 4) {
@@ -490,7 +506,10 @@ class HEXobj {
     const str = chars.join('');
     this.str = '#' + str;
     this.hex = parseInt(str, 16);
-    this.rgb = this.to_rgb();
+  }
+
+  get rgb() {
+    return this.to_rgb();
   }
 
   to_rgb() {
@@ -712,7 +731,7 @@ export const to_rgb = c => {
     // Check rgb
     match = (
       c.match(rgb_regex)  ||
-  	  c.match(rgba_regex)
+      c.match(rgba_regex)
     );
     if (match) {
       if (match[4]) {
@@ -771,7 +790,8 @@ class Shape {
   style(fill = this.canvas.fill,
         stroke = this.canvas.stroke,
         stroke_weight = this.canvas.stroke_weight,
-        stroke_cap = this.canvas.stroke_cap) {
+        stroke_cap = this.canvas.stroke_cap,
+        stroke_dash = this.canvas.stroke_dash) {
     if (stroke_weight === 0) {
       stroke = TRANSPARENT;
     }
@@ -780,6 +800,7 @@ class Shape {
     c.strokeStyle = stroke.toString();
     c.lineWidth = stroke_weight;
     c.lineCap = stroke_cap;
+    c.setLineDash(stroke_dash);
     return this;
   }
 
@@ -896,9 +917,17 @@ class Shape {
         }
       }
     } else {
+      const c = this.canvas.context;
+      c.save()
+      c.translate(this.center.x + this.translation[0],
+                  this.center.y + this.translation[1]);
+      c.scale(this.scaling[0], this.scaling[1]);
+      c.rotate(this.rotation);
+      c.translate(-this.center.x, -this.center.y);
       this.primitive();
       this.style(temp_color);
       this.flesh();
+      c.restore();
       return this;
     }
 
@@ -983,6 +1012,7 @@ class Canvas {
     // Main API properties.
     this.fill = RGBA(255, 255, 255, 0);
     this.stroke = RGB(0, 0, 0);
+    this._stroke_dash = [];
     this._stroke_weight = 1;
     this.stroke_cap = 'butt';
     this.font = '16px sans-serif';
@@ -1029,12 +1059,21 @@ class Canvas {
     this.update_context();
   }
 
+  get stroke_dash() {
+    return this._stroke_dash;
+  }
+
+  set stroke_dash(d) {
+    this.context.setLineDash(d);
+    this._stroke_dash = d;
+  }
+
   get stroke_weight() {
     return this._stroke_weight / Math.max(...(this.stretch).map(e => Math.abs(e)));
   }
 
   set stroke_weight(w) {
-    this.context.lineWidth =w;
+    this.context.lineWidth = w;
     this._stroke_weight = w;
   }
 

example/pendulum_graph.js

@@ -3,7 +3,7 @@
   "name": "basiccanvas",
   "title": "BasicCanvas",
   "description": "Simple JavaScript canvas abstractions.",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "main": "lib/BasicCanvas.js",
   "homepage": "https://github.com/Demonstrandum/BasicCanvas/",
   "author": {