ronin/WORKSHOP.md
2019-07-25 14:02:26 +09:00

3.2 KiB

Workshop

This workshop is designed to go over the most commonly used functions with Ronin. The list of all available functions and their usage is located here.

  • Part 1: Images (open), (import), (crop), (export)
  • Part 2: Draw (stroke), (fill), (gradient), (clear)
  • Part 3: Filters (pixels), (saturation), (convolve), (sharpen)
  • Part 4: 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, trace a shape in the canvas and press cmd+r:

(import $path 
  (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.

(import $path 
  (guide $line))

Crop

To crop the canvas, type the following text, drag an image file onto the Ronin window press cmd+r:

(import $path 
  (pos 0 0))
(crop 
  (rect 50 50 300 300))

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)
(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:

(import "~/Desktop/photo.jpg")
(export "~/Desktop/export.png")

Draw

This section will show how to draw some basic shapes and colorize them.

Stroke

To draw the outline of any shape, wrap the shape(rect, line, circle, ..) inside of a (stroke shape width color) function, like:

(stroke 
  (rect 100 100 300 200) 10 "red")

Fill

To fill the inside of any shape, wrap the shape(rect, line, circle, ..) inside of a (fill shape color) function, like:

(fill 
  (rect 100 100 300 200) "orange")

Gradient

To colorize a stroke or a fill with a gradient, use the (gradient line color):

(clear)
(fill 
  (circle 300 300 200) 
  (gradient 
    (line 0 0 500 500) 
    ("white" "black")))

To better understand how the line affects the coloring of the circle, wrap the $line inside a (guide), as follows:

(clear)
(fill 
  (circle 300 300 200) 
  (gradient 
    (guide $line)
    ("white" "black")))

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:

(clear)
(fill 
  (frame) "red")
(clear 
  (rect 100 100 300 300))

Pixels

Pixels

saturation

convolve

sharpen

Events

On

MouseMove

Animate

OSC