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

Updated docs

Browse Source
This commit is contained in:
Devine Lu Linvega
2019-07-27 21:07:25 +09:00
parent 72a99547dd
commit adec70791e
1 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
WORKSHOP.md
View File

@@ -15,7 +15,7 @@ This section will teach the basics of opening, cropping and saving an image file
To open 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`: To open 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`:
``` ```lisp
(open $path) (open $path)
``` ```
@@ -23,14 +23,14 @@ To open an image, **and resize the canvas to fit the image size**, type the foll
To import an image onto the current canvas, type the following text, drag an image file onto the Ronin window, trace a shape in the canvas and press `cmd+r`: To import an image onto the current canvas, type the following text, drag an image file onto the Ronin window, trace a shape in the canvas and press `cmd+r`:
``` ```lisp
(import $path (import $path
(guide $rect)) (guide $rect))
``` ```
The previous code will import an image, and preserve its ratio. Alternatively, you could use a `$line` to stretch the image, or a `$pos` to simply draw the image at its original size. The previous code will import an image, and preserve its ratio. Alternatively, you could use a `$line` to stretch the image, or a `$pos` to simply draw the image at its original size.
``` ```lisp
(import $path (import $path
(guide $line)) (guide $line))
``` ```
@@ -39,7 +39,7 @@ The previous code will import an image, and preserve its ratio. Alternatively, y
To crop the canvas, type the following text, drag an image file onto the Ronin window press `cmd+r`: To crop the canvas, type the following text, drag an image file onto the Ronin window press `cmd+r`:
``` ```lisp
(import $path (import $path
(pos 0 0)) (pos 0 0))
(crop (crop
@@ -50,18 +50,26 @@ To crop the canvas, type the following text, drag an image file onto the Ronin w
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`: 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`:
``` ```lisp
(import $path) (import $path)
(export $path) (export $path)
``` ```
For example, a version of that same code with file paths, might look something like the following, notice how the `(rect)` is omitted, if a `(rect)` is not present, the entire canvas size will be exported: For example, a version of that same code with file paths, might look something like the following, notice how the `(rect)` is omitted, if a `(rect)` is not present, the entire canvas size will be exported:
``` ```lisp
(import "~/Desktop/photo.jpg") (import "~/Desktop/photo.jpg")
(export "~/Desktop/export.png") (export "~/Desktop/export.png")
``` ```
If you are working on from a saved `.lisp` file, you can also export directly into the working directory with:
```lisp
(export
(concat
(dirpath) "/" "hello.jpg"))
```
## Draw ## Draw
This section will teach you how to draw some basic shapes and colorize them. This section will teach you how to draw some basic shapes and colorize them.
@@ -70,14 +78,14 @@ This section will teach you how to draw some basic shapes and colorize them.
In Ronin, a shape is either a `(rect)`, a `(line)`, a `(circle)` or a `(pos)`. To draw the outline of any shape, wrap the shape inside of a `(stroke shape width color)` function, like: In Ronin, a shape is either a `(rect)`, a `(line)`, a `(circle)` or a `(pos)`. To draw the outline of any shape, wrap the shape inside of a `(stroke shape width color)` function, like:
``` ```lisp
(stroke (stroke
(rect 100 100 300 200) 10 "red") (rect 100 100 300 200) 10 "red")
``` ```
Or, if you would like to trace the shape with your mouse: Or, if you would like to trace the shape with your mouse:
``` ```lisp
(stroke (stroke
$rect 10 "red") $rect 10 "red")
``` ```
@@ -86,7 +94,7 @@ Or, if you would like to trace the shape with your mouse:
To fill the inside of any shape, wrap it inside of a `(fill shape color)` function, like: To fill the inside of any shape, wrap it inside of a `(fill shape color)` function, like:
``` ```lisp
(fill (fill
(rect 100 100 300 200) "orange") (rect 100 100 300 200) "orange")
``` ```
@@ -95,7 +103,7 @@ To fill the inside of any shape, wrap it inside of a `(fill shape color)` functi
To colorize a stroke or a fill, with a gradient, use the `(gradient line colors)` where the colors is a list of colors like `("blue" "red" "yellow")`: To colorize a stroke or a fill, with a gradient, use the `(gradient line colors)` where the colors is a list of colors like `("blue" "red" "yellow")`:
``` ```lisp
(clear) (clear)
(fill (fill
(circle 300 300 200) (circle 300 300 200)
@@ -106,7 +114,7 @@ To colorize a stroke or a fill, with a gradient, use the `(gradient line colors)
To better understand how the `(line)` affects the coloring of the circle, wrap the `$line` inside a `(guide)`, as follows to preserve the guide interface: To better understand how the `(line)` affects the coloring of the circle, wrap the `$line` inside a `(guide)`, as follows to preserve the guide interface:
``` ```lisp
(clear) (clear)
(fill (fill
(circle 300 300 200) (circle 300 300 200)
@@ -119,7 +127,7 @@ To better understand how the `(line)` affects the coloring of the circle, wrap t
In the previous example, we used the `(clear)` function, which clears the canvas, but it can also be used to clear only a part of the canvas: In the previous example, we used the `(clear)` function, which clears the canvas, but it can also be used to clear only a part of the canvas:
``` ```lisp
(clear) (clear)
(fill (fill
(frame) "red") (frame) "red")
@@ -135,7 +143,7 @@ This section will cover how to manipulate the pixels of an image.
First let's open an image, ideally one in color, and change every pixel of a selected area at `(rect 100 100 200 200)`: First let's open an image, ideally one in color, and change every pixel of a selected area at `(rect 100 100 200 200)`:
``` ```lisp
(open $path) (open $path)
(pixels (pixels
(rect 100 100 200 200) saturation 10) (rect 100 100 200 200) saturation 10)
@@ -145,7 +153,7 @@ First let's open an image, ideally one in color, and change every pixel of a sel
In the previous example, we increased the saturation of a region of the image, to desaturate an entire image, you can first use `(frame)` which will select the entire canvas, and set the pixel filter to `saturation` and the value to `0.5`(50% saturation): In the previous example, we increased the saturation of a region of the image, to desaturate an entire image, you can first use `(frame)` which will select the entire canvas, and set the pixel filter to `saturation` and the value to `0.5`(50% saturation):
``` ```lisp
(open $path) (open $path)
(pixels (pixels
(frame) saturation 0.5) (frame) saturation 0.5)
@@ -157,7 +165,7 @@ Effects which use the surrounding pixels, or convolution matrix, are used with t
### sharpen ### sharpen
``` ```lisp
(open $path) (open $path)
(convolve (convolve
(frame) sharpen) (frame) sharpen)
@@ -165,7 +173,7 @@ Effects which use the surrounding pixels, or convolution matrix, are used with t
Custom convolve kernels can also be created like this: Custom convolve kernels can also be created like this:
``` ```lisp
(open $path) (open $path)
(def blur (def blur
( (
@@ -184,7 +192,7 @@ This section will demonstrate how to use events in Ronin to create interactive s
You can print some content to the screen in Ronin, by using the `(echo)` function, for example, the following script will write the word `hello` at the bottom left of the interface: You can print some content to the screen in Ronin, by using the `(echo)` function, for example, the following script will write the word `hello` at the bottom left of the interface:
``` ```lisp
(echo "hello") (echo "hello")
``` ```
@@ -192,13 +200,13 @@ You can print some content to the screen in Ronin, by using the `(echo)` functio
Let's use the `(debug)` function to display the position of the mouse cursor in the interface. Let's use the `(debug)` function to display the position of the mouse cursor in the interface.
``` ```lisp
(on "mouse-down" echo) (on "mouse-down" echo)
``` ```
We can define a function that triggers when the `mouse-down` event is detected, or when you click on the canvas: We can define a function that triggers when the `mouse-down` event is detected, or when you click on the canvas:
``` ```lisp
; define the function ; define the function
(defn draw-rect (defn draw-rect
(e) (e)
@@ -215,7 +223,7 @@ You can find a more elaborate version of this example [here](https://github.com/
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: 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:
``` ```lisp
; define the function ; define the function
(defn wob-rect (defn wob-rect
() ()
@@ -235,7 +243,7 @@ You can find a more elaborate version of this example [here](https://github.com/
Other programs can communicate with Ronin via OSC with the previous pattern. For example, if you send OSC data to the port `49162`, at the path `/a`, the event can be used in Ronin to trigger a function: Other programs can communicate with Ronin via OSC with the previous pattern. For example, if you send OSC data to the port `49162`, at the path `/a`, the event can be used in Ronin to trigger a function:
``` ```lisp
(on "/a" echo) (on "/a" echo)
``` ```