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

README.md

@@ -54,7 +54,6 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(svg x y d)` Returns a svg shape.
 - `(color r g b ~a)` Returns a color object.
 - `(hsl h s l ~a)` returns a HSL color object
-- `(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.
 - `(crop ~rect)` Crop canvas to rect.

WORKSHOP.md

@@ -134,7 +134,7 @@ In the previous example, we used the `(clear)` function, which clears the canvas
 ```lisp
 (clear)
 (fill 
-  (frame) "red")
+  frame "red")
 (clear 
   (rect 100 100 300 300))
 ```
@@ -155,7 +155,7 @@ First let's open an image, ideally one in color, and change every pixel of a sel
 
 ### saturation
 
-In the previous example, we increased the saturation of a region of the image, to desaturate an entire image, you can simply omit the  `(frame)` which will select the entire canvas, and set the pixel filter to `saturation` and the value to `0.5`(50% saturation):
+In the previous example, we increased the saturation of a region of the image, to desaturate an entire image, you can simply omit the  `(rect)` which will select the entire canvas, and set the pixel filter to `saturation` and the value to `0.5`(50% saturation):
 
 ```lisp
 (open $path)

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(`(
+    return interpret(this.parse(`((def theme (get-theme))(def frame (get-frame))(${input}))`))
-      ${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_high: '#ffffff',
-    b_med: '#888',
+    b_med: '#72dec2',
-    b_low: '#aaa',
+    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)
     }

examples/basics/benchmark.lisp

@@ -1,4 +1,5 @@
 ; benchmark
+; this file is used to test the library.
 
 ; Basics
 

examples/basics/gradients.lisp

@@ -1,26 +1,19 @@
 ; gradients
 (clear)
-;
+(def gl 
-(def frame-rect (frame))
+  (line 0 0 frame:h frame:h))
-(def radius 
+(def cl1 
-  (frame-rect:m))
+  (gradient gl 
-;
+    (theme:b_med theme:b_high)))
-(def gradient-line 
+(def cl2 
-  (line frame-rect:c 0 frame-rect:c frame-rect:h))
+  (gradient gl 
-;
+    (theme:b_high theme:b_med)))
+(guide gl)
 (fill 
-  (circle frame-rect:c frame-rect:m radius) 
+  (circle frame:m frame:m frame:m) cl1)
-  (gradient gradient-line 
-    ("#72dec2" "white")))
-;
 (fill 
-  (circle frame-rect:c frame-rect:m 
+  (circle frame:m frame:m 
-    (mul radius 0.75)) 
+    (mul frame:m 0.75)) cl2)
-  (gradient gradient-line 
-    ("white" "#72dec2")))
-;
 (fill 
-  (circle frame-rect:c frame-rect:m 
+  (circle frame:m frame:m 
-    (mul radius 0.5)) 
+    (mul frame:m 0.5)) cl1)
-  (gradient gradient-line 
-    ("#72dec2" "white")))

examples/basics/shapes.lisp

@@ -1,42 +1,42 @@
-; shapes
+; display a collection of all shapes.
 (clear)
 (stroke 
-  (rect 0 0 300 300) "red")
+  (rect 0 0 300 300) theme:b_high)
 (stroke 
-  (circle 150 150 150) "white")
+  (circle 150 150 150) theme:b_med)
 (stroke 
-  (ellipse 150 150 75 150) "red")
+  (ellipse 150 150 75 150) theme:b_high)
 (stroke 
-  (line 0 150 300 150) "red")
+  (line 0 150 300 150) theme:b_high)
 (stroke 
-  (text 600 300 60 "hell") "white")
+  (text 600 300 60 "hell") theme:b_med)
 (stroke 
   (arc 600 298 296 
     (rad 180) 
-    (rad -90)) "white")
+    (rad -90)) theme:b_med)
 (stroke 
   (poly 
     (pos 300 300) 
     (pos 600 0) 
-    (pos 600 300)) "red")
+    (pos 600 300)) theme:b_high)
 (transform:move 0 300)
 (fill 
-  (rect 0 0 300 300) "red")
+  (rect 0 0 300 300) theme:b_high)
 (fill 
-  (circle 150 150 150) "white")
+  (circle 150 150 150) theme:b_med)
 (fill 
-  (ellipse 150 150 75 150) "red")
+  (ellipse 150 150 75 150) theme:b_high)
 (fill 
-  (line 0 150 300 150) "red")
+  (line 0 150 300 150) theme:b_high)
 (fill 
-  (text 600 300 60 "hell") "white")
+  (text 600 300 60 "hell") theme:b_med)
 (fill 
   (arc 600 298 296 
     (rad 180) 
-    (rad -90)) "white")
+    (rad -90)) theme:b_med)
 (fill 
   (poly 
     (pos 300 300) 
     (pos 600 0) 
-    (pos 600 300)) "red")
+    (pos 600 300)) theme:b_high)
 (transform:reset)

examples/basics/spiral.lisp

@@ -0,0 +1,38 @@
+; animated recusive spiral
+; by @local_guru 
+(defn rec 
+  (v) 
+  (if 
+    (gt v 0) 
+    ( 
+      ; params 
+      (def spiral-x 
+        (add frame:c 
+          (mul 
+            (cos 
+              (add 
+                (div v 17) 
+                (time 0.001))) 
+            (div v 2)))) 
+      (def spiral-y 
+        (add frame:m 
+          (mul 
+            (sin 
+              (div v 11)) 
+            (div v 2)))) 
+      (def spiral-r 
+        (div v 2)) 
+      ; draw 
+      (stroke 
+        (circle spiral-x spiral-y spiral-r) 
+        (color 114 222 194 0.1) 1) 
+      (rec 
+        (sub v 0.3))))) 
+;
+(defn redraw 
+  () 
+  (
+    (clear) 
+    (rec 300)))
+;
+(on "animate" redraw)

examples/basics/stars.lisp

@@ -1,8 +1,6 @@
 ; stars
 (clear)
 ; times
-
-(def frame-rect (frame))
 (defn times 
   (v f) 
   (
@@ -53,8 +51,8 @@
     () 
     (
       (draw-star 
-        (random 100 frame-rect:w) 
+        (random 100 frame:w) 
-        (random 100 frame-rect:h) 
+        (random 100 frame:h) 
         (random 10 100) 
         (floor 
           (random 3 32))))))

examples/basics/theme.lisp

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

examples/basics/transform.branch.lisp

@@ -0,0 +1,24 @@
+(clear)
+(defn branch 
+  (v) 
+  (if 
+    (gt v 0) 
+    (
+      (transform:scale 0.95) 
+      (stroke 
+        (line 0 0 100 100) theme:b_high 2) 
+      (transform:move 100 100) 
+      (transform:push) 
+      (transform:rotate 
+        (div v 50)) 
+      (branch 
+        (sub v 1)) 
+      (transform:pop) 
+      (transform:push) 
+      (transform:rotate 
+        (div v -50)) 
+      (branch 
+        (sub v 1)) 
+      (transform:pop))))
+(branch 10)
+(transform:reset)

examples/basics/transforms.lisp

@@ -2,18 +2,18 @@
 (clear)
 (transform:move 150 150)
 (fill 
-  (circle 0 0 150) "#ffb545")
+  (circle 0 0 150) theme:b_inv)
 (transform:move 300 0)
 (transform:rotate 
   (rad 90))
 (fill 
-  (circle 0 0 150) "white")
+  (circle 0 0 150) theme:b_high)
 (transform:move 300 0)
 (transform:rotate 
   (rad 90))
 (fill 
-  (circle 0 0 150) "#72dec2")
+  (circle 0 0 150) theme:b_med)
 (transform:move 300 0)
 (fill 
-  (circle 0 0 150) "#555")
+  (circle 0 0 150) theme:b_low)
 (transform:reset)

examples/demo/branch.lisp

@@ -1,24 +0,0 @@
-(resetTransform)
-(clear)
-(defn branch 
-  (v) 
-  (if 
-    (gt v 0) 
-    (
-      (scale 0.95) 
-      (stroke 
-        (line 0 0 100 100) "white" 2) 
-      (move 100 100) 
-      (pushTransform) 
-      (rotate 
-        (div v 50)) 
-      (branch 
-        (sub v 1)) 
-      (popTransform) 
-      (pushTransform) 
-      (rotate 
-        (div v -50)) 
-      (branch 
-        (sub v 1)) 
-      (popTransform)) ))
-(branch 10)

examples/demo/dejong.lisp

@@ -1,33 +0,0 @@
-; dejong attractor
-
-(clear) 
-(defn point (x y color) 
-  (fill (rect x y 1 1) color))
-
-(defn _dejong (x y a b c d)
-  (rest ((point 
-    (add 300 (mul 100 x))
-    (add 400 (mul 100 y))
-    "red")
-  (add (sin (mul a y)) (mul x (cos (mul b x))))
-  (add (mul x (sin (mul x c))) (cos (mul d y)))
-  ))
-)
-
-(defn dejong (r a b c d)
-  (reduce  
-    (range 0 r)
-    (λ (acc val)
-      (first (
-        (_dejong (first acc) (last acc) a b c d)
-      )))
-    (2 1)
-  )
-)
-(benchmark 
-  '(dejong 12800 
-    (random -2 2)
-    (random -2 2)
-    (random -2 2)
-    (random -2 2) 
-))

examples/demo/fog.lisp

@@ -1,26 +0,0 @@
-;
-(resetTransform)
-(clear)
-;
-(def mouse-pos (pos))
-(def prev-pos (pos))
-;
-(defn when-mouse-move (e) (
-  (set mouse-pos "x" e:x)
-  (set mouse-pos "y" e:y)
-))
-;
-(defn when-animate () (
-  (stroke (line prev-pos:x prev-pos:y mouse-pos:x mouse-pos:y) "#72dec2" 4)
-  (move frame-rect:c frame-rect:m)
-  (rotate 0.002)
-  (scale 0.998)
-  (translate frame-rect (pos (mul -1 frame-rect:w) (mul -1 frame-rect:h)))
-  (resetTransform)
-  (fill frame-rect "#00000004")
-  (set prev-pos "x" mouse-pos:x)
-  (set prev-pos "y" mouse-pos:y)
-))
-;
-(on "animate" when-animate)
-(on "mouse-move" when-mouse-move)

examples/demo/spiral.lisp

@@ -1,19 +0,0 @@
-; animated recusive spiral
-; by @local_guru 
-(def frame-rect (frame))
-(defn rec 
-  (v) 
-  (if (gt v 0) 
-    (
-      ; params
-      (def spiral-x (add frame-rect:c (mul (cos (add (div v 17) (time 0.001))) (div v 2))))
-      (def spiral-y (add frame-rect:m (mul (sin (div v 11)) (div v 2))))
-      (def spiral-r (div v 2))
-      ; draw
-      (stroke (circle spiral-x spiral-y spiral-r) "rgba(114,222,194,0.1)" 1) (rec (sub v 0.3))))) 
-;
-(defn redraw () (
-  (clear) 
-  (rec 300)))
-;
-(on "animate" redraw)

examples/events/on-animate.lisp

@@ -2,13 +2,8 @@
 ;
 (def seg-count 50)
 ; 
-(def frame-middle 
-  (div 
-    frame-rect:h 2)) 
-; 
 (def seg-width 
-  (div 
+  (div frame:w seg-count)) 
-    frame-rect:w seg-count)) 
 ;
 (defn elevation 
   (i) 
@@ -18,8 +13,7 @@
         (add 
           (time 0.001) 
           (div i 5))) 
-      (div 
+      (div frame:h 5)) frame:m))
-        frame-rect:h 5)) frame-middle))
 ;
 (defn draw-dash 
   (i) 
@@ -36,8 +30,7 @@
         (add x seg-width) 
         (elevation i)) 
       (gradient 
-        (line 50 0 
+        (line 50 0 frame:w 0) 
-          frame-rect:w 0) 
         ("#ffb545" "#72dec2")) 4 )))
 ;
 (defn redraw 

examples/events/on-osc.lisp

@@ -1,8 +1,6 @@
 ; send OSC msg to port:49162, at "/a"
-(def frame-rect 
-  (frame))
 (def disc 
-  (circle frame-rect:c frame-rect:m 200))
+  (circle frame:c frame:m 200))
 ;
 (defn on-animate 
   () 

examples/projects/spire.lisp

@@ -3,7 +3,7 @@
 (clear)
 ;
 (def gradient-line 
-  (line frame-rect:c 0 frame-rect:c frame-rect:h))
+  (line frame:c 0 frame:c frame:h))
 ;
 (defn draw-circle 
   (e)