diff --git a/WORKSHOP.md b/WORKSHOP.md new file mode 100644 index 0000000..2ed10d7 --- /dev/null +++ b/WORKSHOP.md @@ -0,0 +1,79 @@ +# Workshop + +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). + +- **Part 1**: [Images](#Images) `(open)`, `(import)`, `(crop)`, `(export)` +- **Part 2**: [Draw](#Draw) `(stroke)`, `(fill)`, `(gradient)`, `(clear)` +- **Part 3**: [Filters](#Filters) `(pixels)`, `(saturation)`, `(convolve)`, `(sharpen)` +- **Part 4**: [Events](#Events) `(on)`, `(on "mouse-move")`, `(on "animate")`, `(on "/a")` + +## Images + +This section will teach the basics of opening, cropping and saving an image file. You can use the `$path` help to quickly get an image's path into Ronin, by writing `$path` and dragging a file onto the Ronin window. + +### Open + +To import an image, and resize the canvas to fit the image size, type the following text, drag an image file onto the Ronin window and press `cmd+r`: + +``` +(open $path) +``` + +### Import + +To import an image onto the current canvas, type the following text, drag an image file onto the Ronin window and press `cmd+r`: + +``` +(import $path + (rect 50 100 250 200)) +``` + +The previous code will import an image, and position it at `50,100`, at a size of `250x200`. Alternatively, you could use a `(pos)` to position the image and not resize it. + +``` +(import $path + (pos 50 100)) +``` + +### 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`: + +``` +(import $path + (pos 50 100)) +(export $path) +``` + +### Crop + +## Draw + +### Stroke + +### Fill + +### Gradient + +### Clear + +## Pixels + +### Pixels + +### saturation + +### convolve + +### sharpen + +## Events + +### On + +### MouseMove + +### Animate + +### OSC + diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js index d2b42ac..ed00117 100644 --- a/desktop/sources/scripts/library.js +++ b/desktop/sources/scripts/library.js @@ -93,6 +93,10 @@ function Library (ronin) { ronin.surface.fill(rect, color) return rect } + + this.gradient = (line, colors = ['white', 'black']) => { + return ronin.surface.linearGradient(line.a.x, line.a.y, line.b.x, line.b.y, colors) + } this.clear = (rect = this.frame()) => { // Clears a rect. ronin.surface.clear(rect) @@ -144,12 +148,6 @@ function Library (ronin) { return getComputedStyle(el).getPropertyValue(`--${variable}`) } - // Gradients - - this.gradient = (line, colors = ['white', 'black']) => { - return ronin.surface.linearGradient(line.a.x, line.a.y, line.b.x, line.b.y, colors) - } - // Pixels this.pixels = (rect, fn, q) => {