(frame) and (theme) are now interpreted on run()

desktop/sources/scripts/commander.js

@@ -268,11 +268,15 @@ function Commander (ronin) {
   // Splash
 
   this.splash = `; welcome to ronin
-; v2.29
+; v2.30
 (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 ")
+(def pos-x 
+  (mul frame:c 0.25))
+(def pos-y 
+  (sub frame:m 150))
 (stroke 
-  (svg 185 180 logo-path) "white" 5)`
+  (svg pos-x pos-y logo-path) theme:b_high 5)`
 
   String.prototype.insert = function (s, i) { return [this.slice(0, i), `${s}`, this.slice(i)].join('') }
 }

desktop/sources/scripts/library.js

@@ -71,7 +71,8 @@ function Library (ronin) {
 
   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] }
+    const rgba = `rgba(${r},${g},${b},${a})`
+    return { r, g, b, a, hex, rgba, toString: () => { return rgba }, 0: r, 1: g, 2: b, 3: a, f: [r / 255, g / 255, b / 255, a] }
   }
 
   this.hsl = (h, s, l, a = 1) => { // returns a HSL color object
@@ -80,12 +81,8 @@ function Library (ronin) {
 
   // Frame
 
-  this.frame = () => { // Returns a rect of the frame.
-    return ronin.surface.getFrame()
-  }
-
   this.resize = async (w = ronin.surface.bounds().w, h = ronin.surface.bounds().h, fit = true) => { // Resizes the canvas to target w and h, returns the rect.
-    if (w === this.frame().w && h === this.frame().h) { return }
+    if (w === this['get-frame']().w && h === this['get-frame']().h) { return }
     const rect = { x: 0, y: 0, w, h }
     const a = document.createElement('img')
     const b = document.createElement('img')
@@ -96,7 +93,7 @@ function Library (ronin) {
   }
 
   this.rescale = async (w = 1, h = 1) => { // Rescales the canvas to target ratio of w and h, returns the rect.
-    const rect = { x: 0, y: 0, w: this.frame().w * w, h: this.frame().h * h }
+    const rect = { x: 0, y: 0, w: this['get-frame']().w * w, h: this['get-frame']().h * h }
     const a = document.createElement('img')
     const b = document.createElement('img')
     a.src = ronin.surface.el.toDataURL()
@@ -105,19 +102,19 @@ function Library (ronin) {
     return ronin.surface.draw(b, rect)
   }
 
-  this.crop = async (rect = this.frame()) => { // Crop canvas to rect.
+  this.crop = async (rect = this['get-frame']()) => { // Crop canvas to rect.
     return ronin.surface.crop(rect)
   }
 
-  this.copy = async (rect = this.frame()) => { // Copy a section of the canvas.
+  this.copy = async (rect = this['get-frame']()) => { // Copy a section of the canvas.
     return ronin.surface.copy(rect)
   }
 
-  this.paste = async (copy, rect = this.frame()) => { // Paste a section of the canvas.
+  this.paste = async (copy, rect = this['get-frame']()) => { // Paste a section of the canvas.
     return ronin.surface.paste(copy, rect)
   }
 
-  this.drag = (rect = this.frame(), line = this.line()) => { // Drag a part of the canvas.
+  this.drag = (rect = this['get-frame'](), line = this.line()) => { // Drag a part of the canvas.
     const pos = { x: line.b.x - line.a.x, y: line.b.y - line.a.y }
     const crop = ronin.surface.copy(rect)
     ronin.surface.clear(rect)
@@ -134,7 +131,7 @@ function Library (ronin) {
     ronin.surface.context.drawImage(this.copy(a), b.x, b.y, b.w, b.h)
   }
 
-  this.pick = (shape = this.frame()) => { // Returns the color of a pixel at pos, or of the average of the pixels in rect.
+  this.pick = (shape = this['get-frame']()) => { // Returns the color of a pixel at pos, or of the average of the pixels in rect.
     const rect = shape.w && shape.h ? shape : this.rect(shape.x, shape.y, 1, 1)
     const img = ronin.surface.context.getImageData(rect.x, rect.y, rect.w, rect.h)
     const sum = [0, 0, 0]
@@ -184,12 +181,12 @@ function Library (ronin) {
     return shape
   }
 
-  this.fill = (rect = this.frame(), color) => { // Fills a shape.
+  this.fill = (rect = this['get-frame'](), color) => { // Fills a shape.
     ronin.surface.fill(rect, color)
     return rect
   }
 
-  this.clear = (rect = this.frame()) => { // Clears a rect.
+  this.clear = (rect = this['get-frame']()) => { // Clears a rect.
     ronin.surface.clearGuide(rect)
     ronin.surface.clear(rect)
     return rect
@@ -210,7 +207,7 @@ function Library (ronin) {
 
   // Pixels
 
-  this.pixels = async (fn, q = 1, rect = this.frame()) => {
+  this.pixels = async (fn, q = 1, rect = this['get-frame']()) => {
     if (!fn) { console.warn('Unknown function'); return rect }
     const img = ronin.surface.context.getImageData(rect.x, rect.y, rect.w, rect.h)
     for (let i = 0, loop = img.data.length; i < loop; i += 4) {
@@ -473,7 +470,7 @@ function Library (ronin) {
 
   // Convolve
 
-  this.convolve = (kernel, rect = this.frame()) => {
+  this.convolve = (kernel, rect = this['get-frame']()) => {
     const sigma = kernel.flat().reduce((a, x) => (a + x))
     const kw = kernel[0].length; const kh = kernel.length
     const img = ronin.surface.context.getImageData(rect.x, rect.y, rect.w, rect.h)
@@ -589,5 +586,11 @@ function Library (ronin) {
 
   // Accessors
 
-  this.theme = ronin.theme.active // Get theme values.
+  this['get-theme'] = () => { // Get theme values.
+    return ronin.theme.active
+  }
+
+  this['get-frame'] = () => { // Get theme values.
+    return ronin.surface.getFrame()
+  }
 }

desktop/sources/scripts/lisp.js

@@ -183,7 +183,6 @@ function Lisp (lib = {}) {
   }
 
   this.run = async function (input) {
-    return interpret(this.parse(`(
-      ${input})`))
+    return interpret(this.parse(`((def theme (get-theme))(def frame (get-frame))(${input}))`))
   }
 }

desktop/sources/scripts/ronin.js

@@ -5,9 +5,9 @@ function Ronin () {
     f_med: '#999',
     f_low: '#444',
     f_inv: '#000',
-    b_high: '#72dec2',
-    b_med: '#888',
-    b_low: '#aaa',
+    b_high: '#ffffff',
+    b_med: '#72dec2',
+    b_low: '#aaaaaa',
     b_inv: '#ffb545'
   }
 

desktop/sources/scripts/surface.js

@@ -21,6 +21,8 @@ function Surface (ronin) {
     this._guide.addEventListener('keydown', ronin.onKeyDown, false)
     this._guide.addEventListener('keyup', ronin.onKeyUp, false)
     this._guide.addEventListener('keypress', ronin.onKeyPress, false)
+
+    this.frame = this.getFrame()
   }
 
   this.start = function () {
@@ -33,7 +35,7 @@ function Surface (ronin) {
     context.beginPath()
     this.trace(shape, context)
     context.lineWidth = width
-    context.strokeStyle = color.hex ? color.hex : color
+    context.strokeStyle = color.rgba ? color.rgba : color
     if (isText(shape)) {
       context.textAlign = shape.a
       context.font = `${shape.p}px ${shape.f}`
@@ -54,7 +56,7 @@ function Surface (ronin) {
 
   this.fill = (shape, color = ronin.theme.get('b_high'), context = this.context) => {
     context.beginPath()
-    context.fillStyle = typeof color === 'object' && color.hex ? color.hex : color
+    context.fillStyle = typeof color === 'object' && color.rgba ? color.rgba : color
     this.trace(shape, context)
     if (isText(shape)) {
       context.textAlign = shape.a
@@ -246,6 +248,7 @@ function Surface (ronin) {
     this._guide.height = size.h
     this._guide.style.width = (size.w / this.ratio) + 'px'
     this._guide.style.height = (size.h / this.ratio) + 'px'
+    this.frame = this.getFrame()
     if (fit === true) {
       this.fitWindow(size)
     }