From 0c51b3d32ee18d3faef65e4433a68ae747d73d4d Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Fri, 26 Jul 2019 09:32:44 +0900 Subject: [PATCH] Improved cursor tools --- WORKSHOP.md | 6 +++- desktop/sources/scripts/commander.js | 27 +++++++++++---- desktop/sources/scripts/library.js | 2 +- desktop/sources/scripts/ronin.js | 49 ++++++++++++++++++---------- desktop/sources/scripts/surface.js | 8 +++-- examples/projects/drawing.lisp | 23 +++++++------ 6 files changed, 76 insertions(+), 39 deletions(-) diff --git a/WORKSHOP.md b/WORKSHOP.md index 8ef0dd8..070a1fa 100644 --- a/WORKSHOP.md +++ b/WORKSHOP.md @@ -202,13 +202,15 @@ We can define a function that triggers when the `mouse-down` event is detected, ; define the function (defn draw-rect (e) - (fill e "red")) + (fill e:circle "red")) ; use the function (on "mouse-up" 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: @@ -237,4 +239,6 @@ Other programs can communicate with Ronin via OSC with the previous pattern. For (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! diff --git a/desktop/sources/scripts/commander.js b/desktop/sources/scripts/commander.js index 957042c..8893be3 100644 --- a/desktop/sources/scripts/commander.js +++ b/desktop/sources/scripts/commander.js @@ -109,20 +109,35 @@ function Commander (ronin) { this.cache = this._input.value this.capture = function () { - if (this._input.value.indexOf('$') < 1) { return } - console.log('capture') + if (this._input.value.indexOf('$') < 0) { return } this.cache = this._input.value } this.injectPath = function (path) { - if (this._input.value.indexOf('$') < 1) { return } + if (this._input.value.indexOf('$') < 0) { return } this._input.value = this._input.value.replace('$path', `"${path}"`) } this.commit = function (shape) { - if (this._input.value.indexOf('$') < 1) { return } - console.log('inject') - this._input.value = this.cache.replace('$rect', `(rect ${shape.x} ${shape.y} ${shape.w} ${shape.h})`).replace('$pos', `(pos ${shape.x} ${shape.y})`).replace('$line', `(line ${shape.a.x} ${shape.a.y} ${shape.b.x} ${shape.b.y})`) + if (this._input.value.indexOf('$') < 0) { return } + const segs = this.cache.split('$') + const seg = segs[1] + const words = seg.split(' ') + const word = words[0] + if (word === 'rect' && shape.rect) { + const rect = shape.rect + this._input.value = this.cache.replace('$rect', `(rect ${rect.x} ${rect.y} ${rect.w} ${rect.h})`) + } else if (word === 'pos' && shape.pos) { + const pos = shape.pos + this._input.value = this.cache.replace('$pos', `(pos ${pos.x} ${pos.y})`) + } else if (word === 'line' && shape.line) { + const line = shape.line + this._input.value = this.cache.replace('$line', `(line ${line.a.x} ${line.a.y} ${line.b.x} ${line.b.y})`) + } else if (word === 'circle' && shape.circle) { + const circle = shape.circle + console.log(circle) + this._input.value = this.cache.replace('$circle', `(circle ${circle.cx} ${circle.cy} ${circle.r})`) + } } // Display diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js index 6bc46dd..d9f4141 100644 --- a/desktop/sources/scripts/library.js +++ b/desktop/sources/scripts/library.js @@ -393,7 +393,7 @@ function Library (ronin) { acc += img.data[x * 4 + y * rect.w * 4 + i % 4] * kernel[kx][ky] / sigma } out[i] = acc - if (i % 4 == 3) out[i] = 255 + if (i % 4 === 3) out[i] = 255 } img.data.set(out, 0) ronin.surface.context.putImageData(img, rect.x, rect.y) diff --git a/desktop/sources/scripts/ronin.js b/desktop/sources/scripts/ronin.js index 4a430f2..821d068 100644 --- a/desktop/sources/scripts/ronin.js +++ b/desktop/sources/scripts/ronin.js @@ -76,11 +76,12 @@ function Ronin () { // Cursor - this.mouseTouch = null + this.mouseOrigin = null this.onMouseDown = (e, id = 'mouse-down') => { - this.mouseTouch = { x: e.offsetX, y: e.offsetY } - const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id) + const pos = { x: e.offsetX * ronin.surface.ratio, y: e.offsetY * ronin.surface.ratio } + this.mouseOrigin = pos + const shape = this.mouseShape(pos, id) if (this.bindings[id]) { this.bindings[id](shape) } @@ -89,35 +90,49 @@ function Ronin () { } this.onMouseMove = (e, id = 'mouse-move') => { - const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id) + const pos = { x: e.offsetX * ronin.surface.ratio, y: e.offsetY * ronin.surface.ratio } + const shape = this.mouseShape(pos, id) if (this.bindings[id]) { this.bindings[id](shape) } - if (this.mouseTouch) { + if (this.mouseOrigin) { this.commander.commit(shape) this.surface.drawGuide(shape) } } this.onMouseUp = (e, id = 'mouse-up') => { - const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id) - this.mouseTouch = null + const pos = { x: e.offsetX * ronin.surface.ratio, y: e.offsetY * ronin.surface.ratio } + const shape = this.mouseShape(pos, id) if (this.bindings[id]) { this.bindings[id](shape) } + this.mouseOrigin = null this.surface.clearGuide() - console.log(this.bindings) } - this.makeMouseOffset = (pos, type) => { - if (!this.mouseTouch) { return } - const x = this.mouseTouch.x * ronin.surface.ratio - const y = this.mouseTouch.y * ronin.surface.ratio - const w = this.mouseTouch.x ? (pos.x * ronin.surface.ratio) - (this.mouseTouch.x * ronin.surface.ratio) : 0 - const h = this.mouseTouch.y ? (pos.y * ronin.surface.ratio) - (this.mouseTouch.y * ronin.surface.ratio) : 0 - const a = { x, y } - const b = { x: x + w, y: y + h } - return { x, y, w, h, a, b, type, 'is-down': this.mouseTouch !== null } + this.mouseShape = (position, type) => { + if (!this.mouseOrigin) { return } + const x = position.x + const y = position.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 line = { + a: { x: this.mouseOrigin.x, y: this.mouseOrigin.y }, + b: { x: pos.x, y: pos.y } + } + const distance = 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 circle = { + cx: this.mouseOrigin.x, + cy: this.mouseOrigin.y, + r: distance + } + return { x, y, line, rect, pos, circle, type, 'is-down': type !== 'mouse-up' ? true : null } } // Zoom diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js index 7bd0813..7ca5e34 100644 --- a/desktop/sources/scripts/surface.js +++ b/desktop/sources/scripts/surface.js @@ -166,8 +166,12 @@ function Surface (ronin) { this.drawGuide = function (shape, context = this.guide) { this.clearGuide() - this.stroke(shape, 3, 'black', context) - this.stroke(shape, 1.5, 'white', context) + this.stroke(shape.rect, 3, 'black', context) + this.stroke(shape.line, 3, 'black', context) + this.stroke(shape.circle, 3, 'black', context) + this.stroke(shape.rect, 1.5, 'white', context) + this.stroke(shape.line, 1.5, 'white', context) + this.stroke(shape.circle, 1.5, 'white', context) } this.clone = function (a, b) { diff --git a/examples/projects/drawing.lisp b/examples/projects/drawing.lisp index f21a529..7316877 100644 --- a/examples/projects/drawing.lisp +++ b/examples/projects/drawing.lisp @@ -7,30 +7,29 @@ (defn stroke-color (e) (if - (of e :is-down) "#ffb545" "#72dec2")) + (eq e:is-down true) "#ffb545" "#72dec2")) ; (defn draw-line (e) ( (if - (of e :is-down) + (eq e:is-down true) ( + (debug e:is-down) (stroke - (line (of prev-pos :x) (of prev-pos :y) (of e :x) (of e :y)) 2 "white") - (set prev-pos :x - (of e :x) :y - (of e :y)))))) + (line prev-pos:x prev-pos:y e:x e:y) 2 "white") + (set prev-pos "x" e:x "y" e:y) + (debug prev-pos) + (debug e))))) ; (defn draw-circle (e) ( - (set prev-pos :x - (of e :x) :y - (of e :y)) + (debug e) + (set prev-pos "x" e:x "y" e:y) + (debug e:x) (stroke - (circle - (of e :x) - (of e :y) 10) 4 + (circle e:x e:y 10) 4 (stroke-color e)))) ; (on "mouse-down" draw-circle)