第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 時間を置いたセルフレビュー
第三者の講評がなくても、時間差を使って見直せます。
- 現在版を保存する
- エディタとメモを閉じる
- 数時間後または翌日に作品だけを開く
- 最初に見た場所、最初に試した操作を記録する
- 好きなところを一つ選ぶ
- 分かりにくいところがあれば、一つだけ直す
セルフレビューは採点ではありません。「良い作品か」ではなく、「自分はどこをもう少し触りたいか」を探します。何も直したくなければ、その版を区切りにできます。
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-3と図19-2は、中心の青い円があるかどうかだけが大きな違いです。小さな追加でも、黄色い円を「一つで動く形」と見るか、「何かの周りを巡る光」と見るかが変わります。
版C: 速さと題名を選ぶ
@angle += 0.03を@angle += 0.015へ変えると、待つ時間が長くなります。速い版と遅い版を別名で保存し、見比べます。ここでは遅い版を選び、題名を「まわる光」としました。
最終メモは次の3行です。
暗い場所の中心を、黄色い光が見回る作品です。
中心を半透明にして、物ではなく気配に見えるようにしました。
速い版は落ち着かなかったため、動きを半分の速さにしました。
この過程で重要なのは、版Cが正解だからではありません。版Aで動きを確かめ、版Bで関係を足し、版Cで比較して一つ選びました。自分の作品では、色、数、入力、音など別の一項目を選べます。
19.7 単一 HTML を別の環境で開く
rbCanvas/p5 は、プログラムと素材を単一の HTML ファイルとして保存できることを特徴にしています。保存したファイルは、エディタを介さずブラウザで実行できます。
エディタの保存ボタンを押すと、ブラウザが HTML ファイルをダウンロードします。保存場所が表示されない場合は、ブラウザのダウンロード一覧を確認します。もう一度編集したいときは、その HTML ファイルを rbCanvas/p5 エディタへドラッグ＆ドロップします。画像や音声を取り込んでいた場合も、同じファイルから復元されます。
保存後は次を確認します。
- エディタを閉じてもブラウザで開けるか
- 画像や音声が欠けていないか
- キーボードとマウスの操作が反応するか
- 音声開始にクリックが必要なら、画面に説明があるか
- 強い点滅や急な音量変化がないか
ブラウザごとに保存や読み込みの挙動が異なる場合があります。Chrome で動いても、別のブラウザで同じとは限りません。公開するなら、少なくとも自分が対応対象と決めた環境で確認します。
19.8 工夫を短い文章にする
作品募集では、テーマをどう考え、どこを工夫したかを書くことがあります。立派な解説を書くのではなく、制作中に実際に選んだことを書きます。
テーマを「暗い場所で見つける赤い光」と考えました。
同じ形を並べ、マウスに近い形だけ明るくなるようにしました。
赤が強すぎると光に見えなかったので、周囲を暗い青へ変えました。
「何を考えたか」「コードで何を変えたか」「試して何を選んだか」の3点があれば、制作の過程が伝わります。うまく見せるために、していないことを書く必要はありません。
19.9 公開しない選択と公開する責任
作品は公開しなくても完成です。自分の端末に保存し、あとで見返すだけでもかまいません。
公開する場合は、コード以外の条件も確認します。
- 写真、音、フォント、3D モデルを公開できるか
- 必要な作者名とライセンスを表示したか
- 他人の個人情報が含まれていないか
- 操作方法を短く書いたか
- 動きや音を止める手段が必要か
タイトルや制作意図は、長い説明でなくてかまいません。「マウスの速さを色にしました」のように、何を試したか一文あれば、未来の自分も作品へ戻りやすくなります。
借りた素材や参考にしたコードがある場合は、制作メモや応募文へ出典を残します。必要な内容は利用条件によって異なりますが、迷ったときは次の項目を記録します。
画像: 作者名「作品名」
入手元: （素材を入手したページのURL）
ライセンス: CC BY 4.0
変更: 色を青へ変更し、背景の一部として使用
コードの参考: 作者名「スケッチ名」
URL: （参考にしたスケッチのURL）
参考にした点: 円を等間隔へ並べる考え方
URLだけでなく、誰の何を、どのように使ったかを残します。本書のコードを改造した場合は「『Rubyで描く、動かす、遊ぶ — rbCanvas/p5ではじめるクリエイティブコーディング』第6章をもとに改造」のように書けます。
19.10 作品募集へ出す前の確認
単一HTMLファイルを提出する形式なら、次を上から確認します。
- 0.5.1のエディタからHTMLファイルを保存した
- 保存したHTMLをブラウザで直接開けた
- 画像や音が作品内に含まれている
- 操作方法が作品内または応募文で分かる
- テーマの解釈と工夫を自分の言葉で書いた
- 借りた素材の利用条件と作者表示を確認した
- 提出するファイルが最後に確認した版と同じである
この段階まで来れば、乱数配置、敷き詰め、フラクタル、図形を組み合わせたモチーフ、アニメーション、操作へ反応する作品のいずれかを、自分で選んで完成させられます。すべての技術を一作品へ詰め込む必要はありません。
19.11 作品を見つけ、仕組みを一つ持ち帰る
p5.jsやProcessingの作品には、JavaScriptやJavaで書かれたものもあります。コード全体をrbCanvas/p5へ移す前に、次の順で観察します。
- 画面のどこが、どのように変化しているかを言葉にする
- 位置、速度、色、反復、入力のどれを使っていそうか考える
- 作品全体ではなく、気になった変化を一つだけ別のスケッチで試す
- 同じ機能名が0.5.1のリファレンスにあるか確かめる
見つけた作品は、作品名、作者名、見たページのURL、気になったところ、自分で試したところを制作ノートへ残します。画像やコードを使う場合は、作者が示した利用条件も確認します。考え方から刺激を受けた場合も、制作意図で元の作品に触れると、自分の発見がどこから始まったかを伝えられます。
19.12 終了ではなく分岐
ここまでで、形、時間、入力、Ruby の構造、音、3D、ゲームを通りました。すべてを覚えている必要はありません。気に入った章へ戻り、別の数字を試せれば、本書の目的は達成されています。
次に進む道は一つではありません。Ruby の言語機能を深く知る、p5.js の作品から発想を借りる、音を録る、絵を描く、ゲームのルールを考えるという別々の入口があります。今いちばん気になった章へ戻り、その章の「もっと探すなら」「もっと育てるなら」から一つだけ選べます。
この章の小さな区切り
- 自分がもう一度開きたい作品を一つ選んだ
- 変更前と変更後を別名で保存し、違いを比べた
- 好きなところ、変えたところ、選んだ理由を一文ずつ残した
- 公開するかしないかを自分で選び、公開する場合は素材と操作方法を確認した
作品を公開しなくても、この本は完了です。保存した作品を後日もう一度開き、数字を一つ変えたくなったなら、次の入口はもうできています。