dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved cursor tools

Browse Source
This commit is contained in:
Devine Lu Linvega 2019-07-26 09:32:44 +09:00
parent 9916331188
commit 0c51b3d32e
6 changed files with 76 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
WORKSHOP.md
View File

@ -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!

27
desktop/sources/scripts/commander.js
View File

@ -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

2
desktop/sources/scripts/library.js
View File

@ -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)

49
desktop/sources/scripts/ronin.js
View File

@ -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

8
desktop/sources/scripts/surface.js
View File

@ -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) {

23
examples/projects/drawing.lisp
View File

@ -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)