🌈

Ruby で Processing する gem（とアプリ）の紹介

2020/12/15に公開

iOS

(2023/12/02更新 - gem 名の変更等、動かなくなっているコードなど一部修正しました)

この記事は Ruby Advent Calendar 2020 の15日目の記事です。

今日は Ruby でこれを描画するまでを書いてみたいと思います。

準備

さっそくですが Processing をご存知でしょうか。

Processingは、キャセイ・レアスとベンジャミン・フライによるオープンソースプロジェクトであり、かつてはMITメディアラボで開発されていた。電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境である。アーティストによるコンテンツ制作作業のために、詳細な設定を行う関数を排除している。
（ https://ja.wikipedia.org/wiki/Processing ）

その Processing の機能を再現した processing という gem を公開していますので今回はこれを使います。

インストール

まずは gem をインストールします。依存しているネイティブの拡張ライブラリを幾つかビルドするので Xcode がインストールされている必要があり、多少時間もかかります。^[1]

$ gem install processing

gem が無事インストールできたら試しに何か実行してみましょう。

hello.rb

# インストールした gem を読み込む
require 'processing'
using Processing

# draw ブロックで囲むと毎秒 60回繰り返し呼ばれる
draw do
  # テキストを (10, 20) の座標に描画
  text "hello, world!", 10, 20
end

$ ruby hello.rb

ちゃんとウィンドウが表示され文字が描画されました。

Processing しよう

準備ができたので、ここからは冒頭の絵作りに取り掛かります。
まずはウィンドウの中心に四角を描きましょう。

require 'processing'
using Processing
draw do
  # 矩形の中心を指定して描画するモードに変更
  rectMode CENTER

  # 描画位置をウィンドウの中心に移動
  translate width / 2, height / 2

  # 座標 (0, 0) に大きさ 100x100 の矩形を描画
  rect 0, 0, 100, 100
end

次は大きさを変えながら矩形を重ねて描画してみます。

require 'processing'
using Processing
draw do
  rectMode CENTER
  translate width / 2, height / 2

  # 矩形の大きさを画面幅から -10 しながら重ねて描画
  width.to_i.step(by: -10, to: 0) do |n|
    rect 0, 0, n, n
  end
end

目がチカチカしますねｗ
今度は大きさを変えつつ回転も入れてみましょう。

require 'processing'
using Processing
draw do
  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
end

ちょっといい感じになってきました。
真っ白だと寂しいので次は色を付けてみます。

require 'processing'
using Processing
draw do
  # 色の指定モードをデフォルトの 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
end

HSB で色を指定するとついやりがちですが、とてもカラフルになりましたｗ
ここから回転の量を調節して冒頭の画像に近づけていくのですが、rotate() に指定する数字を少しづつ変えて実行を繰り返すのは大変なのでちょっと工夫します。

require 'processing'
using 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
    
    # 回転量にマウスの X 座標を渡す
    rotate p(mouseX / width / 10)
  end
end

マウスの座標を rotate() に渡す事で、結果をリアルタイムに見ながら値を調整することができます。
このやり方で良い感じの値「0.3464390625」を見つけたので、その値で回転させるようにして最初の画像と同じ絵が表示されました。完成です！

require 'processing'
using 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 でやってみます。

ここまで使ってきた processing gem をそのまま組み込んだ、RubySketch というアプリも AppStore に公開していますのでこちらをインストールして使います。

アプリを起動して同じスクリプトをコピペして実行すると、だいたい同じ感じの絵が無事表示されました！
その様子がこちらです。

おわりに

Processing はグラフィックスプログラミングを始める上でのハードルが低くとても楽しいので、是非多くの人に触ってみてほしいと思います。

また RubySketch アプリの方は processing gem を動かすために CRuby をまるっとそのまま組み込んでます^[2]ので、スマホで動く Ruby インタプリターとしても遊べるかもしれません。

RubySKetch アプリについては Processing Advent Calendar 2020 にも記事を書いていますのでよければそちらもご覧いただければと思います。

脚注

ちなみに processing gem は現在 Mac のみの対応です。昔は Windows にも対応していたのですが、自宅に Windows マシンがなくなって久しい関係で最近は Windows でビルドできなくなっています。。。 ↩︎
ただし CRuby のバージョンは 2.6.6 とちょっと古いです ↩︎

準備

インストール

Processing しよう

iPhone でもやってみる

おわりに

Discussion