Ruby で Processing する gem（とアプリ）の紹介
この記事は Ruby Advent Calendar 2020 の15日目の記事です。
今日は Ruby でこれを描画するまでを書いてみたいと思います。
準備
さっそくですが Processing をご存知でしょうか。
Processingは、キャセイ・レアスとベンジャミン・フライによるオープンソースプロジェクトであり、かつてはMITメディアラボで開発されていた。電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境である。アーティストによるコンテンツ制作作業のために、詳細な設定を行う関数を排除している。
（ https://ja.wikipedia.org/wiki/Processing ）
その Processing の機能を再現した rubysketch という gem を公開していますので今回はこれを使います。
インストール
まずは gem をインストールします。依存しているネイティブの拡張ライブラリを幾つかビルドするので多少時間がかかります。[1]
$ gem install rubysketch
gem が無事インストールできたら試しに何か実行してみましょう。
# インストールした gem を読み込む
require 'rubysketch-processing'
# テキストを (10, 20) の座標に描画
text "hello, world!", 10, 20
$ ruby hello.rb
ちゃんとウィンドウが表示され文字が描画されました。
Processing しよう
準備ができたので、ここからは冒頭の絵作りに取り掛かります。
まずはウィンドウの中心に四角を描きましょう。
require 'rubysketch-processing'
# 矩形の中心を指定して描画するモードに変更
rectMode CENTER
# 描画位置をウィンドウの中心に移動
translate width / 2, height / 2
# 座標 (0, 0) に大きさ 100x100 の矩形を描画
rect 0, 0, 100, 100
次は大きさを変えながら矩形を重ねて描画してみます。
require 'rubysketch-processing'
rectMode CENTER
translate width / 2, height / 2
# 矩形の大きさを画面幅から -10 しながら重ねて描画
width.to_i.step(by: -10, to: 0) do |n|
rect 0, 0, n, n
end
目がチカチカしますねｗ
今度は大きさを変えつつ回転も入れてみましょう。
require 'rubysketch-processing'
rectMode CENTER
translate width / 2, height / 2
width.to_i.step(by: -50, to: 0) do |n|
rect 0, 0, n, n
# 矩形を描画するたびに 0.1 ラジアン回転
rotate 0.1
end
ちょっといい感じになってきました。
真っ白だと寂しいので次は色を付けてみます。
require 'rubysketch-processing'
# 色の指定モードをデフォルトの RGB から HSB に変更
colorMode HSB, 1
rectMode CENTER
translate width / 2, height / 2
width.to_i.step(by: -50, to: 0) do |n|
# 矩形を描画するたびに色相を 0.0 から 1.0 まで変化させる
fill n / width, 0.7, 1
rect 0, 0, n, n
rotate 0.1
end
HSB で色を指定するとついやりがちですが、とてもカラフルになりましたｗ
ここから回転の量を調節して冒頭の画像に近づけていくのですが、rotate() に指定する数字を少しづつ変えて実行を繰り返すのは大変なのでちょっと工夫します。
require 'rubysketch-processing'
# draw ブロックで囲むと毎秒 60回繰り返し呼ばれる
draw do
colorMode HSB, 1
rectMode CENTER
translate width / 2, height / 2
width.to_i.step(by: -10, to: 0) do |n|
fill n / width, 0.7, 1
rect 0, 0, n, n
# 回転量にマウスの X 座標を渡す
rotate p(mouseX / width / 10)
end
end
マウスの座標を rotate() に渡す事で、結果をリアルタイムに見ながら値を調整することができます。
このやり方で良い感じの値 「0.3464390625」 を見つけたので、その値で回転させるようにして最初の画像と同じ絵が表示されました。完成です！
require 'rubysketch-processing'
draw do
colorMode HSB, 1
rectMode CENTER
translate width / 2, height / 2
width.to_i.step(by: -10, to: 0) do |n|
fill n / width, 0.7, 1
rect 0, 0, n, n
# 決めた値を回転量に渡す
rotate 0.3464390625
end
end
iPhone でもやってみる
と、ここまでは Mac で作業していましたが、唐突ですがここからは iPhone でやってみます。
ここまで使ってきた rubysketch gem をそのまま組み込んだ、同じ名前の RubySketch というアプリも AppStore に公開していますのでこちらをインストールして使います。
アプリを起動して同じスクリプトをコピペして実行すると、だいたい同じ感じの絵が無事表示されました！
その様子がこちらです。
おわりに
Processing はグラフィックスプログラミングを始める上でのハードルが低くとても楽しいので、是非多くの人に触ってみてほしいと思います。
また RubySketch アプリの方は rubysketch gem を動かすために CRuby をまるっとそのまま組み込んでます[2]ので、スマホで動く Ruby インタプリターとしても遊べるかもしれません。
RubySKetch アプリについては Processing Advent Calendar 2020 にも記事を書いていますのでよければそちらもご覧いただければと思います。
Discussion