From 2bad8c3568b722b3eeccbce69da965d8a5ab2130 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Thu, 25 Jul 2019 12:30:35 +0900
Subject: [PATCH] Starting workshop

---
 WORKSHOP.md                        | 79 ++++++++++++++++++++++++++++++
 desktop/sources/scripts/library.js | 10 ++--
 2 files changed, 83 insertions(+), 6 deletions(-)
 create mode 100644 WORKSHOP.md

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