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

Improved Workshop

Browse Source
This commit is contained in:
Devine Lu Linvega 2019-07-25 15:02:02 +09:00
parent 7713d598ce
commit df72684510
2 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -6,7 +6,7 @@ Ronin is a <b>procedural graphics tool</b> designed to automate simple graphical
The library updates is constantly revealing new applications to Ronin, you can see the list of available functions <a href="https://github.com/hundredrabbits/Ronin#library" target="_blank" rel="noreferrer" class="external ">here</a>. Most of our iconography and designs were created with both <a href="https://hundredrabbits.itch.io/Ronin" target="_blank">Ronin</a> and <a href="https://hundredrabbits.itch.io/dotgrid">Dotgrid</a>. The library updates is constantly revealing new applications to Ronin, you can see the list of available functions <a href="https://github.com/hundredrabbits/Ronin#library" target="_blank" rel="noreferrer" class="external ">here</a>. Most of our iconography and designs were created with both <a href="https://hundredrabbits.itch.io/Ronin" target="_blank">Ronin</a> and <a href="https://hundredrabbits.itch.io/dotgrid">Dotgrid</a>.
Learn more by reading the <a href="https://github.com/Hundredrabbits/Ronin" target="_blank" rel="noreferrer" class="external ">manual</a>, or have a look at some experiments on <a href="https://twitter.com/neauoire/status/1152481692193419267" target="_blank" rel="noreferrer" class="external ">twitter</a>. If you need <b>help</b>, visit the <a href="https://hundredrabbits.itch.io/ronin/community" target="_blank" rel="noreferrer" class="external ">Community</a>. Learn more by reading the <a href="https://github.com/Hundredrabbits/Ronin" target="_blank" rel="noreferrer" class="external ">manual</a>, or have a look at some experiments on <a href="https://twitter.com/neauoire/status/1152481692193419267" target="_blank" rel="noreferrer" class="external ">twitter</a>. If you need <b>help</b>, visit the <a href="https://hundredrabbits.itch.io/ronin/community" target="_blank" rel="noreferrer" class="external ">Community</a>, or follow the [Workshop](https://github.com/hundredrabbits/Ronin/blob/master/WORKSHOP.md).
```lisp ```lisp
; draw a red square ; draw a red square
@ -31,7 +31,7 @@ npm start
Additional functions can be found in the [includes](https://github.com/hundredrabbits/Ronin/tree/master/desktop/sources/lisp), you can also look at the [examples](https://github.com/hundredrabbits/Ronin/tree/master/examples) to see them in action. Additional functions can be found in the [includes](https://github.com/hundredrabbits/Ronin/tree/master/desktop/sources/lisp), you can also look at the [examples](https://github.com/hundredrabbits/Ronin/tree/master/examples) to see them in action.
- `(import path rect)` Imports a graphic file with format. - `(import path shape)` Imports a graphic file with format.
- `(export path ~format ~quality)` Exports a graphic file with format. - `(export path ~format ~quality)` Exports a graphic file with format.
- `(open path)` Imports a graphic file and resizes the frame. - `(open path)` Imports a graphic file and resizes the frame.
- `(move x y)` - `(move x y)`

35
WORKSHOP.md
View File

@ -9,11 +9,11 @@ This workshop is designed to go over the **most commonly used functions** with [
## Images ## 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. This section will teach the basics of opening, cropping and saving an image file. You can use the `$path` helper to quickly get an image's path into Ronin, by writing `$path` and dragging a file onto the Ronin window.
### Open ### 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`: 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`:
``` ```
(open $path) (open $path)
@ -64,20 +64,27 @@ For example, a version of that same code with file paths, might look something l
## Draw ## Draw
This section will show how to draw some basic shapes and colorize them. This section will teach you how to draw some basic shapes and colorize them.
### Stroke ### Stroke
To draw the outline of any shape, wrap the shape(rect, line, circle, ..) 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:
``` ```
(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:
```
(stroke
$rect 10 "red")
```
### Fill ### Fill
To fill the inside of any shape, wrap the shape(rect, line, circle, ..) 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:
``` ```
(fill (fill
@ -86,7 +93,7 @@ To fill the inside of any shape, wrap the shape(rect, line, circle, ..) inside o
### Gradient ### Gradient
To colorize a stroke or a fill with a gradient, use the `(gradient line color)`: 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")`:
``` ```
(clear) (clear)
@ -97,7 +104,7 @@ To colorize a stroke or a fill with a gradient, use the `(gradient line color)`:
("white" "black"))) ("white" "black")))
``` ```
To better understand how the line affects the coloring of the circle, wrap the `$line` inside a `(guide)`, as follows: 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:
``` ```
(clear) (clear)
@ -110,7 +117,7 @@ To better understand how the line affects the coloring of the circle, wrap the `
### Clear ### Clear
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:
``` ```
(clear) (clear)
@ -126,7 +133,7 @@ This section will cover how to manipulate the pixels of an image.
### Pixels ### Pixels
First let's open an image, ideally one in color, and change every pixel of a selected area: First let's open an image, ideally one in color, and change every pixel of a selected area at `(rect 100 100 200 200)`:
``` ```
(open $path) (open $path)
@ -136,7 +143,7 @@ First let's open an image, ideally one in color, and change every pixel of a sel
### saturation ### saturation
In the previous example, we boosted the saturation of a region of the image, to desaturate an entire image, you can first use `(frame)` which returns the size of the entire canvas, and set the pixel filter to `saturation` and the value to `0.5`: 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):
``` ```
(open $path) (open $path)
@ -146,7 +153,7 @@ In the previous example, we boosted the saturation of a region of the image, to
### convolve ### convolve
Effects which use the surrounding pixels, or convolution matrix, are used with the `(convolve)` function, you can learn more about it [here](https://en.wikipedia.org/wiki/Kernel_(image_processing)). Effects which use the surrounding pixels, or convolution matrix, are used with the `(convolve)` function, you can learn more about this family of filters [here](https://en.wikipedia.org/wiki/Kernel_(image_processing)).
### sharpen ### sharpen
@ -175,7 +182,7 @@ This section will demonstrate how to use events in Ronin to create interactive s
### Echo ### Echo
You can print some content to the screen in Ronin, by using the `(echo)` function, for example: 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:
``` ```
(echo "hello") (echo "hello")
@ -189,7 +196,7 @@ Let's use the `(debug)` function to display the position of the mouse cursor in
(on "mouse-down" echo) (on "mouse-down" echo)
``` ```
We can define a function that happens when the `mouse-down` event is detected: We can define a function that triggers when the `mouse-down` event is detected, or when you click on the canvas:
``` ```
; define the function ; define the function
@ -225,6 +232,8 @@ The `animate` event fires around 30 times per second, and is a perfect tool to c
(on "animate" wob-rect) (on "animate" wob-rect)
``` ```
You can find a more elaborate version of this example [here](https://github.com/hundredrabbits/Ronin/blob/master/examples/events/on-animate.lisp).
### OSC ### OSC
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: