Misc improvements
This commit is contained in:
parent
ff51bd7b89
commit
3b07edefc4
@ -62,6 +62,7 @@ Library
|
||||
- (open name ~scale) Imports a graphic file with format.
|
||||
- (import name ~shape) Imports a graphic file with format.
|
||||
- (export ~name ~format ~quality) Exports a graphic file with format.
|
||||
- (print string) Exports string to file.
|
||||
- (pos ~x ~y) Returns a position shape.
|
||||
- (line ax ay bx by) Returns a line shape.
|
||||
- (size w h) Returns a size shape.
|
||||
|
@ -16,7 +16,6 @@
|
||||
|
||||
<script type="text/javascript" src="./scripts/client.js"></script>
|
||||
<script type="text/javascript" src="./scripts/commander.js"></script>
|
||||
<script type="text/javascript" src="./scripts/lain(old).js"></script>
|
||||
<script type="text/javascript" src="./scripts/library.js"></script>
|
||||
<script type="text/javascript" src="./scripts/surface.js"></script>
|
||||
|
||||
|
20
examples/projects/spire.lisp
Normal file
20
examples/projects/spire.lisp
Normal file
@ -0,0 +1,20 @@
|
||||
; 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)
|
||||
(
|
||||
(stroke
|
||||
(circle e:x e:y e:d)
|
||||
(gradient gradient-line
|
||||
("black" "#72dec2")))))
|
||||
|
||||
;
|
||||
(on "mouse-move" draw-circle)
|
239
index.html
239
index.html
@ -14,7 +14,6 @@ function Acels (client) {
|
||||
this.el.id = 'acels'
|
||||
this.order = []
|
||||
this.all = {}
|
||||
this.roles = {}
|
||||
this.pipe = null
|
||||
this.install = (host = document.body) => {
|
||||
window.addEventListener('keydown', this.onKeyDown, false)
|
||||
@ -44,9 +43,6 @@ function Acels (client) {
|
||||
if (this.order.indexOf(cat) < 0) { this.order.push(cat) }
|
||||
this.all[accelerator] = { cat, name, downfn, upfn, accelerator }
|
||||
}
|
||||
this.add = (cat, role) => {
|
||||
this.all[':' + role] = { cat, name: role, role }
|
||||
}
|
||||
this.get = (accelerator) => {
|
||||
return this.all[accelerator]
|
||||
}
|
||||
@ -503,12 +499,6 @@ function Client () {
|
||||
this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.write('ronin', 'lisp', this.commander._input.value, 'text/plain') })
|
||||
this.acels.set('File', 'Export Image', 'CmdOrCtrl+E', () => { this.source.write('ronin', 'png', this.surface.el.toDataURL('image/png', 1.0), 'image/png') })
|
||||
this.acels.set('File', 'Open', 'CmdOrCtrl+U', () => { this.source.open('lisp', this.whenOpen) })
|
||||
this.acels.add('Edit', 'undo')
|
||||
this.acels.add('Edit', 'redo')
|
||||
this.acels.add('Edit', 'cut')
|
||||
this.acels.add('Edit', 'copy')
|
||||
this.acels.add('Edit', 'paste')
|
||||
this.acels.add('Edit', 'selectAll')
|
||||
this.acels.set('View', 'Toggle Guides', 'CmdOrCtrl+Shift+H', () => { this.surface.toggleGuides() })
|
||||
this.acels.set('View', 'Toggle Commander', 'CmdOrCtrl+K', () => { this.commander.toggle() })
|
||||
this.acels.set('View', 'Expand Commander', 'CmdOrCtrl+Shift+K', () => { this.commander.toggle(true) })
|
||||
@ -802,19 +792,19 @@ function Commander (client) {
|
||||
if (word === 'x' || word === 'y' || word === 'xy' || word === 'wh' || word === 'a' || word === 'r') { return `${shape}` }
|
||||
return ''
|
||||
}
|
||||
this.show = function (expand = false) {
|
||||
if (this.isVisible === true) { return }
|
||||
this.show = (expand = false) => {
|
||||
if (this.isVisible === true && expand !== true) { return }
|
||||
client.el.className = expand ? 'expand' : ''
|
||||
this.isVisible = true
|
||||
this._input.focus()
|
||||
}
|
||||
this.hide = function () {
|
||||
this.hide = () => {
|
||||
if (this.isVisible !== true) { return }
|
||||
client.el.className = 'hidden'
|
||||
this.isVisible = false
|
||||
this._input.blur()
|
||||
}
|
||||
this.toggle = function (expand = false) {
|
||||
this.toggle = (expand = false) => {
|
||||
if (this.isVisible !== true) {
|
||||
this.show(expand)
|
||||
} else {
|
||||
@ -853,212 +843,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
|
||||
}
|
||||
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('')
|
||||
const value = this._input.value
|
||||
if (value.split('(').length !== value.split(')').length) {
|
||||
return client.log('Uneven number of parens.')
|
||||
}
|
||||
this._input.value = lintLISP(value)
|
||||
}
|
||||
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 ")
|
||||
;
|
||||
(clear)
|
||||
(clear)
|
||||
(resize 600 600)
|
||||
(stroke
|
||||
(svg 140 140 logo-path) "black" 7)`
|
||||
}
|
||||
'use strict'
|
||||
function Lisp (lib = {}) {
|
||||
const TYPES = { identifier: 0, number: 1, string: 2, bool: 3, symbol: 4 }
|
||||
const Context = function (scope, parent) {
|
||||
this.scope = scope
|
||||
this.parent = parent
|
||||
this.get = function (identifier) {
|
||||
if (identifier in this.scope) {
|
||||
return this.scope[identifier]
|
||||
} else if (this.parent !== undefined) {
|
||||
return this.parent.get(identifier)
|
||||
}
|
||||
function lintLISP (str) {
|
||||
let val = str.replace(/\n/g, '').replace(/ \)/g, ')').replace(/ +(?= )/g, '').replace(/\( \(/g, '((').replace(/\) \)/g, '))').trim()
|
||||
let depth = 0
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
const c = val.charAt(i)
|
||||
depth += c === '(' ? 1 : c === ')' ? -1 : 0
|
||||
if (c === ';') {
|
||||
const indent = '\n' + (' '.repeat(depth))
|
||||
val = [val.slice(0, i), `${indent}`, val.slice(i)].join('')
|
||||
i += indent.length
|
||||
}
|
||||
if (c === '(' && val.charAt(i + 1) !== ')') {
|
||||
const indent = '\n' + (' '.repeat(depth - 1))
|
||||
val = [val.slice(0, i), `${indent}`, val.slice(i)].join('')
|
||||
i += indent.length
|
||||
}
|
||||
if (c === ')' && depth === 0) {
|
||||
val = [val.slice(0, i), ')\n', val.slice(i + 1)].join('')
|
||||
}
|
||||
}
|
||||
const special = {
|
||||
let: function (input, context) {
|
||||
const letContext = input[1].reduce(function (acc, x) {
|
||||
acc.scope[x[0].value] = interpret(x[1], context)
|
||||
return acc
|
||||
}, new Context({}, context))
|
||||
return interpret(input[2], letContext)
|
||||
},
|
||||
def: function (input, context) {
|
||||
const identifier = input[1].value
|
||||
const value = input[2].type === TYPES.string && input[3] ? input[3] : input[2]
|
||||
context.scope[identifier] = interpret(value, context)
|
||||
return value
|
||||
},
|
||||
defn: function (input, context) {
|
||||
const fnName = input[1].value
|
||||
const fnParams = input[2].type === TYPES.string && input[3] ? input[3] : input[2]
|
||||
const fnBody = input[2].type === TYPES.string && input[4] ? input[4] : input[3]
|
||||
context.scope[fnName] = async function () {
|
||||
const lambdaArguments = arguments
|
||||
const lambdaScope = fnParams.reduce(function (acc, x, i) {
|
||||
acc[x.value] = lambdaArguments[i]
|
||||
return acc
|
||||
}, {})
|
||||
return interpret(fnBody, new Context(lambdaScope, context))
|
||||
}
|
||||
},
|
||||
lambda: function (input, context) {
|
||||
return async function () {
|
||||
const lambdaArguments = arguments
|
||||
const lambdaScope = input[1].reduce(function (acc, x, i) {
|
||||
acc[x.value] = lambdaArguments[i]
|
||||
return acc
|
||||
}, {})
|
||||
return interpret(input[2], new Context(lambdaScope, context))
|
||||
}
|
||||
},
|
||||
if: async function (input, context) {
|
||||
if (await interpret(input[1], context)) {
|
||||
return interpret(input[2], context)
|
||||
}
|
||||
return input[3] ? interpret(input[3], context) : []
|
||||
},
|
||||
__fn: function (input, context) {
|
||||
return async function () {
|
||||
const lambdaArguments = arguments
|
||||
const keys = [...new Set(input.slice(2).flat(100).filter(i =>
|
||||
i.type === TYPES.identifier &&
|
||||
i.value[0] === '%'
|
||||
).map(x => x.value).sort())]
|
||||
const lambdaScope = keys.reduce(function (acc, x, i) {
|
||||
acc[x] = lambdaArguments[i]
|
||||
return acc
|
||||
}, {})
|
||||
return interpret(input.slice(1), new Context(lambdaScope, context))
|
||||
}
|
||||
},
|
||||
__obj: async function (input, context) {
|
||||
const obj = {}
|
||||
for (let i = 1; i < input.length; i += 2) {
|
||||
obj[await interpret(input[i], context)] = await interpret(input[i + 1], context)
|
||||
}
|
||||
return obj
|
||||
}
|
||||
}
|
||||
const interpretList = async function (input, context) {
|
||||
if (input.length > 0 && input[0].value in special) {
|
||||
return special[input[0].value](input, context)
|
||||
}
|
||||
const list = []
|
||||
for (let i = 0; i < input.length; i++) {
|
||||
if (input[i].type === TYPES.symbol) {
|
||||
if (input[i].host) {
|
||||
const host = await context.get(input[i].host)
|
||||
if (host) {
|
||||
list.push(host[input[i].value])
|
||||
}
|
||||
} else {
|
||||
list.push(obj => obj[input[i].value])
|
||||
}
|
||||
} else {
|
||||
list.push(await interpret(input[i], context))
|
||||
}
|
||||
}
|
||||
return list[0] instanceof Function ? list[0].apply(undefined, list.slice(1)) : list
|
||||
}
|
||||
const interpret = async function (input, context) {
|
||||
if (!input) { console.warn('Lisp', 'error', context.scope); return null }
|
||||
if (context === undefined) {
|
||||
return interpret(input, new Context(lib))
|
||||
} else if (input instanceof Array) {
|
||||
return interpretList(input, context)
|
||||
} else if (input.type === TYPES.identifier) {
|
||||
return context.get(input.value)
|
||||
} else if (input.type === TYPES.number || input.type === TYPES.symbol || input.type === TYPES.string || input.type === TYPES.bool) {
|
||||
return input.value
|
||||
}
|
||||
}
|
||||
const categorize = function (input) {
|
||||
if (!isNaN(parseFloat(input))) {
|
||||
return { type: TYPES.number, value: parseFloat(input) }
|
||||
} else if (input[0] === '"' && input.slice(-1) === '"') {
|
||||
return { type: TYPES.string, value: input.slice(1, -1) }
|
||||
} else if (input[0] === ':') {
|
||||
return { type: TYPES.symbol, value: input.slice(1) }
|
||||
} else if (input.indexOf(':') > 0) {
|
||||
return { type: TYPES.symbol, host: input.split(':')[0], value: input.split(':')[1] }
|
||||
} else if (input === 'true' || input === 'false') {
|
||||
return { type: TYPES.bool, value: input === 'true' }
|
||||
} else {
|
||||
return { type: TYPES.identifier, value: input }
|
||||
}
|
||||
}
|
||||
const parenthesize = function (input, list) {
|
||||
if (list === undefined) { return parenthesize(input, []) }
|
||||
const token = input.shift()
|
||||
if (token === undefined) {
|
||||
return list.pop()
|
||||
} else if (token === '\'(') {
|
||||
input.unshift('__fn')
|
||||
list.push(parenthesize(input, []))
|
||||
return parenthesize(input, list)
|
||||
} else if (token === '{') {
|
||||
input.unshift('__obj')
|
||||
list.push(parenthesize(input, []))
|
||||
return parenthesize(input, list)
|
||||
} else if (token === '(') {
|
||||
list.push(parenthesize(input, []))
|
||||
return parenthesize(input, list)
|
||||
} else if (token === ')' || token === '}') {
|
||||
return list
|
||||
} else {
|
||||
return parenthesize(input, list.concat(categorize(token)))
|
||||
}
|
||||
}
|
||||
const tokenize = function (input) {
|
||||
const i = input.replace(/^;.*\n?/gm, '').replace(/λ /g, 'lambda ').split('"')
|
||||
return i.map(function (x, i) {
|
||||
return i % 2 === 0
|
||||
? x.replace(/\(/g, ' ( ')
|
||||
.replace(/\)/g, ' ) ')
|
||||
.replace(/' \( /g, ' \'( ') // '()
|
||||
.replace(/\{/g, ' { ') // {}
|
||||
.replace(/\}/g, ' } ') // {}
|
||||
: x.replace(/ /g, '!whitespace!')
|
||||
})
|
||||
.join('"').trim().split(/\s+/)
|
||||
.map(function (x) { return x.replace(/!whitespace!/g, ' ') })
|
||||
}
|
||||
this.parse = function (input) {
|
||||
return parenthesize(tokenize(input))
|
||||
}
|
||||
this.run = async function (input) {
|
||||
return interpret(this.parse(`((def theme (get-theme))(def frame (get-frame))(${input}))`))
|
||||
}
|
||||
val = val.split('\n').map((line) => { return line.substr(0, 2) === '; ' ? `\n${line}\n` : line }).join('\n')
|
||||
return val.trim()
|
||||
}
|
||||
'use strict'
|
||||
function Library (client) {
|
||||
|
@ -1,22 +0,0 @@
|
||||
File
|
||||
|
||||
New...................... CmdOrCtrl+N
|
||||
Save..................... CmdOrCtrl+S
|
||||
Export Image............. CmdOrCtrl+E
|
||||
Open..................... CmdOrCtrl+O
|
||||
|
||||
Edit
|
||||
|
||||
|
||||
View
|
||||
|
||||
Toggle Guides............ CmdOrCtrl+Shift+H
|
||||
Toggle Commander......... CmdOrCtrl+K
|
||||
Expand Commander......... CmdOrCtrl+Shift+K
|
||||
|
||||
Project
|
||||
|
||||
Run...................... CmdOrCtrl+R
|
||||
Reload Run............... CmdOrCtrl+Shift+R
|
||||
Re-Indent................ CmdOrCtrl+Shift+I
|
||||
Clean.................... Escape
|
@ -1,46 +0,0 @@
|
||||
# Prelude
|
||||
|
||||
## Colors
|
||||
|
||||
### Compare two Colors
|
||||
|
||||
Use: `(if (color-eq (255 200 0) (200 255 0)) "yes" "no")`.
|
||||
|
||||
```
|
||||
(defn color-eq
|
||||
(a b)
|
||||
(and
|
||||
(eq a:0 b:0)
|
||||
(eq a:1 b:1)
|
||||
(eq a:2 b:2)))
|
||||
```
|
||||
|
||||
## Pixels
|
||||
|
||||
### Erase all pixels of a specific color
|
||||
|
||||
Use: `(pixels erase-color (255 0 0))`.
|
||||
|
||||
```
|
||||
(defn erase-color
|
||||
(a b)
|
||||
(a:0 a:1 a:2
|
||||
(if
|
||||
(and
|
||||
(eq a:0 b:0)
|
||||
(eq a:1 b:1)
|
||||
(eq a:2 b:2)) 0 255)))
|
||||
```
|
||||
|
||||
### Posterize
|
||||
|
||||
Use: `(pixels posterize 40)`.
|
||||
|
||||
```
|
||||
(defn posterize
|
||||
(a q)
|
||||
(
|
||||
(step a:0 q)
|
||||
(step a:1 q)
|
||||
(step a:2 q) a:3))
|
||||
```
|
Binary file not shown.
Before Width: | Height: | Size: 836 KiB |
Binary file not shown.
Before Width: | Height: | Size: 884 KiB |
Binary file not shown.
Before Width: | Height: | Size: 1.1 MiB |
@ -1,261 +0,0 @@
|
||||
# Workshop
|
||||
|
||||
<img src="https://raw.githubusercontent.com/hundredrabbits/100r.co/master/media/content/characters/ronin.pose.png" width="300"/>
|
||||
|
||||
This workshop is designed to go over the **most commonly used functions** with [Ronin](https://github.com/hundredrabbits/Ronin). The list of all available functions and their usage is located [here](https://github.com/hundredrabbits/Ronin/#library). You can also follow along our [video tutorial](https://youtu.be/SgAWGh1s9zg).
|
||||
|
||||
- **Part 1**: [Images](#Images) `(import)`, `(crop)`, `(export)`
|
||||
- **Part 2**: [Draw](#Draw) `(stroke)`, `(fill)`, `(gradient)`, `(clear)`
|
||||
- **Part 3**: [Filters](#Filters) `(pixels)`, `(saturation)`, `(convolve)`, `(sharpen)`
|
||||
- **Part 4**: [Events](#Events) `(echo)`, `(on "mouse-down")`, `(on "animate")`, `(on "/a")`
|
||||
|
||||
## Images
|
||||
|
||||
This section will teach the basics of opening, cropping and saving an image file. You can use the `$path` helper to quickly get an image's path into Ronin, by writing `$path` and dragging a file onto the Ronin window.
|
||||
|
||||
### Import
|
||||
|
||||
To import an image onto the current canvas, type the following text, drag an image file onto the Ronin window, trace a shape in the canvas and press `cmd+r`:
|
||||
|
||||
```lisp
|
||||
(import $path
|
||||
(guide $rect))
|
||||
```
|
||||
|
||||
The previous code will import an image, and preserve its ratio. Alternatively, you could use a `$line` to stretch the image, or a `$pos` to simply draw the image at its original size.
|
||||
|
||||
```lisp
|
||||
(import $path
|
||||
(guide $line))
|
||||
```
|
||||
|
||||
### Crop
|
||||
|
||||
To crop the canvas, type the following text, drag an image file onto the Ronin window press `cmd+r`:
|
||||
|
||||
```lisp
|
||||
(import $path
|
||||
(pos 0 0))
|
||||
(crop
|
||||
(rect 50 50 300 300))
|
||||
```
|
||||
|
||||
### Export
|
||||
|
||||
To export the resulting image, type the following text, drag an image file onto the Ronin window, then drag a folder and add the new file's name, and press `cmd+r`:
|
||||
|
||||
```lisp
|
||||
(import $path)
|
||||
(export $path)
|
||||
```
|
||||
|
||||
For example, a version of that same code with file paths, might look something like the following:
|
||||
|
||||
```lisp
|
||||
(import "~/Desktop/photo.jpg")
|
||||
(export "~/Desktop/export.png")
|
||||
```
|
||||
|
||||
You could also **generate the export path from the import path**. To import `~/Desktop/photo.jpg`, and automatically generate the export path `~/Desktop/photo-export.jpg`, use this:
|
||||
|
||||
```lisp
|
||||
(def import-path $path)
|
||||
(def export-path
|
||||
(concat
|
||||
(dirpath import-path) "/"
|
||||
(filename import-path) "-export.jpg"))
|
||||
(import import-path)
|
||||
(export export-path)
|
||||
```
|
||||
|
||||
## Draw
|
||||
|
||||
This section will teach you how to draw some basic shapes and colorize them.
|
||||
|
||||
### Stroke
|
||||
|
||||
In Ronin, a shape is either a `(rect)`, a `(line)`, a `(circle)` or a `(pos)`. To draw the outline of any shape, wrap the shape inside of a `(stroke shape width color)` function, like:
|
||||
|
||||
```lisp
|
||||
(stroke
|
||||
(rect 100 100 300 200) "red" 10)
|
||||
```
|
||||
|
||||
Or, if you would like to trace the shape with your mouse:
|
||||
|
||||
```lisp
|
||||
(stroke
|
||||
$rect "red" 10)
|
||||
```
|
||||
|
||||
### Fill
|
||||
|
||||
To fill the inside of any shape, wrap it inside of a `(fill shape color)` function, like:
|
||||
|
||||
```lisp
|
||||
(fill
|
||||
(rect 100 100 300 200) "orange")
|
||||
```
|
||||
|
||||
### Gradient
|
||||
|
||||
To colorize a stroke or a fill, with a gradient, use the `(gradient line colors)` where the colors is a list of colors like `("blue" "red" "yellow")`:
|
||||
|
||||
```lisp
|
||||
(clear)
|
||||
(fill
|
||||
(circle 300 300 200)
|
||||
(gradient
|
||||
(line 0 0 500 500)
|
||||
("white" "black")))
|
||||
```
|
||||
|
||||
To better understand how the `(line)` affects the coloring of the circle, wrap the `$line` inside a `(guide)`, as follows to preserve the guide interface:
|
||||
|
||||
```lisp
|
||||
(clear)
|
||||
(fill
|
||||
(circle 300 300 200)
|
||||
(gradient
|
||||
(guide $line)
|
||||
("white" "black")))
|
||||
```
|
||||
|
||||
### Clear
|
||||
|
||||
In the previous example, we used the `(clear)` function, which clears the canvas, but it can also be used to clear only a part of the canvas:
|
||||
|
||||
```lisp
|
||||
(clear)
|
||||
(fill
|
||||
frame "red")
|
||||
(clear
|
||||
(rect 100 100 300 300))
|
||||
```
|
||||
|
||||
## Filters
|
||||
|
||||
This section will cover how to manipulate the pixels of an image.
|
||||
|
||||
### Pixels
|
||||
|
||||
First let's open an image, ideally one in color, and change every pixel of a selected area at `(rect 100 100 200 200)`:
|
||||
|
||||
```lisp
|
||||
(import $path)
|
||||
(pixels saturation 10
|
||||
(rect 100 100 200 200))
|
||||
```
|
||||
|
||||
The `(pixels)` function expects a function that returns 4 values(r,g,b,a), and so you can define a custom filter like:
|
||||
|
||||
```
|
||||
(defn invert
|
||||
(pixel)
|
||||
(
|
||||
(sub 255 pixel:0)
|
||||
(sub 255 pixel:1)
|
||||
(sub 255 pixel:2) pixel:3))
|
||||
(pixels invert)
|
||||
```
|
||||
|
||||
### 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
|
||||
(import $path)
|
||||
(pixels saturation 0.5)
|
||||
```
|
||||
|
||||
### convolve
|
||||
|
||||
Effects which use the surrounding pixels, or convolution matrix, are used with the `(convolve)` function, you can learn more about this family of filters [here](https://en.wikipedia.org/wiki/Kernel_(image_processing)).
|
||||
|
||||
### sharpen
|
||||
|
||||
```lisp
|
||||
(import $path)
|
||||
(convolve (sharpen) $rect)
|
||||
```
|
||||
|
||||
Custom convolve kernels can also be created like this:
|
||||
|
||||
```lisp
|
||||
(import $path)
|
||||
(def (blur)
|
||||
(
|
||||
(-1 -1 -1)
|
||||
(-1 5 -1)
|
||||
(-1 -1 -1)))
|
||||
(convolve (blur))
|
||||
```
|
||||
|
||||
<img src="https://raw.githubusercontent.com/hundredrabbits/100r.co/master/media/content/characters/ronin.idle.png" width="300"/>
|
||||
|
||||
## Events
|
||||
|
||||
This section will demonstrate how to use events in Ronin to create interactive scripts.
|
||||
|
||||
### Echo
|
||||
|
||||
You can print some content to the screen in Ronin, by using the `(echo)` function, for example, the following script will write the word `hello` at the bottom left of the interface:
|
||||
|
||||
```lisp
|
||||
(echo "hello")
|
||||
```
|
||||
|
||||
### MouseDown
|
||||
|
||||
Let's use the `(debug)` function to display the position of the mouse cursor in the interface.
|
||||
|
||||
```lisp
|
||||
(on "mouse-down" echo)
|
||||
```
|
||||
|
||||
We can define a function that triggers when the `mouse-down` event is detected, or when you click on the canvas:
|
||||
|
||||
```lisp
|
||||
; define the function
|
||||
(defn draw-rect
|
||||
(e)
|
||||
(fill e:circle "red"))
|
||||
; use the function
|
||||
(on "mouse-move" draw-rect)
|
||||
```
|
||||
|
||||
For more examples of functions, see the [examples](https://github.com/hundredrabbits/Ronin/tree/master/examples).
|
||||
|
||||
You can find a more elaborate version of this example [here](https://github.com/hundredrabbits/Ronin/blob/master/examples/events/on-mouse.lisp).
|
||||
|
||||
### Animate
|
||||
|
||||
The `animate` event fires around 30 times per second, and is a perfect tool to create animations. Following the previous example, and the pattern of creating a function and binding it to the event, let's make a function that will use the `(time)` to animate a box:
|
||||
|
||||
```lisp
|
||||
; define the function
|
||||
(defn wob-rect
|
||||
()
|
||||
(
|
||||
(clear)
|
||||
(def rect-x 300)
|
||||
(def rect-y (add (mul (sin (time 0.005)) 50) 300))
|
||||
(fill
|
||||
(rect rect-x rect-y 100 100) "red")))
|
||||
; use the function
|
||||
(on "animate" wob-rect)
|
||||
```
|
||||
|
||||
You can find a more elaborate version of this example [here](https://github.com/hundredrabbits/Ronin/blob/master/examples/events/on-animate.lisp).
|
||||
|
||||
### OSC
|
||||
|
||||
Other programs can communicate with Ronin via OSC with the previous pattern. For example, if you send OSC data to the port `49162`, at the path `/a`, the event can be used in Ronin to trigger a function:
|
||||
|
||||
```lisp
|
||||
(on "/a" echo)
|
||||
```
|
||||
|
||||
You can find a more elaborate version of this example [here](https://github.com/hundredrabbits/Ronin/blob/master/examples/events/on-osc.lisp).
|
||||
|
||||
I hope this workshop has been enlightening, if you have questions or suggestions, please visit the [community](https://hundredrabbits.itch.io/ronin/community). Enjoy!
|
@ -43,27 +43,16 @@ function Client () {
|
||||
this.acels.set('∷', 'Toggle Menubar', 'Tab', () => { this.acels.toggle() })
|
||||
this.acels.set('∷', 'Open Theme', 'CmdOrCtrl+Shift+O', () => { this.theme.open() })
|
||||
this.acels.set('∷', 'Reset Theme', 'CmdOrCtrl+Backspace', () => { this.theme.reset() })
|
||||
|
||||
this.acels.set('File', 'New', 'CmdOrCtrl+N', () => { this.source.new(); this.surface.clear(); this.commander.clear() })
|
||||
this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.write('ronin', 'lisp', this.commander._input.value, 'text/plain') })
|
||||
this.acels.set('File', 'Export Image', 'CmdOrCtrl+E', () => { this.source.write('ronin', 'png', this.surface.el.toDataURL('image/png', 1.0), 'image/png') })
|
||||
this.acels.set('File', 'Open', 'CmdOrCtrl+U', () => { this.source.open('lisp', this.whenOpen) })
|
||||
|
||||
this.acels.add('Edit', 'undo')
|
||||
this.acels.add('Edit', 'redo')
|
||||
this.acels.add('Edit', 'cut')
|
||||
this.acels.add('Edit', 'copy')
|
||||
this.acels.add('Edit', 'paste')
|
||||
this.acels.add('Edit', 'selectAll')
|
||||
|
||||
this.acels.set('View', 'Toggle Guides', 'CmdOrCtrl+Shift+H', () => { this.surface.toggleGuides() })
|
||||
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.lint() })
|
||||
this.acels.set('Project', 'Clean', 'Escape', () => { this.commander.cleanup() })
|
||||
|
||||
this.acels.route(this)
|
||||
}
|
||||
|
||||
|
@ -161,21 +161,21 @@ function Commander (client) {
|
||||
|
||||
// Display
|
||||
|
||||
this.show = function (expand = false) {
|
||||
if (this.isVisible === true) { return }
|
||||
this.show = (expand = false) => {
|
||||
if (this.isVisible === true && expand !== true) { return }
|
||||
client.el.className = expand ? 'expand' : ''
|
||||
this.isVisible = true
|
||||
this._input.focus()
|
||||
}
|
||||
|
||||
this.hide = function () {
|
||||
this.hide = () => {
|
||||
if (this.isVisible !== true) { return }
|
||||
client.el.className = 'hidden'
|
||||
this.isVisible = false
|
||||
this._input.blur()
|
||||
}
|
||||
|
||||
this.toggle = function (expand = false) {
|
||||
this.toggle = (expand = false) => {
|
||||
if (this.isVisible !== true) {
|
||||
this.show(expand)
|
||||
} else {
|
||||
@ -222,38 +222,11 @@ function Commander (client) {
|
||||
}
|
||||
|
||||
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('')
|
||||
const value = this._input.value
|
||||
if (value.split('(').length !== value.split(')').length) {
|
||||
return client.log('Uneven number of parens.')
|
||||
}
|
||||
this._input.value = lintLISP(value)
|
||||
}
|
||||
|
||||
// Splash
|
||||
@ -261,9 +234,41 @@ function Commander (client) {
|
||||
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 ")
|
||||
;
|
||||
(clear)
|
||||
|
||||
(clear)
|
||||
|
||||
(resize 600 600)
|
||||
|
||||
(stroke
|
||||
(svg 140 140 logo-path) "black" 7)`
|
||||
}
|
||||
|
||||
function lintLISP (str) {
|
||||
// cleanup
|
||||
let val = str.replace(/\n/g, '').replace(/ \)/g, ')').replace(/ +(?= )/g, '').replace(/\( \(/g, '((').replace(/\) \)/g, '))').trim()
|
||||
// begin
|
||||
let depth = 0
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
const c = val.charAt(i)
|
||||
depth += c === '(' ? 1 : c === ')' ? -1 : 0
|
||||
// Pad comments
|
||||
if (c === ';') {
|
||||
const indent = '\n' + (' '.repeat(depth))
|
||||
val = [val.slice(0, i), `${indent}`, val.slice(i)].join('')
|
||||
i += indent.length
|
||||
}
|
||||
// Don't pad when closing on next char
|
||||
if (c === '(' && val.charAt(i + 1) !== ')') {
|
||||
const indent = '\n' + (' '.repeat(depth - 1))
|
||||
val = [val.slice(0, i), `${indent}`, val.slice(i)].join('')
|
||||
i += indent.length
|
||||
}
|
||||
// Add linebreak after paren at depth 0
|
||||
if (c === ')' && depth === 0) {
|
||||
val = [val.slice(0, i), ')\n', val.slice(i + 1)].join('')
|
||||
}
|
||||
}
|
||||
// Space out comments
|
||||
val = val.split('\n').map((line) => { return line.substr(0, 2) === '; ' ? `\n${line}\n` : line }).join('\n')
|
||||
return val.trim()
|
||||
}
|
||||
|
@ -1,180 +0,0 @@
|
||||
'use strict'
|
||||
|
||||
function Lisp (lib = {}) {
|
||||
const TYPES = { identifier: 0, number: 1, string: 2, bool: 3, symbol: 4 }
|
||||
|
||||
const Context = function (scope, parent) {
|
||||
this.scope = scope
|
||||
this.parent = parent
|
||||
this.get = function (identifier) {
|
||||
if (identifier in this.scope) {
|
||||
return this.scope[identifier]
|
||||
} else if (this.parent !== undefined) {
|
||||
return this.parent.get(identifier)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const special = {
|
||||
let: function (input, context) {
|
||||
const letContext = input[1].reduce(function (acc, x) {
|
||||
acc.scope[x[0].value] = interpret(x[1], context)
|
||||
return acc
|
||||
}, new Context({}, context))
|
||||
return interpret(input[2], letContext)
|
||||
},
|
||||
def: function (input, context) {
|
||||
const identifier = input[1].value
|
||||
const value = input[2].type === TYPES.string && input[3] ? input[3] : input[2]
|
||||
context.scope[identifier] = interpret(value, context)
|
||||
return value
|
||||
},
|
||||
defn: function (input, context) {
|
||||
const fnName = input[1].value
|
||||
const fnParams = input[2].type === TYPES.string && input[3] ? input[3] : input[2]
|
||||
const fnBody = input[2].type === TYPES.string && input[4] ? input[4] : input[3]
|
||||
context.scope[fnName] = async function () {
|
||||
const lambdaArguments = arguments
|
||||
const lambdaScope = fnParams.reduce(function (acc, x, i) {
|
||||
acc[x.value] = lambdaArguments[i]
|
||||
return acc
|
||||
}, {})
|
||||
return interpret(fnBody, new Context(lambdaScope, context))
|
||||
}
|
||||
},
|
||||
lambda: function (input, context) {
|
||||
return async function () {
|
||||
const lambdaArguments = arguments
|
||||
const lambdaScope = input[1].reduce(function (acc, x, i) {
|
||||
acc[x.value] = lambdaArguments[i]
|
||||
return acc
|
||||
}, {})
|
||||
return interpret(input[2], new Context(lambdaScope, context))
|
||||
}
|
||||
},
|
||||
if: async function (input, context) {
|
||||
if (await interpret(input[1], context)) {
|
||||
return interpret(input[2], context)
|
||||
}
|
||||
return input[3] ? interpret(input[3], context) : []
|
||||
},
|
||||
__fn: function (input, context) {
|
||||
return async function () {
|
||||
const lambdaArguments = arguments
|
||||
const keys = [...new Set(input.slice(2).flat(100).filter(i =>
|
||||
i.type === TYPES.identifier &&
|
||||
i.value[0] === '%'
|
||||
).map(x => x.value).sort())]
|
||||
const lambdaScope = keys.reduce(function (acc, x, i) {
|
||||
acc[x] = lambdaArguments[i]
|
||||
return acc
|
||||
}, {})
|
||||
return interpret(input.slice(1), new Context(lambdaScope, context))
|
||||
}
|
||||
},
|
||||
__obj: async function (input, context) {
|
||||
const obj = {}
|
||||
for (let i = 1; i < input.length; i += 2) {
|
||||
obj[await interpret(input[i], context)] = await interpret(input[i + 1], context)
|
||||
}
|
||||
return obj
|
||||
}
|
||||
}
|
||||
|
||||
const interpretList = async function (input, context) {
|
||||
if (input.length > 0 && input[0].value in special) {
|
||||
return special[input[0].value](input, context)
|
||||
}
|
||||
const list = []
|
||||
for (let i = 0; i < input.length; i++) {
|
||||
if (input[i].type === TYPES.symbol) {
|
||||
if (input[i].host) {
|
||||
const host = await context.get(input[i].host)
|
||||
if (host) {
|
||||
list.push(host[input[i].value])
|
||||
}
|
||||
} else {
|
||||
list.push(obj => obj[input[i].value])
|
||||
}
|
||||
} else {
|
||||
list.push(await interpret(input[i], context))
|
||||
}
|
||||
}
|
||||
return list[0] instanceof Function ? list[0].apply(undefined, list.slice(1)) : list
|
||||
}
|
||||
|
||||
const interpret = async function (input, context) {
|
||||
if (!input) { console.warn('Lisp', 'error', context.scope); return null }
|
||||
if (context === undefined) {
|
||||
return interpret(input, new Context(lib))
|
||||
} else if (input instanceof Array) {
|
||||
return interpretList(input, context)
|
||||
} else if (input.type === TYPES.identifier) {
|
||||
return context.get(input.value)
|
||||
} else if (input.type === TYPES.number || input.type === TYPES.symbol || input.type === TYPES.string || input.type === TYPES.bool) {
|
||||
return input.value
|
||||
}
|
||||
}
|
||||
|
||||
const categorize = function (input) {
|
||||
if (!isNaN(parseFloat(input))) {
|
||||
return { type: TYPES.number, value: parseFloat(input) }
|
||||
} else if (input[0] === '"' && input.slice(-1) === '"') {
|
||||
return { type: TYPES.string, value: input.slice(1, -1) }
|
||||
} else if (input[0] === ':') {
|
||||
return { type: TYPES.symbol, value: input.slice(1) }
|
||||
} else if (input.indexOf(':') > 0) {
|
||||
return { type: TYPES.symbol, host: input.split(':')[0], value: input.split(':')[1] }
|
||||
} else if (input === 'true' || input === 'false') {
|
||||
return { type: TYPES.bool, value: input === 'true' }
|
||||
} else {
|
||||
return { type: TYPES.identifier, value: input }
|
||||
}
|
||||
}
|
||||
|
||||
const parenthesize = function (input, list) {
|
||||
if (list === undefined) { return parenthesize(input, []) }
|
||||
const token = input.shift()
|
||||
if (token === undefined) {
|
||||
return list.pop()
|
||||
} else if (token === '\'(') {
|
||||
input.unshift('__fn')
|
||||
list.push(parenthesize(input, []))
|
||||
return parenthesize(input, list)
|
||||
} else if (token === '{') {
|
||||
input.unshift('__obj')
|
||||
list.push(parenthesize(input, []))
|
||||
return parenthesize(input, list)
|
||||
} else if (token === '(') {
|
||||
list.push(parenthesize(input, []))
|
||||
return parenthesize(input, list)
|
||||
} else if (token === ')' || token === '}') {
|
||||
return list
|
||||
} else {
|
||||
return parenthesize(input, list.concat(categorize(token)))
|
||||
}
|
||||
}
|
||||
|
||||
const tokenize = function (input) {
|
||||
const i = input.replace(/^;.*\n?/gm, '').replace(/λ /g, 'lambda ').split('"')
|
||||
return i.map(function (x, i) {
|
||||
return i % 2 === 0
|
||||
? x.replace(/\(/g, ' ( ')
|
||||
.replace(/\)/g, ' ) ')
|
||||
.replace(/' \( /g, ' \'( ') // '()
|
||||
.replace(/\{/g, ' { ') // {}
|
||||
.replace(/\}/g, ' } ') // {}
|
||||
: x.replace(/ /g, '!whitespace!')
|
||||
})
|
||||
.join('"').trim().split(/\s+/)
|
||||
.map(function (x) { return x.replace(/!whitespace!/g, ' ') })
|
||||
}
|
||||
|
||||
this.parse = function (input) {
|
||||
return parenthesize(tokenize(input))
|
||||
}
|
||||
|
||||
this.run = async function (input) {
|
||||
return interpret(this.parse(`((def theme (get-theme))(def frame (get-frame))(${input}))`))
|
||||
}
|
||||
}
|
@ -6,7 +6,6 @@ function Acels (client) {
|
||||
|
||||
this.order = []
|
||||
this.all = {}
|
||||
this.roles = {}
|
||||
this.pipe = null
|
||||
|
||||
this.install = (host = document.body) => {
|
||||
@ -40,10 +39,6 @@ function Acels (client) {
|
||||
this.all[accelerator] = { cat, name, downfn, upfn, accelerator }
|
||||
}
|
||||
|
||||
this.add = (cat, role) => {
|
||||
this.all[':' + role] = { cat, name: role, role }
|
||||
}
|
||||
|
||||
this.get = (accelerator) => {
|
||||
return this.all[accelerator]
|
||||
}
|
||||
|
@ -1,6 +1,5 @@
|
||||
'use strict'
|
||||
|
||||
/* global Image */
|
||||
/* global Image */
|
||||
|
||||
function Library (client) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user