画面の中で色や線が動く。マウスに触れると模様が変わる。その一瞬の反応を、自分の手で設計できるのがProcessingの面白さです。Processing アート 作品 作り方を学ぶときは、最初から複雑な映像を目指す必要はありません。円、線、乱数、繰り返しという小さな部品を組み合わせ、見た目の変化を観察するところから始めましょう。
FabShop.jpで扱うものづくりでは、プログラムを画面だけで終わらせません。できあがった画像を印刷したり、ベクターデータにしてレーザー加工したり、センサーやボタンで動きを変えたりできます。まずは画面上で表現を育て、必要に応じて作品を物として展開する。この順番なら、初めてでも失敗を切り分けやすくなります。
Processingアート作品の作り方は「ルール」から始める
アート作品を作ろうとすると、「何を描けばよいのか」と手が止まりがちです。そこで役立つのが、作品全体を支える簡単なルールです。たとえば「円は毎回少し右へ動く」「クリックした位置から線が伸びる」「明るい色は画面中央にだけ現れる」と決めます。ルールがあると、偶然に見える結果にも作者の意図が生まれます。
Processingでは、`setup()` に最初の設定を書き、`draw()` に繰り返したい処理を書きます。この役割分担を理解すると、静止画と動く作品の違いもつかみやすくなります。1回だけ描画する作品なら `noLoop()` を使い、毎フレーム変化させたいなら `draw()` の中で座標や色を更新します。
まずは、次のような小さなスケッチを動かしてください。
“`java float x = 0;
void setup() { size(800, 800); background(250); }
void draw() { fill(20, 80, 180, 35); noStroke(); ellipse(x, height / 2, 80, 80); x = x + 2;
if (x > width) { x = 0; } } “`
半透明の円が横へ進み、重なった部分の色が濃く見えます。ここで `x = x + 2` を `x = x + 0.5` にすればゆっくりした動きに、円の大きさを変えれば印象の異なる画面になります。数値を一つずつ変更し、何が変わったかを言葉にして記録することが、プログラムと表現を結びつける練習になります。
作品のテーマを「入力」と「変化」で決める
Processingの作品は、ただ自動で動くだけでも成立します。ただし、見る人が参加できる要素を一つ加えると、展示したときの体験が変わります。扱いやすい入力はマウスの位置、クリック、キーボードです。カメラ映像や距離センサーも使えますが、最初の作品では原因を追いやすい入力から選ぶほうが安全です。
たとえば、マウスのX座標を円の色に、Y座標を大きさに割り当てることができます。画面の左側では青く小さく、右下へ動かすほど赤く大きくなる、といった対応です。このとき大切なのは、入力と変化の関係を一つに絞ることです。色、形、速度、音をすべて同時に変えると、面白い反面、何が作品の中心なのかが伝わりにくくなります。
“`java void setup() { size(800, 800); noStroke(); }
void draw() { background(245); float d = map(mouseY, 0, height, 20, 260); float r = map(mouseX, 0, width, 30, 240); fill(r, 90, 180, 180); ellipse(mouseX, mouseY, d, d); } “`
`map()` は、ある範囲の数値を別の範囲へ変換する関数です。センサー値を画面上の大きさや明るさに変える場合にも使えます。最初は値の範囲を狭くして、極端な変化にならないように調整すると扱いやすいでしょう。
偶然を使うなら、再現できる形で残す
`random()` を使うと、毎回異なる線や図形が現れます。偶然性はジェネラティブアートの魅力ですが、「昨日の模様が一番よかったのに、もう出せない」という問題も起こります。展示用の1枚や加工用データを作るなら、気に入った結果を再現できる仕組みを用意しましょう。
Processingでは `randomSeed()` を使うと、乱数の並びを固定できます。たとえば番号を作品のバリエーションとして管理すれば、同じルールから複数の作品を制作できます。番号ごとにスクリーンショットを保存しておけば、後で印刷する絵柄を選ぶときにも便利です。
色選びも偶然に任せきりにせず、3色から5色程度のパレットを先に決めるとまとまりやすくなります。補色を強く使うと勢いのある印象になり、近い色だけを使うと静かな画面になります。背景色まで含めて決めると、透明度を使った重なりも読みやすくなります。
静止画として出力するための設計
画面上で見栄えがしても、印刷すると線が細すぎたり、色が暗くなったりすることがあります。作品を紙に出力する場合は、最終的な用紙サイズを先に考えましょう。A4に印刷するなら、800ピクセル四方の画面をそのまま使うより、より大きな解像度で生成しておくほうが細部を保ちやすくなります。
`saveFrame()` を使えば、描画結果をPNGとして保存できます。連番で保存すると大量の画像ができるため、静止画作品ではキーを押したときだけ保存する設計が実用的です。保存前に背景を塗り直すのか、これまでの描画を残すのかも確認してください。動きの軌跡を残す作品では、`background()` を毎フレーム実行すると跡が消えてしまいます。
印刷向けの作品では、細い線、淡い色、画面の端に寄りすぎた図形に注意します。家庭用プリンターでは、紙の端まで印刷できないことがあります。重要な形は端から少し内側に配置し、試し刷りで明るさと線の見え方を確かめるのが確実です。
レーザー加工や立体作品へつなげる考え方
Processingで生まれた模様は、木材やアクリルに加工すると違った表情になります。ただし、PNG画像をそのままレーザー加工用データにするのではなく、何を彫刻し、何を切断するのかを分けて考える必要があります。細かな濃淡は彫刻に向きますが、加工時間が長くなる場合があります。一方、線だけで構成した模様は切断やスコアリングに向いています。
レーザー加工を前提にするなら、最初から線幅と余白を意識したルールで描く方法がおすすめです。たとえば、円を大量に重ねる作品よりも、直線や輪郭線を反復する作品のほうがベクターデータへ整理しやすいことがあります。加工機、素材、仕上げたい大きさによって適したデータは変わるため、画面上の美しさだけで決めないことがポイントです。
アクリル板に彫刻した模様へLEDを当てる、木板に加工したパーツを重ねて影を作る、といった展開もできます。ここではProcessingを「完成画像を作る道具」ではなく、「形のルールを何度も生成する道具」として使えます。寸法を変えたパーツを複数出力し、組み立てながら最もよい重なりを探す工程も、デジタルファブリケーションならではの制作です。
動く展示にするなら、まず動作を安定させる
ノートPCで動かすインタラクティブ作品では、見た目より先に安定動作を確認します。展示中に画面が止まる原因は、複雑な描画、重すぎる画像、毎フレーム大量のデータを保存していることなどです。`frameRate(30)` のように更新回数を抑えるだけで改善する場合もあります。画面上の図形数を増やしすぎず、必要ない計算は毎フレーム実行しないようにしましょう。
マウス操作を使う作品は、来場者が何をすればよいかを小さな説明文で示すと親切です。「画面に触れて色を変えてみよう」「マウスをゆっくり動かそう」といった一文があるだけで、作品への入り口ができます。キーボード操作を使う場合は、どのキーで何が起こるのかを表示し、終了やリセットの方法も用意しておくと安心です。
作品の完成度は、コードの長さでは決まりません。円一つでも、動きの速度、色の透明度、見る人が操作できる余白を丁寧に調整すれば、十分に自分らしい表現になります。気になった数値を一つ変え、画面を見て、良かった結果を保存する。その小さな試行を重ねることが、画面の中のアイデアを手で触れられる作品へ近づけてくれます。
