rbCanvas/p5
https://rbcanvas.net/p5/

（rbCanvas/p5公式ページより）

1. はじめに

Rubyでゲームプログラミングというと、DXRubyライブラリが多く使われてきました。また、DXRubyと互換性のある統合開発環境として、rbCanvasや DXOpalなどもあります。

今回紹介する「rbCanvas/p5」は、上記のrbCanvasと姉妹関係にありますが、グラフィックの表現力がより強力で多彩になり、3D表現もできるようになりました。

これは、ビジュアルアートの分野で使われているProcessingや p5.js の力をRubyから使うことにより実現しています。そのため、これまで以上に素晴らしいグラフィック表現が可能となりました。

rbCanvas/p5は、ゲーム制作、クリエイティブコーディング、デジタルアートの分野で大変役立つツールとなるでしょう。

rbCanvasについては、以下の記事を参照ください。
→・インストール不要！ブラウザだけではじめるRubyゲームプログラミング環境「rbCanvas」の紹介（DXRubyスタイル）- Qiita

2. rbCanvas/p5とは

ブラウザ上で動くRubyエディタ・実行環境一体型の統合開発環境です。これは、最近ではp5.js、Scratchなどさまざまなプログラミング言語での開発にも採用されている方式です。

その一番の利点は、ブラウザとインターネット環境があれば、簡単にRubyのプログラミングを始められることにあります。

3. 主な特徴

Rubyのインストール不要
エディタ、ターミナルソフト（「コマンドプロンプト」、「PowerShell」、「ターミナル」など）不要
さまざまなOSで動作可能（Windowsや macOS、Linux、Android、iPadOS、iOSなど）
タブレット端末、スマートフォンでも動作可能
プログラムはOSに依存せず動作
保存操作なしで、直ちに実行可能
画像データも一体で管理
Processingや p5.jsに近い書式で記述可能

以上に加え、rbCanvas/p5は、p5.jsの持つ多彩なグラフィック表現が可能なのも魅力です。また、“MacでRubyのゲーム開発をしたい” という要望にも応えてくれます。

4. 動作環境

ブラウザ（Chrome推奨）
インターネット接続
ブラウザの動くOS（Windows、macOS、Linux、Android、iPadOS、iOSなど）
パソコン、または（外付けキーボードを接続した）タブレット、スマートフォン（※ タッチパネル操作にも一部対応）

5. 技術要素

HTML5 Canvas API、Ruby→Javascriptパーサ Opal、Javascriptエディタ Ace.js、p5.js などを採用しています。

6. 参考サイト

rbCanvas/p5公式ページ
https://rbcanvas.net/p5/

7. rbCanvas/p5を使ってみる

A) サンプルプログラムの実行

A-1) rbCanvas/p5のサンプルプログラムのページを開きます

（以下、画像は rbCanvas/p5公式ページより）

A-2) 実行させたいサンプルのサムネイル（画像）かタイトルをクリックします

A-3) プログラムが実行されます

（サンプルプログラムウェーブ）

B) エディタを使ったプログラムの作成と実行

B-1) rbCanvas/p5 のページの「rbCanvas/p5 editor」をクリックします

※エディタの詳しい使い方は；
公式ページ＞マニュアル＞rbCanvas/p5エディタの使い方を参照

B-2) rbCanvas/p5 editor のウィンドウが開きます

B-3) rbCanvas/p5の基本

簡単な例

def setup
  createCanvas(400, 400)
  background('blue')
end

def draw
  circle(150, 250, 200)
end

def setup 〜 end
の中身は、起動時に1回だけ実行されます。

def draw 〜 end
の中身は、繰り返し実行されます。

B-4) 実行は、エディタ上部の「▶︎ ボタン」を押します

実行結果

※ 文法、プログラム例は；
公式ページ＞マニュアル＞APIリファレンスを参照

C) プログラムの保存

エディタ上部のダウンロードボタンを押します。

8. 困ったときは

公式ページ＞マニュアル＞よくある質問
が用意されています。

9. さいごに

学生向けのプログラミング入門として、ゲーム作りが題材にされることが多いのですが、rbCanvas/p5 はグラフィック機能が充実しているので、たいへん見栄えのする作品が作れるようになりました。

実際、中高校生向けのプログラミング教室や、公立中学校のプログラミングクラブなどでも採用され始め、徐々に利用者が増えつつあります。
（「るびつくコーディングコース」（東京・三鷹）ほか）

今後は、Rubyのプログラミング入門として、あるいは「中高生国際Rubyプログラミングコンテスト」などプログラミングコンテストの応募にも使われることが期待されます。

インストール不要！Rubyでゲーム、ビジュアルアート開発ができる新環境「rbCanvas/p5」の紹介