Improved cursor tools

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!

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 }
+    if (this._input.value.indexOf('$') < 0) { return }
-    console.log('capture')
     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 }
+    if (this._input.value.indexOf('$') < 0) { return }
-    console.log('inject')
+    const segs = this.cache.split('$')
-    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})`)
+    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

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)

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 pos = { x: e.offsetX * ronin.surface.ratio, y: e.offsetY * ronin.surface.ratio }
-    const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id)
+    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)
+    const pos = { x: e.offsetX * ronin.surface.ratio, y: e.offsetY * ronin.surface.ratio }
-    this.mouseTouch = null
+    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) => {
+  this.mouseShape = (position, type) => {
-    if (!this.mouseTouch) { return }
+    if (!this.mouseOrigin) { return }
-    const x = this.mouseTouch.x * ronin.surface.ratio
+    const x = position.x
-    const y = this.mouseTouch.y * ronin.surface.ratio
+    const y = position.y
-    const w = this.mouseTouch.x ? (pos.x * ronin.surface.ratio) - (this.mouseTouch.x * ronin.surface.ratio) : 0
+    const pos = { x, y }
-    const h = this.mouseTouch.y ? (pos.y * ronin.surface.ratio) - (this.mouseTouch.y * ronin.surface.ratio) : 0
+    const rect = {
-    const a = { x, y }
+      x: this.mouseOrigin.x,
-    const b = { x: x + w, y: y + h }
+      y: this.mouseOrigin.y,
-    return { x, y, w, h, a, b, type, 'is-down': this.mouseTouch !== null }
+      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

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.rect, 3, 'black', context)
-    this.stroke(shape, 1.5, 'white', 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) {

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") 
+          (line prev-pos:x prev-pos:y e:x e:y) 2 "white") 
-        (set prev-pos :x 
+        (set prev-pos "x" e:x "y" e:y) 
-          (of e :x) :y 
+        (debug prev-pos) 
-          (of e :y))))))
+        (debug e)))))
 ;
 (defn draw-circle 
   (e) 
   (
-    (set prev-pos :x 
+    (debug e) 
-      (of e :x) :y 
+    (set prev-pos "x" e:x "y" e:y) 
-      (of e :y)) 
+    (debug e:x) 
     (stroke 
-      (circle 
+      (circle e:x e:y 10) 4 
-        (of e :x) 
-        (of e :y) 10) 4 
       (stroke-color e))))
 ;
 (on "mouse-down" draw-circle)