Improved examples

README.txt

@@ -27,13 +27,6 @@ Project  Run              ^R
 Project  Re-Indent        ^Shift+I
 Project  Clean            Escape
 
-Example
-
-(clear)
-(stroke 
-  (rect 30 30 100 100) "red" 2)
-(export)
-
 Helpers
 
 Ronin helpers are keywords that facilitates adding coordinates from the canvas into your script. The currently supported helpers are $rect, $pos, $line, $circle & $arc. Holding right-click while using a $helper will run the script as the mouse is injecting coordinates into the script. Paste the following script, and trace a shape in the canvas:
@@ -56,15 +49,12 @@ Import/Export
 
 To save an image in memory, open an image file with Ronin, or drag an image file on the window. You will then be able to import it by using the file image's name. If the image file is `preview.png`, you can import it as follow:
 
-; import image at position
 (import $path 
   (pos 100 100))
 
-; import image at position, with size
 (import "preview.jpg" 
   (rect 100 100 400 400))
 
-; export
 (export)
 
 Library

examples/basics/gradients.lisp

@@ -1,19 +1,28 @@
 ; gradients
+
+(def frame 
+  (get-frame))
+
 (clear)
-(def gl 
-  (line 0 0 frame:h frame:h))
-(def cl1 
-  (gradient gl 
-    (theme:b_med theme:b_high)))
-(def cl2 
-  (gradient gl 
-    (theme:b_high theme:b_med)))
-(guide gl)
+
+(def colors 
+  ("#72dec2" "#ffffff"))
+
+(def gradient1 
+  (gradient 
+    (line 0 0 frame:h frame:h) colors))
+
+(def gradient2 
+  (gradient 
+    (line frame:h frame:h 0 0) colors))
+
 (fill 
-  (circle frame:m frame:m frame:m) cl1)
+  (circle frame:m frame:m frame:m) gradient1)
+
 (fill 
   (circle frame:m frame:m 
-    (mul frame:m 0.75)) cl2)
+    (mul frame:m 0.75)) gradient2)
+
 (fill 
   (circle frame:m frame:m 
-    (mul frame:m 0.5)) cl1)
+    (mul frame:m 0.5)) gradient1)

examples/basics/shapes.lisp

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

examples/basics/spiral.lisp

@@ -1,5 +1,9 @@
 ; animated recusive spiral
-; by @local_guru 
+
+(def frame 
+  (get-frame))
+
+;
 (defn rec 
   (v) 
   (if 
@@ -27,12 +31,14 @@
         (circle spiral-x spiral-y spiral-r) 
         (color 114 222 194 0.1) 1) 
       (rec 
-        (sub v 0.3))))) 
+        (sub v 0.3)))))
+ 
 ;
 (defn redraw 
   () 
   (
     (clear) 
     (rec 300)))
+
 ;
 (on "animate" redraw)

examples/basics/spire.lisp

@@ -1,9 +1,12 @@
 ; this demo shows how to use the mouse events to draw make a simple drawing tool.
+
 ;
 (clear)
+
 ;
 (def gradient-line 
   (line frame:c 0 frame:c frame:h))
+
 ;
 (defn draw-circle 
   (e) 
@@ -11,6 +14,7 @@
     (stroke 
       (circle e:x e:y e:d) 
       (gradient gradient-line 
-        ("black" "#ffb545")))))
+        ("black" "#72dec2")))))
+
 ;
 (on "mouse-move" draw-circle)

examples/basics/theme.lisp

@@ -1,9 +1,18 @@
 ; display color from the theme.
+
+(def theme 
+  (get-theme))
+
+
 ; ex: theme:f_high
-(clear) 
+
+(clear)
+ 
 (fill frame theme:background)
+
 (def color-box 
   (div frame:h 10))
+
 (defn print-value 
   (item id) 
   (
@@ -22,5 +31,6 @@
           (keys theme) id)) theme:f_high) 
     (fill 
       (text 400 box-y 30 item) theme:f_high)))
+
 (map 
   (values theme) print-value)

examples/basics/transform.branch.lisp

@@ -1,4 +1,5 @@
 (clear)
+
 (defn branch 
   (v) 
   (if 
@@ -20,5 +21,7 @@
       (branch 
         (sub v 1)) 
       (transform:pop))))
+
 (branch 10)
+
 (transform:reset)

examples/basics/transforms.lisp

@@ -1,19 +1,31 @@
 ; transforms
+
 (clear)
+
 (transform:move 150 150)
+
 (fill 
   (circle 0 0 150) theme:b_inv)
+
 (transform:move 300 0)
+
 (transform:rotate 
   (rad 90))
+
 (fill 
   (circle 0 0 150) theme:b_high)
+
 (transform:move 300 0)
+
 (transform:rotate 
   (rad 90))
+
 (fill 
   (circle 0 0 150) theme:b_med)
+
 (transform:move 300 0)
+
 (fill 
   (circle 0 0 150) theme:b_low)
+
 (transform:reset)

examples/projects/folder.lisp

@@ -1,24 +0,0 @@
-; open every file in a folder.
-(defn filter-jpg 
-  (file-name) 
-  (eq 
-    (last 
-      (split file-name ".")) "jpg"))
-;
-(def images 
-  (filter 
-    (dir) filter-jpg))
-;
-(debug 
-  (concat "Found: " 
-    (len images)))
-;
-(defn image-operation 
-  (file-name) 
-  (
-    (def file-path 
-      (concat 
-        (dirpath) "/" file-name)) 
-    (open file-path)))
-;
-(each images image-operation)

index.html

@@ -513,7 +513,7 @@ function Client () {
     this.acels.set('View', 'Toggle Commander', 'CmdOrCtrl+K', () => { this.commander.toggle() })
     this.acels.set('View', 'Expand Commander', 'CmdOrCtrl+Shift+K', () => { this.commander.toggle(true) })
     this.acels.set('Project', 'Run', 'CmdOrCtrl+R', () => { this.commander.run() })
-    this.acels.set('Project', 'Re-Indent', 'CmdOrCtrl+Shift+I', () => { this.commander.reindent() })
+    this.acels.set('Project', 'Re-Indent', 'CmdOrCtrl+Shift+I', () => { this.commander.lint() })
     this.acels.set('Project', 'Clean', 'Escape', () => { this.commander.cleanup() })
     this.acels.route(this)
   }
@@ -725,7 +725,7 @@ function Commander (client) {
   }
   this.cleanup = function () {
     this._input.value = this.clean(this._input.value)
-    this.reindent()
+    this.lint()
     this.run()
   }
   this.update = function () {
@@ -736,30 +736,6 @@ function Commander (client) {
   this.onClick = () => {
     this.setStatus()
   }
-  this.reindent = function () {
-    let val = this._input.value.replace(/\n/g, '').replace(/ \)/g, ')').replace(/ +(?= )/g, '').replace(/\( \(/g, '((').replace(/\) \)/g, '))').trim()
-    let depth = 0
-    if (val.split('(').length !== val.split(')').length) {
-      client.log('Uneven number of parens.')
-      return
-    }
-    for (let i = 0; i < val.length; i++) {
-      const c = val.charAt(i)
-      if (c === '(') { depth++ } else if (c === ')') { depth-- }
-      if (c === ';') {
-        const indent = '\n' + ('  '.repeat(depth))
-        val = insert(val, indent, i)
-        i += indent.length
-      }
-      if (c === '(') {
-        const indent = '\n' + ('  '.repeat(depth - 1))
-        val = insert(val, indent, i)
-        i += indent.length
-      }
-    }
-    val = val.split('\n').map((line) => { return line.substr(0, 2) === '; ' ? `\n${line}\n` : line }).join('\n')
-    this._input.value = val.trim()
-  }
   this.clean = function (input) {
     const keywords = ['$pos+', '$pos', '$rect', '$line', '$x', '$y', '$xy']
     for (const word of keywords) {
@@ -876,6 +852,36 @@ function Commander (client) {
     const fnParams = fnString.split(') => {')[0].substr(1).split(',').reduce((acc, item) => { return `${acc}${item.indexOf('=') > -1 ? '~' + item.split('=')[0].trim() : item} ` }, '').trim()
     return `(${(name + ' ' + fnParams).trim()})`
   }
+  this.lint = function () {
+    let val = this._input.value.replace(/\n/g, '').replace(/ \)/g, ')').replace(/ +(?= )/g, '').replace(/\( \(/g, '((').replace(/\) \)/g, '))').trim()
+    let depth = 0
+    if (val.split('(').length !== val.split(')').length) {
+      client.log('Uneven number of parens.')
+      return
+    }
+    for (let i = 0; i < val.length; i++) {
+      const c = val.charAt(i)
+      if (c === '(') { depth++ } else if (c === ')') { depth-- }
+      if (c === ';') {
+        const indent = '\n' + ('  '.repeat(depth))
+        val = insert(val, indent, i)
+        i += indent.length
+      }
+      if (c === '(') {
+        const indent = '\n' + ('  '.repeat(depth - 1))
+        val = insert(val, indent, i)
+        i += indent.length
+      }
+      if (c === ')' && depth === 0) {
+        val = insert(val, '\n', i + 1)
+      }
+    }
+    val = val.split('\n').map((line) => { return line.substr(0, 2) === '; ' ? `\n${line}\n` : line }).join('\n')
+    this._input.value = val.trim()
+    function insert (str, add, i) {
+      return [str.slice(0, i), `${add}`, str.slice(i)].join('')
+    }
+  }
   this.splash = `; Ronin v2.50
 (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 ")
 ;
@@ -883,9 +889,6 @@ function Commander (client) {
 (resize 600 600)
 (stroke 
   (svg 140 140 logo-path) "black" 7)`
-  function insert (str, add, i) {
-    return [str.slice(0, i), `${add}`, str.slice(i)].join('')
-  }
 }
 'use strict'
 function Lisp (lib = {}) {

scripts/client.js

@@ -61,7 +61,7 @@ function Client () {
     this.acels.set('View', 'Expand Commander', 'CmdOrCtrl+Shift+K', () => { this.commander.toggle(true) })
 
     this.acels.set('Project', 'Run', 'CmdOrCtrl+R', () => { this.commander.run() })
-    this.acels.set('Project', 'Re-Indent', 'CmdOrCtrl+Shift+I', () => { this.commander.reindent() })
+    this.acels.set('Project', 'Re-Indent', 'CmdOrCtrl+Shift+I', () => { this.commander.lint() })
     this.acels.set('Project', 'Clean', 'Escape', () => { this.commander.cleanup() })
 
     this.acels.route(this)

scripts/commander.js

@@ -61,7 +61,7 @@ function Commander (client) {
 
   this.cleanup = function () {
     this._input.value = this.clean(this._input.value)
-    this.reindent()
+    this.lint()
     this.run()
   }
 
@@ -77,33 +77,6 @@ function Commander (client) {
     this.setStatus()
   }
 
-  this.reindent = function () {
-    let val = this._input.value.replace(/\n/g, '').replace(/ \)/g, ')').replace(/ +(?= )/g, '').replace(/\( \(/g, '((').replace(/\) \)/g, '))').trim()
-    let depth = 0
-    if (val.split('(').length !== val.split(')').length) {
-      client.log('Uneven number of parens.')
-      return
-    }
-    for (let i = 0; i < val.length; i++) {
-      const c = val.charAt(i)
-      if (c === '(') { depth++ } else if (c === ')') { depth-- }
-      if (c === ';') {
-        const indent = '\n' + ('  '.repeat(depth))
-        val = insert(val, indent, i)
-        i += indent.length
-      }
-      if (c === '(') {
-        const indent = '\n' + ('  '.repeat(depth - 1))
-        val = insert(val, indent, i)
-        i += indent.length
-      }
-    }
-    // Space out comments
-    val = val.split('\n').map((line) => { return line.substr(0, 2) === '; ' ? `\n${line}\n` : line }).join('\n')
-
-    this._input.value = val.trim()
-  }
-
   this.clean = function (input) {
     const keywords = ['$pos+', '$pos', '$rect', '$line', '$x', '$y', '$xy']
     for (const word of keywords) {
@@ -248,6 +221,41 @@ function Commander (client) {
     return `(${(name + ' ' + fnParams).trim()})`
   }
 
+  this.lint = function () {
+    let val = this._input.value.replace(/\n/g, '').replace(/ \)/g, ')').replace(/ +(?= )/g, '').replace(/\( \(/g, '((').replace(/\) \)/g, '))').trim()
+    let depth = 0
+    if (val.split('(').length !== val.split(')').length) {
+      client.log('Uneven number of parens.')
+      return
+    }
+    for (let i = 0; i < val.length; i++) {
+      const c = val.charAt(i)
+      if (c === '(') { depth++ } else if (c === ')') { depth-- }
+      if (c === ';') {
+        const indent = '\n' + ('  '.repeat(depth))
+        val = insert(val, indent, i)
+        i += indent.length
+      }
+      if (c === '(') {
+        const indent = '\n' + ('  '.repeat(depth - 1))
+        val = insert(val, indent, i)
+        i += indent.length
+      }
+      // add linebreak after paren at depth 0
+      if (c === ')' && depth === 0) {
+        val = insert(val, '\n', i + 1)
+      }
+    }
+    // Space out comments
+    val = val.split('\n').map((line) => { return line.substr(0, 2) === '; ' ? `\n${line}\n` : line }).join('\n')
+
+    this._input.value = val.trim()
+
+    function insert (str, add, i) {
+      return [str.slice(0, i), `${add}`, str.slice(i)].join('')
+    }
+  }
+
   // Splash
 
   this.splash = `; Ronin v2.50
@@ -258,8 +266,4 @@ function Commander (client) {
 (resize 600 600)
 (stroke 
   (svg 140 140 logo-path) "black" 7)`
-
-  function insert (str, add, i) {
-    return [str.slice(0, i), `${add}`, str.slice(i)].join('')
-  }
 }