はじめに
この本について
『Ruby で描く、動かす、遊ぶ — rbCanvas/p5 ではじめるクリエイティブコーディング』は、プログラミングを初めて試す人が、コードで絵、動き、音、遊べる作品を作るための本です。rbCanvas/p5 はブラウザで動くため、開発環境をインストールせずに始められます。
最初は、丸を一つ描く短いコードから始めます。数字を一つ変えると丸が大きくなり、もう一つ変えると画面の外へ飛び出します。そこから色、模様、アニメーション、マウスやキーボードへの反応、文字、画像、音、3D、ゲームへ少しずつ広げます。最後には、気に入った仕組みを選び、自分の作品として保存します。
この本では、Ruby の文法を覚える前にコードを動かします。プログラミングで遊び、好きになり、次も試したくなることが目標です。初めて出る言葉や命令は、使う場所で一つずつ説明するため、一人でも進められます。
クリエイティブコーディングとは
クリエイティブコーディングは、プログラムを使って絵や動き、音、遊べる仕組みなどを作る活動です。
たとえば、画面に丸を一つ描きます。その丸を動かすと、生き物のように見えるかもしれません。たくさん並べると模様になり、半透明にして重ねると、思いがけない色が生まれます。マウスの動きへ反応させれば、見るだけだった絵が、触って変えられる作品になります。
コードを使うと、形を描き、動かし、人の操作へ反応させられます。
紙に引いた線はそのまま残ります。コードで描いた線には、「少しずつ右へ動く」「毎回違う色になる」「クリックされたら増える」といった振る舞いを加えられます。形、時間の流れ、人の操作を一つの作品へ組み合わせられます。
クリエイティブコーディングでは、同じコードから始めても、変える数字や色によって違う作品ができます。形がはみ出した画面や、速すぎる動きが気に入ったら、その版も保存して次の変更に使えます。
この本では、次の小さな繰り返しを大切にします。
- まず動かす
- 一つだけ変える
- 何が起きたか見る
- 面白ければ、もう一度変える
まずコードを動かします。疑問が出たところで説明を読み、もう一度コードへ戻ります。
この本で使う rbCanvas/p5
rbCanvas/p5 は、ブラウザで Ruby を実行し、絵やアニメーションを作れる環境です。インストールせずに始められます。画面へ描画する部分には、クリエイティブコーディングのための JavaScript ライブラリである p5.js の機能が使われています。
本書では、公式の操作説明と API リファレンスがそろっている 0.5.1 の Opal 版を使います。Opal 版では、数値をすべて小数も扱える数として処理し、:title のようなシンボルを文字列として扱います。通常の Ruby と違う結果になる箇所では、その都度説明します。別の版では、同じコードでも動きが異なる場合があります。
Ruby は、人が読み書きするために作られた
Ruby は、まつもとゆきひろさんが作り、1995 年に公開したプログラミング言語です。まつもとさんは、いくつもの好きな言語の特徴を組み合わせ、人にとって自然に読み書きできる言語を目指しました。
コードを書く人が読みやすく、楽しめることを大切にしている点は、この本で Ruby を使う理由の一つです。
p5.js は、コードを表現の道具にする流れから生まれた
p5.js は、アーティストでプログラマーの Lauren Lee McCarthy（ローレン・リー・マッカーシー）さんが 2013 年に作り始め、Evelyn Eastmond（エブリン・イーストモンド）さんが立ち上げに加わりました。無料で利用、改良、再配布できるオープンソースの道具で、現在は世界中の人が開発へ参加しています。
その前には、Casey Reas（ケイシー・リース）さんと Ben Fry（ベン・フライ）さんが 2001 年に始めた Processing があります。Processing は、アーティストやデザイナーもコードを視覚表現に使いやすくする環境です。p5.js はその考え方を受け継ぎ、ウェブブラウザで作品を作れるようにした JavaScript のライブラリとして始まりました。
p5.js は公開後も、利用者からの問題報告、説明の追加、機能の修正によって更新されています。現在の機能には、最初の作者だけでなく、開発に参加した人たちの仕事も含まれます。
rbCanvas/p5 は、Ruby から p5.js の機能を使えるようにした
p5.js のサンプルは、本来 JavaScript で書きます。北村幸紀さんが開発した rbCanvas/p5 では、その多くの機能を Ruby の書き方で使えます。仕組みと対応機能はrbCanvas/p5 0.5.1 概要に掲載されています。
本書で使う 0.5.1 では、Opal（オパール）が Ruby のコードを JavaScript へ変換し、rbCanvas/p5 が p5.js の描画機能へ渡します。
あなたが書く Ruby
↓
Opal が JavaScript へ変換
↓
rbCanvas/p5 の橋渡し
↓
p5.js とブラウザのキャンバス
作品から形や動きを一つ見つける
実際の作品を見ると、クリエイティブコーディングがどのように使われてきたかを具体的に知ることができます。
Casey Reas さんの「Process」シリーズでは、形が動くための短い規則を決めると、実行するたびに異なる画面が生まれます。作品を見たら、気になった形や動きを一つ選びましょう。
Lauren Lee McCarthy さんの「SOMEONE」では、人がスマートホームの音声アシスタント役になり、離れた家の中を見守って話しかけます。作品を見ると、便利さと同時に、見られることや人を信頼することについても考えられます。作品を使う人がどのように操作し、画面や音がどう応じるかを一つ探します。
作品全体を再現する必要はありません。気になった形、色、動きのどれか一つを選び、あとで短いスケッチとして試します。
最初はコードをコピーして動かす
この本は、年齢を問わず、コードを一度も書いたことがない人を対象にしています。def、end、丸括弧、カンマといった記号は、最初に使う場所で説明します。
数学を使う場面では、公式より先に具体的な数字を入れます。コードを動かし、数字を一つ変え、画面で何が起きるかを見てから仕組みを説明します。
最初は掲載コードをコピーして実行し、画面が変わることを確認します。そのあと、指定された 1 か所を変えます。変えた行と画面の変化を見比べることから始めます。
エラーが表示されても、壊してしまったわけではありません。直前に変更した 1 か所を元へ戻せば、動いていた状態へ帰れます。戻し方が分からないときは、困ったときを使えます。