Added kinetic bones?!

README.md

@@ -38,20 +38,21 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 
 ## Library
 
+- `(import path shape ~alpha)` Imports a graphic file with format.
+- `(export path ~format ~quality)` Exports a graphic file with format.
+- `(open path ~ratio)` Imports a graphic file and resizes the frame.
+- `(exit ~force)` Exits Ronin.
 - `(pos ~x ~y)` Returns a position shape.
+- `(line ax ay bx by)` Returns a line shape.
 - `(size w h)` Returns a size shape.
 - `(rect x y w h)` Returns a rect shape.
 - `(circle cx cy r)` Returns a circle shape.
 - `(ellipse cx cy rx ry)` Returns a ellipse shape.
-- `(line ax ay bx by)` Returns a line shape.
+- `(arc cx cy r sa ea)` Returns an arc shape.
 - `(poly ...pos)` Returns a poly shape.
 - `(text x y p t ~a ~f)` Returns a text shape.
 - `(svg x y d)` Returns a svg shape.
-- `(arc cx cy r sa ea)` Returns an arc shape.
 - `(color r g b ~a)` Returns a color object.
-- `(import path shape ~alpha)` Imports a graphic file with format.
-- `(export path ~format ~quality)` Exports a graphic file with format.
-- `(open path ~ratio)` Imports a graphic file and resizes the frame.
 - `(frame)` Returns a rect of the frame.
 - `(resize ~w)` Resizes the canvas to target w and h, returns the rect.
 - `(rescale ~w ~h)` Rescales the canvas to target ratio of w and h, returns the rect.
@@ -71,10 +72,9 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(popTransform)` 
 - `(stroke shape color ~thickness)` Strokes a shape.
 - `(fill ~rect)` Fills a shape.
+- `(clear ~rect)` Clears a rect.
 - `(gradient line ~colors 'black'])` Defines a gradient color.
 - `(guide shape color)` Draws a shape on the guide layer.
-- `(clear ~rect)` Clears a rect.
-- `(theme variable ~el)` 
 - `(pixels fn ~q ~rect)` 
 - `(saturation pixel q)` Change the saturation of pixels.
 - `(contrast pixel q)` Change the contrast of pixels.
@@ -137,7 +137,6 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(filepath ~path)` Returns the path of a file.
 - `(dirname ~path)` Returns the name of a folder.
 - `(filename ~path)` Returns the name of a file.
-- `(exit ~force)` Exits Ronin.
 - `(offset a b)` Offsets pos a with pos b, returns a.
 - `(distance a b)` Get distance between positions.
 - `(echo ...args)` Print arguments to interface.
@@ -147,6 +146,7 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(on event f)` Triggers on event.
 - `(test name a b)` 
 - `(benchmark fn)` Logs time taken to execute a function.
+- `(theme)` Get theme values.
 
 <img src='https://raw.githubusercontent.com/hundredrabbits/Ronin/master/PREVIEW2.jpg' width='600'/>
 

desktop/sources/scripts/commander.js

@@ -159,6 +159,10 @@ function Commander (ronin) {
       this.cache = this.cache.replace('$view', `(view $rect $rect)`)
     } else if (word === 'poly') {
       this.cache = this.cache.replace('$poly', `(poly $pos+)`)
+    } else if (word === 'move') {
+      this.cache = this.cache.replace('$move', `(transform:move $wh)`)
+    } else if (word === 'rotate') {
+      this.cache = this.cache.replace('$rotate', `(transform:rotate $a)`)
     }
 
     if (shape[word]) {
@@ -183,7 +187,7 @@ function Commander (ronin) {
     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}` }
+    if (word === 'x' || word === 'y' || word === 'xy' || word === 'wh' || word === 'a') { return `${shape}` }
     return ''
   }
 
@@ -264,7 +268,7 @@ function Commander (ronin) {
   // Splash
 
   this.splash = `; welcome to ronin
-; v2.26
+; v2.28
 (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,12 +3,40 @@ 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.
 
+  // IO
+
+  this.import = async (path, shape, alpha = 1) => { // Imports a graphic file with format.
+    const img = new Image()
+    img.src = path
+    return ronin.surface.draw(img, shape, alpha)
+  }
+
+  this.export = (path, format = 'image/png', quality = 1.0) => { // Exports a graphic file with format.
+    if (!path) { console.warn('Missing export path'); return path }
+    const dataUrl = ronin.surface.el.toDataURL(path.indexOf('.jpg') > -1 ? 'image/jpeg' : path.indexOf('.png') > -1 ? 'image/png' : format, quality)
+    const data = dataUrl.replace(/^data:image\/png;base64,/, '').replace(/^data:image\/jpeg;base64,/, '')
+    fs.writeFileSync(path, data, 'base64')
+    return path
+  }
+
+  this.open = async (path, ratio = 1) => { // Imports a graphic file and resizes the frame.
+    return ronin.surface.open(path, ratio)
+  }
+
+  this.exit = (force = false) => { // Exits Ronin.
+    ronin.source.quit(force)
+  }
+
   // Shapes
 
   this.pos = (x = 0, y = 0) => { // Returns a position shape.
     return { x, y }
   }
 
+  this.line = (ax, ay, bx, by) => { // Returns a line shape.
+    return { a: this.pos(ax, ay), b: this.pos(bx, by) }
+  }
+
   this.size = (w, h) => { // Returns a size shape.
     return { w, h }
   }
@@ -25,8 +53,8 @@ function Library (ronin) {
     return { cx, cy, rx, ry }
   }
 
-  this.line = (ax, ay, bx, by) => { // Returns a line shape.
+  this.arc = (cx, cy, r, sa, ea) => { // Returns an arc shape.
-    return { a: this.pos(ax, ay), b: this.pos(bx, by) }
+    return { cx, cy, r, sa, ea }
   }
 
   this.poly = (...pos) => { // Returns a poly shape.
@@ -41,35 +69,11 @@ function Library (ronin) {
     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
-    return ronin.surface.draw(img, shape, alpha)
-  }
-
-  this.export = (path, format = 'image/png', quality = 1.0) => { // Exports a graphic file with format.
-    if (!path) { console.warn('Missing export path'); return path }
-    const dataUrl = ronin.surface.el.toDataURL(path.indexOf('.jpg') > -1 ? 'image/jpeg' : path.indexOf('.png') > -1 ? 'image/png' : format, quality)
-    const data = dataUrl.replace(/^data:image\/png;base64,/, '').replace(/^data:image\/jpeg;base64,/, '')
-    fs.writeFileSync(path, data, 'base64')
-    return path
-  }
-
-  this.open = async (path, ratio = 1) => { // Imports a graphic file and resizes the frame.
-    return ronin.surface.open(path, ratio)
-  }
-
   // Frame
 
   this.frame = () => { // Returns a rect of the frame.
@@ -141,37 +145,28 @@ function Library (ronin) {
 
   // Transforms
 
-  this.move = (x, y) => {
+  this.transform = {
-    ronin.surface.context.translate(x, y)
+    push: () => { ronin.surface.context.save() },
-  }
+    pop: () => { ronin.surface.context.restore() },
-
+    reset: () => {
-  this.rotate = (angle) => {
-    ronin.surface.context.rotate(angle)
-  }
-
-  this.scale = (w, h) => {
-    ronin.surface.context.scale(w, h === undefined ? w : h)
-  }
-
-  this.transform = (a, b, c, d, e, f) => {
-    // a:hscale b:hskew c:vskew d:vscale e:hmove f:vmove
-    ronin.surface.context.transform(a, b, c, d, e, f)
-  }
-
-  this.setTransform = (a, b, c, d, e, f) => {
-    ronin.surface.context.setTransform(a, b, c, d, e, f)
-  }
-
-  this.resetTransform = () => {
       ronin.surface.context.resetTransform()
+      ronin.surface.guide.resetTransform()
+    },
+    move: (x, y) => {
+      ronin.surface.context.translate(x, y)
+      this.guide(this.line(0, 0, x, y))
+      ronin.surface.guide.translate(x, y)
+    },
+    scale: (w, h) => {
+      ronin.surface.context.scale(w, h === undefined ? w : h)
+      this.guide(this.rect(0, 0, 50 * w, 50 * h))
+      ronin.surface.guide.scale(w, h === undefined ? w : h)
+    },
+    rotate: (a) => {
+      ronin.surface.context.rotate(a)
+      this.guide(this.arc(0, 0, 50, 0, a))
+      ronin.surface.guide.rotate(a)
     }
-
-  this.pushTransform = () => {
-    ronin.surface.context.save()
-  }
-
-  this.popTransform = () => {
-    ronin.surface.context.restore()
   }
 
   // Actions
@@ -186,6 +181,12 @@ function Library (ronin) {
     return rect
   }
 
+  this.clear = (rect = this.frame()) => { // Clears a rect.
+    ronin.surface.clearGuide(rect)
+    ronin.surface.clear(rect)
+    return rect
+  }
+
   this.gradient = (line, colors = ['white', 'black']) => { // Defines a gradient color.
     const gradient = ronin.surface.context.createLinearGradient(line.a.x, line.a.y, line.b.x, line.b.y)
     colors.forEach((color, i) => {
@@ -199,17 +200,6 @@ function Library (ronin) {
     return shape
   }
 
-  this.clear = (rect = this.frame()) => { // Clears a rect.
-    ronin.surface.clearGuide(rect)
-    ronin.surface.clear(rect)
-    return rect
-  }
-
-  this.theme = (variable, el = document.documentElement) => {
-    // ex. (theme "f_main") -> :root { --f_main: "#fff" }
-    return getComputedStyle(el).getPropertyValue(`--${variable}`)
-  }
-
   // Pixels
 
   this.pixels = async (fn, q = 1, rect = this.frame()) => {
@@ -541,10 +531,6 @@ function Library (ronin) {
     return require('path').parse(path).name
   }
 
-  this.exit = (force = false) => { // Exits Ronin.
-    ronin.source.quit(force)
-  }
-
   this.offset = (a, b) => { // Offsets pos a with pos b, returns a.
     a.x += b.x
     a.y += b.y
@@ -592,4 +578,8 @@ function Library (ronin) {
     console.log(`time taken: ${Date.now() - start}ms`)
     return result
   }
+
+  // Accessors
+
+  this.theme = ronin.theme.active // Get theme values.
 }

desktop/sources/scripts/ronin.js

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

desktop/sources/scripts/surface.js

@@ -217,7 +217,7 @@ function Surface (ronin) {
     }
   }
 
-  this.resize = function (size, fit = false) {
+  this.resize = (size, fit = false) => {
     const frame = this.getFrame()
     if (frame.w === size.w && frame.h === size.h) { return }
     console.log('Surface', `Resize: ${size.w}x${size.h}`)
@@ -234,10 +234,6 @@ function Surface (ronin) {
     }
   }
 
-  this.getFrame = function () {
-    return { x: 0, y: 0, w: this.el.width, h: this.el.height, t: 'rect', c: this.el.width / 2, m: this.el.height / 2 }
-  }
-
   this.fitWindow = function (size) {
     const win = require('electron').remote.getCurrentWindow()
     const pad = { w: ronin.commander.isVisible === true ? 400 : 60, h: 60 }
@@ -245,12 +241,16 @@ function Surface (ronin) {
     win.setSize(Math.floor((size.w / this.ratio) + pad.w), Math.floor((size.h / this.ratio) + pad.h), true)
   }
 
-  this.maximize = function () {
+  this.maximize = () => {
     this.resize(this.bounds())
   }
 
-  this.bounds = function () {
+  this.bounds = () => {
-    return { x: 0, y: 0, w: ((window.innerWidth - 60) * this.ratio), h: ((window.innerHeight - 60) * this.ratio), t: 'rect' }
+    return { x: 0, y: 0, w: ((window.innerWidth - 60) * this.ratio), h: ((window.innerHeight - 60) * this.ratio) }
+  }
+
+  this.getFrame = () => {
+    return { x: 0, y: 0, w: this.el.width, h: this.el.height, c: this.el.width / 2, m: this.el.height / 2 }
   }
 
   this.onResize = function () {
@@ -326,10 +326,10 @@ function Surface (ronin) {
     return shape && !isNaN(shape.x) && !isNaN(shape.y) && shape.p && shape.t && shape.f && shape.a
   }
   function isLine (shape) {
-    return shape.a && shape.b && !isNaN(shape.a.x) && !isNaN(shape.a.y) && !isNaN(shape.b.x) && !isNaN(shape.b.y)
+    return shape && shape.a && shape.b && !isNaN(shape.a.x) && !isNaN(shape.a.y) && !isNaN(shape.b.x) && !isNaN(shape.b.y)
   }
   function isPoly (shape) {
-    return shape[0] && shape[1] && !isNaN(shape[0].x) && !isNaN(shape[0].y) && !isNaN(shape[1].x) && !isNaN(shape[1].y)
+    return shape && shape[0] && shape[1] && !isNaN(shape[0].x) && !isNaN(shape[0].y) && !isNaN(shape[1].x) && !isNaN(shape[1].y)
   }
 
   function fitRect (image, container) {

examples/basics/gradients.lisp

@@ -1,6 +1,7 @@
 ; gradients
 (clear)
 ;
+(def frame-rect (frame))
 (def radius 
   (frame-rect:m))
 ;

examples/basics/theme.lisp

@@ -0,0 +1,29 @@
+; display color from the theme.
+; ex: theme:f_high
+(clear) 
+(fill 
+  (frame) theme:background)
+(def color-box 
+  (div 
+    (:h 
+      (frame)) 10))
+(defn print-value 
+  (item id) 
+  (
+    (def box-y 
+      (add 
+        (mul id color-box) 
+        (div color-box 2))) 
+    (fill 
+      (circle color-box box-y 
+        (div color-box 2)) item) 
+    (fill 
+      (text 140 box-y 30 id) "white") 
+    (fill 
+      (text 200 box-y 30 
+        (of 
+          (keys theme) id)) "white") 
+    (fill 
+      (text 400 box-y 30 item) "white")))
+(map 
+  (values theme) print-value)

examples/misc/theme.lisp

@@ -1,37 +0,0 @@
-; theme
-; reads color from the theme.
-(clear) 
-(def col 
-  (λ 
-    (i) 
-    (of 
-      (
-        (theme "f_high") 
-        (theme "f_med") 
-        (theme "f_low") 
-        (theme "f_inv") 
-        (theme "b_high") 
-        (theme "b_med") 
-        (theme "b_low") 
-        (theme "b_inv")) 
-      (mod i 8)))) 
-(def rec 
-  (λ 
-    (v i) 
-    (if 
-      (gt v 0) 
-      (
-        (fill 
-          (circle 
-            (add 
-              (div 
-                frame-rect:w 1.6) 
-              (mul 1.5 v)) 
-            (mul 10 v) 
-            (mul v 
-              (div v 5))) 
-          (col i)) 
-        (rec 
-          (sub v 3) 
-          (add i 1)))))) 
-(rec 40 0)