Added arc() shape

desktop/sources/scripts/commander.js

@@ -182,6 +182,7 @@ function Commander (ronin) {
     if (word === 'pos') { return `(pos ${shape.x} ${shape.y})` }
     if (word === 'line') { return `(line ${shape.a.x} ${shape.a.y} ${shape.b.x} ${shape.b.y})` }
     if (word === 'circle') { return `(circle ${shape.cx} ${shape.cy} ${shape.r})` }
+    if (word === 'arc') { return `(arc ${shape.cx} ${shape.cy} ${shape.r} ${shape.sa} ${shape.ea})` }
     if (word === 'x' || word === 'y' || word === 'xy' || word === 'wh') { return `${shape}` }
     return ''
   }
@@ -263,7 +264,7 @@ function Commander (ronin) {
   // Splash
 
   this.splash = `; welcome to ronin
-; v2.25
+; v2.26
 (clear) 
 (def logo-path "M60,60 L195,60 A45,45 0 0,1 240,105 A45,45 0 0,1 195,150 L60,150 M195,150 A45,45 0 0,1 240,195 L240,240 ")
 (stroke 

desktop/sources/scripts/library.js

@@ -3,6 +3,55 @@ function Library (ronin) {
   // Composition: Design programs to be connected to other programs.
   // Parsimony: Write a big program only when it is clear by demonstration that nothing else will do.
 
+  // Shapes
+
+  this.pos = (x = 0, y = 0) => { // Returns a position shape.
+    return { x, y }
+  }
+
+  this.size = (w, h) => { // Returns a size shape.
+    return { w, h }
+  }
+
+  this.rect = (x, y, w, h) => { // Returns a rect shape.
+    return { x, y, w, h, pos: { x, y }, size: { w, h } }
+  }
+
+  this.circle = (cx, cy, r) => { // Returns a circle shape.
+    return { cx, cy, r }
+  }
+
+  this.ellipse = (cx, cy, rx, ry) => { // Returns a ellipse shape.
+    return { cx, cy, rx, ry }
+  }
+
+  this.line = (ax, ay, bx, by) => { // Returns a line shape.
+    return { a: this.pos(ax, ay), b: this.pos(bx, by) }
+  }
+
+  this.poly = (...pos) => { // Returns a poly shape.
+    return pos
+  }
+
+  this.text = (x, y, p, t, a = 'left', f = 'Arial') => { // Returns a text shape.
+    return { x, y, p, t, a, f }
+  }
+
+  this.svg = (x, y, d) => { // Returns a svg shape.
+    return { x, y, d }
+  }
+
+  this.arc = (cx, cy, r, sa, ea) => { // Returns an arc shape.
+    return { cx, cy, r, sa, ea }
+  }
+
+  this.color = (r, g, b, a = 1) => { // Returns a color object.
+    const hex = '#' + ('0' + parseInt(r, 10).toString(16)).slice(-2) + ('0' + parseInt(g, 10).toString(16)).slice(-2) + ('0' + parseInt(b, 10).toString(16)).slice(-2)
+    return { r, g, b, a, hex, toString: () => { return `rgba(${r},${g},${b},${a})` }, 0: r, 1: g, 2: b, 3: a, f: [r / 255, g / 255, b / 255, a] }
+  }
+
+  //
+
   this.import = async (path, shape, alpha = 1) => { // Imports a graphic file with format.
     const img = new Image()
     img.src = path
@@ -125,49 +174,6 @@ function Library (ronin) {
     ronin.surface.context.restore()
   }
 
-  // Shapes
-
-  this.pos = (x = 0, y = 0) => { // Returns a position shape.
-    return { x, y }
-  }
-
-  this.size = (w, h) => { // Returns a size shape.
-    return { w, h }
-  }
-
-  this.rect = (x, y, w, h) => { // Returns a rect shape.
-    return { x, y, w, h, pos: { x, y }, size: { w, h } }
-  }
-
-  this.circle = (cx, cy, r) => { // Returns a circle shape.
-    return { cx, cy, r }
-  }
-
-  this.ellipse = (cx, cy, rx, ry) => { // Returns a ellipse shape.
-    return { cx, cy, rx, ry }
-  }
-
-  this.line = (ax, ay, bx, by) => { // Returns a line shape.
-    return { a: this.pos(ax, ay), b: this.pos(bx, by) }
-  }
-
-  this.poly = (...pos) => { // Returns a poly shape.
-    return pos
-  }
-
-  this.text = (x, y, p, t, a = 'left', f = 'Arial') => { // Returns a text shape.
-    return { x, y, p, t, a, f }
-  }
-
-  this.svg = (x, y, d) => { // Returns a svg shape.
-    return { x, y, d }
-  }
-
-  this.color = (r, g, b, a = 1) => { // Returns a color object.
-    const hex = '#' + ('0' + parseInt(r, 10).toString(16)).slice(-2) + ('0' + parseInt(g, 10).toString(16)).slice(-2) + ('0' + parseInt(b, 10).toString(16)).slice(-2)
-    return { r, g, b, a, hex, toString: () => { return `rgba(${r},${g},${b},${a})` }, 0: r, 1: g, 2: b, 3: a, f: [r / 255, g / 255, b / 255, a] }
-  }
-
   // Actions
 
   this.stroke = (shape, color, thickness = 2) => { // Strokes a shape.
@@ -288,6 +294,14 @@ function Library (ronin) {
     return a % b
   }
 
+  this.rad = (degrees) => { // Convert radians to degrees.
+    return degrees * (Math.PI / 180)
+  }
+
+  this.deg = (radians) => { // Convert degrees to radians.
+    return radians * (180 / Math.PI)
+  }
+
   this.clamp = (val, min, max) => { // Clamps a value between min and max.
     return this.min(max, this.max(min, val))
   }

desktop/sources/scripts/ronin.js

@@ -161,10 +161,16 @@ function Ronin () {
     const circle = {
       cx: this.mouseOrigin.x,
       cy: this.mouseOrigin.y,
-      r: d.toFixed(2),
-      edge: { x: rect.x - rect.w, y: rect.y - rect.h, w: rect.w * 2, h: rect.h * 2 }
+      r: d.toFixed(2)
     }
-    return { x, y, xy, wh, d, line, rect, pos, circle, type, 'is-down': type !== 'mouse-up' ? true : null }
+    const arc = {
+      cx: this.mouseOrigin.x,
+      cy: this.mouseOrigin.y,
+      r: d.toFixed(2),
+      sa: 0,
+      ea: Math.atan2(position.y - this.mouseOrigin.y, position.x - this.mouseOrigin.x).toFixed(2)
+    }
+    return { x, y, xy, wh, d, line, rect, pos, circle, arc, type, 'is-down': type !== 'mouse-up' ? true : null }
   }
 
   // Zoom

desktop/sources/scripts/surface.js

@@ -84,7 +84,9 @@ function Surface (ronin) {
     } else if (isPoly(shape)) {
       this.tracePoly(shape, context)
     }
-    if (isCircle(shape)) {
+    if (isArc(shape)) {
+      this.traceArc(shape, context)
+    } else if (isCircle(shape)) {
       this.traceCircle(shape, context)
     } else if (isEllipse(shape)) {
       this.traceEllipse(shape, context)
@@ -129,6 +131,10 @@ function Surface (ronin) {
     context.arc(circle.cx, circle.cy, circle.r, 0, 2 * Math.PI)
   }
 
+  this.traceArc = function (arc, context) {
+    context.arc(arc.cx, arc.cy, arc.r, arc.sa, arc.ea)
+  }
+
   this.traceEllipse = function (ellipse, context) {
     context.ellipse(ellipse.cx, ellipse.cy, ellipse.rx, ellipse.ry, 0, 2 * Math.PI, false)
   }
@@ -304,6 +310,9 @@ function Surface (ronin) {
   function isCircle (shape) {
     return shape && !isNaN(shape.cx) && !isNaN(shape.cy) && !isNaN(shape.r)
   }
+  function isArc (shape) {
+    return shape && !isNaN(shape.cx) && !isNaN(shape.cy) && !isNaN(shape.r) && !isNaN(shape.sa) && !isNaN(shape.ea)
+  }
   function isEllipse (shape) {
     return shape && !isNaN(shape.cx) && !isNaN(shape.cy) && !isNaN(shape.rx) && !isNaN(shape.ry)
   }