第19章 作品を選び、保存する

プログラムは、数字を変えたり機能を足したりすれば、いつまでも編集できます。この章では、今残したい版を決め、あとから開ける形で保存します。

19.1 一番楽しかった寄り道を選ぶ

最終作品は、これまでの章で作ったものを出発点にします。次のどれかを選びましょう。

• 何度も数字を変えたサンプル
• 予想外の結果が出て保存したスケッチ
• もう一つ機能を足したい作品
• 見た目は単純でも、動かしていて気持ちよかった作品

選ぶ基準は技術の多さではありません。自分がもう一度開きたいものを選びます。

19.2 テーマを一語決める

テーマを一語だけ自分で決めます。目に付いた物でも、好きな色でもかまいません。たとえば「ルビー」を選んだなら、次のような考え方があります。

• 赤い宝石の形や光を観察する
• Ruby のコードや記号を図形として扱う
• 赤から連想した熱、夕方、警告、祝祭を描く
• 「大切にしまわれたもの」という物語を作る

テーマから思い付いた言葉を 5 個書き、その中から画面にしてみたいものを一つ選びます。選んだ言葉へ、第6章の反復、第7章の偶然、第8章の操作など、気に入った仕組みを一つ組み合わせます。

19.3 変更を一つずつ保存する

大きく直す前に、現在の版を保存します。ファイル名には、意味のある短い違いを入れます。

orbit-slow.html
orbit-fast.html
orbit-blue-trail.html

final、final2、final-final では、あとから違いが分かりません。「速い」「青い軌跡」のように画面の違いを名前へ入れると、比較しやすくなります。

19.4 引き算で主役を確かめる

機能を足す前に、一つを一時的に消してみます。

• 背景の模様を消す
• 音を止める
• スコア表示を隠す
• 円の数を半分にする
• 色を 3 色へ減らす

消したことで形や色の組み合わせが崩れたなら、その要素には残す理由があります。何も変わらない、または見やすくなったなら、その要素を使わない版も比べられます。削除する前と後を比べると、どの形、色、動きへ最初に目が向くかを確かめられます。

19.5 時間を置いたセルフレビュー

第三者の講評がなくても、時間差を使って見直せます。

1. 現在版を保存する
2. エディタとメモを閉じる
3. 数時間後または翌日に作品だけを開く
4. 最初に見た場所、最初に試した操作を記録する
5. 好きなところを一つ選ぶ
6. 分かりにくいところがあれば、一つだけ直す

セルフレビューは採点ではありません。「良い作品か」ではなく、「自分はどこをもう少し触りたいか」を探します。何も直したくなければ、その版を区切りにできます。

19.6 最終制作「まわる光」

一つの作品が、三つの版を通って変わる過程を見ます。一度に一つだけ変更し、採用しなかった案も記録する例です。

版 A: まず動きだけ作る

最初の問いは「同じ場所へ戻る動きを、ずっと見ていたくなるか」です。黄色い円を一つだけ周回させます。

def setup
  createCanvas(500, 320)
  @angle = 0
end

def draw
  background(20, 28, 52)
  @angle += 0.03

  x = width / 2 + sin(@angle + 1.5708) * 110
  y = height / 2 + sin(@angle) * 80

  noStroke
  fill(255, 210, 90)
  ellipse(x, y, 42, 42)
end

この版では、速さ 0.03 と横・縦の広がり 110、80 だけを試します。作者メモは「円が何の周りを回っているのか分からない。でも、楕円の軌道は残したい」です。

左右と上下の両方に sin を使っています。ただし左右側だけ、角度へ 1.5708 を足しました。これは円の 4 分の 1 周ほど変化の始まりをずらす数字です。二つの波の始まる位置をずらすと、円が斜めに行ったり来たりせず、中心の周りを回ります。110 と 80 を掛けることで、横長の軌道になります。0.5.1 で本文と同じコードを使えるよう、ここでは新しい cos を増やさず、第7章で確認した sinだけで組み立てます。

版 B: 中心を見えるようにする

次の 2 行は変更部分です。版 A の draw の最後の end より前へ足します。

fill(120, 190, 255, 80)
ellipse(width / 2, height / 2, 120, 120)

中心へ半透明の青い円を置くと、黄色い円がその周りを巡っているように見えます。採用しなかった案は、背景へ星を 50 個足すことでした。試すと中心より星へ目が移ったため、この版では星を外しました。

図 19-1 と図 19-2 は、中心の青い円があるかどうかだけが大きな違いです。小さな追加でも、黄色い円を「一つで動く形」と見るか、「何かの周りを巡る光」と見るかが変わります。

版 C: 速さと題名を選ぶ

@angle += 0.03 を @angle += 0.015 へ変えると、待つ時間が長くなります。速い版と遅い版を別名で保存し、見比べます。ここでは遅い版を選び、題名を「まわる光」としました。

最終メモは次の 3 行です。

暗い場所の中心を、黄色い光が見回る作品です。
中心の円を半透明にし、輪郭が強く目立たないようにしました。
速い版は落ち着かなかったため、動きを半分の速さにしました。

版 A で動きを確かめ、版 B で中心の円を足し、版 C で速さを比べて一つ選びました。自分の作品でも、色、数、入力、音などから一項目ずつ比べられます。

19.7 単一 HTML を別の環境で開く

rbCanvas/p5 は、プログラムと素材を単一の HTML ファイルとして保存できることを特徴にしています。保存したファイルは、エディタを介さずブラウザで実行できます。

エディタの保存ボタンを押すと、ブラウザが HTML ファイルをダウンロードします。保存場所が表示されない場合は、ブラウザのダウンロード一覧を確認します。もう一度編集したいときは、その HTML ファイルを rbCanvas/p5 エディタへドラッグ＆ドロップします。画像や音声を取り込んでいた場合も、同じファイルから復元されます。

保存後は次を確認します。

• エディタを閉じてもブラウザで開けるか
• 画像や音声が欠けていないか
• キーボードとマウスの操作が反応するか
• 音声開始にクリックが必要なら、画面に説明があるか
• 強い点滅や急な音量変化がないか

ブラウザごとに保存や読み込みの挙動が異なる場合があります。Chrome で動いても、別のブラウザで同じとは限りません。公開するなら、少なくとも自分が対応対象と決めた環境で確認します。

19.8 工夫を短い文章にする

作品を公開するとき、テーマをどう考え、どこを工夫したか添えることがあります。制作中に実際に選んだ形、色、動きを短く書けば伝わります。

テーマを「暗い場所で見つける赤い光」と考えました。
同じ形を並べ、マウスに近い形だけ明るくなるようにしました。
赤が強すぎると光に見えなかったので、周囲を暗い青へ変えました。

「何を考えたか」「コードで何を変えたか」「試して何を選んだか」の 3 点を書くと、制作の過程が伝わります。実際に試したことから言葉を選びます。

19.9 公開しない選択と公開する責任

作品は自分の端末へ保存したところで完成にできます。公開は、そのあとに選べます。

公開する場合は、コード以外の条件も確認します。

• 写真、音、フォント、3D モデルを公開できるか
• 必要な作者名とライセンスを表示したか
• 他人の個人情報が含まれていないか
• 操作方法を短く書いたか
• 動きや音を止める手段が必要か
• 公開するファイルが、最後に動作を確かめた版と同じか

タイトルや制作意図には、「マウスの速さを色にしました」のように、何を試したかを 1 文で書きます。後日ファイルを開いたときにも、どんな作品か思い出せます。

借りた素材や参考にしたコードがある場合は、制作メモや作品の説明へ出典を残します。必要な内容は利用条件によって異なりますが、迷ったときは次の項目を記録します。

画像: 作者名「作品名」
入手元: （素材を入手したページのURL）
ライセンス: CC BY 4.0
変更: 色を青へ変更し、背景の一部として使用

コードの参考: 作者名「スケッチ名」
URL: （参考にしたスケッチのURL）
参考にした点: 円を等間隔へ並べる考え方

URL だけでなく、誰の何を、どのように使ったかを残します。本書のコードを改造した場合は「『Ruby で描く、動かす、遊ぶ — rbCanvas/p5 ではじめるクリエイティブコーディング』第6章をもとに改造」のように書けます。

例にあるCC BY 4.0 では、作者名、ライセンスへのリンク、変更したことなどを示すことで、作品を共有したり改変したりできます。実際に素材を使うときは、その素材に表示されたライセンスと条件を確認します。

19.10 作品から変化を一つ選んで試す

p5.js の作品例やProcessing で公開されている作品には、JavaScript や Java で書かれたものもあります。コード全体を rbCanvas/p5 へ移す前に、次の順で観察します。

1. 画面のどこが、どのように変化しているかを言葉にする
2. 位置、速度、色、反復、入力のどれを使っていそうか考える
3. 作品全体ではなく、気になった変化を一つだけ別のスケッチで試す
4. 同じ機能名が 0.5.1 のリファレンスにあるか確かめる

見つけた作品は、作品名、作者名、見たページの URL、気になったところ、自分で試したところを制作ノートへ残します。画像やコードを使う場合は、作者が示した利用条件も確認します。考え方から刺激を受けた場合も、制作意図で元の作品に触れると、自分の発見がどこから始まったかを伝えられます。

19.11 保存した作品から始める次の制作

ここまでに、形、時間、入力、Ruby の構造、音、3D、ゲームを使いました。気に入った章へ戻れば、同じコードを別の数字で試せます。

次に試せることには、Ruby の言語機能を詳しく調べる、p5.js の作品を観察する、音を録る、画像を描く、ゲームのルールを変える、といったものがあります。今いちばん気になった章を開き、その章の発展案から試したいものを選んでみましょう。

保存した作品を後日もう一度開いたら、数字を一つ変えて実行してみてください。そこから新しい版を作れます。

参考資料

• rbCanvas/p5 エディタの使い方 — HTML の保存と再編集の手順
• rbCanvas/p5 0.5.1 API リファレンス — 作品で使う機能の 0.5.1 対応状況
• Creative Commons 表示 4.0 国際 — 第三者素材が CC BY 4.0 の場合の表示条件