RoninのWorkshop（書き終わった）

#Ronin Workshop 日本語訳
ORCAの作者によるビジュアル言語Roninの解説を日本語訳しました。
元ファイルはこちら：
https://github.com/hundredrabbits/Ronin/blob/master/WORKSHOP.md

#Workshop
このワークショップではRobin でよく使う機能を紹介しています。
利用可能なファンクションのリストとその使い方はこちら。
https://github.com/hundredrabbits/Ronin/#library
ビデオチュートリアルはここにあります。
https://www.youtube.com/watch?v=SgAWGh1s9zg&feature=youtu.be

• Part 1: Images (open), (import), (crop), (export)

• Part 2: Draw (stroke), (fill), (gradient), (clear)
  

• Part 3: Filters (pixels), (saturation), (convolve), (sharpen)
  

• Part 4: Events (echo), (on "mouse-down"), (on "animate"), (on "/a")
  

訳注：
スクリプト内の;はコメントです
Roninウインドウ >> 左側のスクリプトを書く場所
キャンバス >> 右側の絵が出力されるところ
インターフェース >> 左下の値などがプリント出力（ポスト）されるところ

#Images 画像ファイル

##Open

ここでは画像のファイルの開き方、切り取り方、保存の方法を学びます。Roninで手取り早くの画像ファイルのパスを取得する方法は、$path と書いてから、Robinのウインドウにファイルをドラッグ＆ドロップします。

画像ファイルを開いて、画像サイズにフィットするようにキャンバスをリサイズしてみましょう。次のテキストをタイプして、Roninのウインドウにイメージファイルをドラッグ＆ドロップして、コマンドキーとrをタイプします（または左下のオレンジ色のボタンを押すとプログラムが走ります）。

(open $path)

##Import インポート

現在のキャンバスに画像をインポートするには、次のテキストをタイプして、Roninのウインドウにイメージファイルをドラッグ＆ドロップします。キャンパスをマウスでドラッグしてrectを指定してから、コマンドキーとrをタイプします（または左下のオレンジ色のボタンを押すとプログラムが走ります）。

(import $path (guide $rect))

上のコードでは画像のレシオ（縦横比）を保ったままインポートしました。＄lineを使うと、imageを引き伸ばしたり、$posでシンプルに元の画像サイズのまま描画します。

(import $path (guide $line))

##Crop 切り取り

キャンバスを切り取るには、次のテキストをタイプして、Roninのウインドウにイメージファイルをドラッグ＆ドロップして、コマンドキーとrをタイプします。

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

##Export 書き出し
描画結果の画像を書き出すには、Roninのウインドウにイメージファイルをドラッグ＆ドロップします。次にフォルダをドラッグするとRoninのウインドウのexportの後にフォルダのパスが挿入されるので、その後に新しいファイル名を追加し、コマンドキーとrをタイプします。

(import $path) (export $path)

上記の操作をした場合、例えばこのようになります。

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

またこのようにインポートのパスからエクスポートのパスを生成することができます：

(def import-path $path) (def export-path (concat (dirpath import-path) "/" (filename import-path) "-export.jpg")) (import import-path) ; "~/Desktop/photo.jpg" (export export-path) ; "~/Desktop/photo-export.jpg"

#Draw
ここでは基本的な図形の描き方と色の指定方法を学びます。

##Stroke 描画

Roninでのshapeは、(rect), (line), (circle) (pos)のどれかになります。shapeの枠を色を指定して描くには次のようにします：

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

またはマウスで描画したい場合は、次の$マーク付きのコードを書いて、描画ウィンドウをドラッグしてから、コマンドキーとrをタイプすると、ドラッグした位置とサイズで描画されます。

(stroke $rect "red" 10)

##Fill

shapeの内側も色を塗りたい場合は、fillファンクションを使います。fillでshapeとカラーを囲います。(fill shape color)

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

##Gradient

線や塗りつぶしをグラデーションで色付けたい場合は、 (gradient line colors)を使います。colorsには("blue" "red" "yellow”)のように色のリストを指定します。

(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 to preserve the guide interface:
円形のカラーリングがどのように作用するかを理解するには、(guide)の内側に$lineを囲い込みます。

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

##Clear

上記の例では、(clear)ファンクションを使い、キャンバスをクリアにしました。キャンバスの一部だけをクリアすることもできます。

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

#Filters

ここでは画像のピクセルの操作について学びます。

This section will cover how to manipulate the pixels of an image.

##Pixels

まず画像ファイルを開きます。カラーの画像が望ましいです。(rect 100 100 200 200)と指定したエリアのすべてのピクセルを変換してみましょう。

(open $path) (pixels saturation 10 (rect 100 100 200 200))

##saturation 彩度
前の例では、画像の特定の範囲の彩度を強めました。画像全体の彩度を減らすには、(frame)を省略すれば画像の全体を選ぶことになります。(pixels saturation 0.5)で、ピクセルフィルターをsaturation、その値を0.5(50%の彩度)にセットします。

(open $path) (pixels saturation 0.5)

##convolve コンボリューション

周辺ピクセル（訳注：surrounding pixelsの専門用語ご存知でしたらお知らせを！）やコンボリューション行列を使ったエフェクトは(convolve)ファンクションを使います。このようなフィルタについてはこちらで学べます。

sharpen シャープにする

(open $path) (convolve sharpen $rect)

コンボリューションのカーネルを次のようにカスタマイズすることもできます。

(open $path) (def blur ( (-1 -1 -1) (-1 5 -1) (-1 -1 -1))) (convolve blur)

#Events

ここではRoninでインタラクティブなスクリプトを作るためのイベントの使い方について学びます。

##Echo エコー（プリント）

(echo)ファンクションを使うと、Roninのスクリーンに内容をプリントすることができます。例えば次のスクリプトではhelloという言葉が、左下のインターフェースに表示されます。

(echo "hello")

##MouseDown マウスダウン

(debug) ファンクションを使い、インターフェースにマウスカーソルの位置を表示してみましょう。

(on "mouse-down" echo)

マウスダウン（マウスが押されているとき）またはキャンバスをクリックしたイベントを検出し、トリガーされるファンクションを定義することができます。

; define the function (defn draw-rect (e) (fill e:circle "red")) ; use the function (on "mouse-move" draw-rect)

他のファンクションのサンプルは「examples」フォルダを参照してください。
https://github.com/hundredrabbits/Ronin/tree/master/examples

もっと複雑な例はこちらをご覧ください：
https://github.com/hundredrabbits/Ronin/blob/master/examples/events/on-mouse.lisp

##Animate

アニメイトイベントは１秒に30回ほど起こります(訳注：原文の動詞はfiresでした)。これはアニメーションをするには完全なツールです。

前のサンプルに続いて、ファンクションをつくりイベントを結びつけます。ボックスをアニメイトする(time)を使ったファンクションを作りましょう

; define the function (defn wob-rect () ( (clear) (def rect-x 300) (def rect-y (add (mul (sin (time 0.005)) 50) 300)) (fill (rect rect-x rect-y 100 100) "red"))) ; use the function (on "animate" wob-rect)

もっと複雑な例はこちらをご覧ください：
https://github.com/hundredrabbits/Ronin/blob/master/examples/events/on-animate.lisp

#OSC

OSCを通じて、Ronin以外のプログラムろコミュニケーションすることができます。ポートの49162番にパス/aのついたOSCデータを送れは、それをRoninで受け取りファンクションをトリガーすることができます。

(on "/a" echo)

もっと複雑な例はこちらをご覧ください：
https://github.com/hundredrabbits/Ronin/blob/master/examples/events/on-osc.lisp

このワークショップがお役に立てれば幸いです！もし質問や提案があれば、コミュニティを訪れてください。Enjoy!
https://hundredrabbits.itch.io/ronin/community

#終わりに
翻訳で間違いなどありましたら、編集リクエストしてくださると嬉しいです。次回のORCA/Ronin勉強会は、2019/9/13(金)の夜に葛西スペースで行いますので是非ご参加ください！

葛西スペース
www.kasaispace.com