３．基本のコード構造をマスターしよう！描画の流れが見えてきます
Processingのコードは、大きく2つの関数で構成されます。
void setup() {
size(400, 400); // キャンバスサイズ設定（1回だけ実行）
}void draw() {
background(255); // 毎フレーム白背景で塗りつぶし
ellipse(mouseX, mouseY, 50, 50); // マウス位置に円を描く
}
setup()はプログラムが始まるときに1度だけ実行される初期化処理です。
draw()は1秒間に60回前後繰り返し実行され、ここにアニメーションや動的描画を記述します。
これにより、リアルタイムで変化する表現が可能になります。
描画の基本要素としては、line(), rect(), ellipse(), triangle()などがあり、すべて座標でコントロールします。
この「座標で描く」という考え方が、グラフィックの世界への第一歩になります。
４．Processingでできることって？実例でイメージが広がります
たとえば以下のようなコードを入れてみましょう。
void setup(){
size(500, 500);
background(30);
}void draw(){
fill(random(255), random(255), random(255));
noStroke();
ellipse(mouseX, mouseY, 30, 30);
}
マウスを動かすたびにランダムな色の丸が現れ、キャンバスがカラフルに彩られていきます。
このように、マウスやキーボードとのインタラクションも簡単に組み込めます。
さらに高度な例では、forループや配列を使って幾何学模様を描いたり、動画や音と連携させたりも可能。
拡張ライブラリを追加すれば、3D表現やセンサーデバイスとの連携まで視野に入ってきます。
出典：eraser peel
５．困ったらどうする？学習リソースと上達のヒントがわかります
Processing公式サイトには日本語チュートリアルや事例集も豊富に用意されています。
また、YouTubeの「The Coding Train（Daniel Shiffman）」チャンネルは、Processingやp5.jsの定番教材として世界中で人気です。
視覚的なフィードバックが得られる分、動画との相性が非常に良いのも特徴です。
日本語の入門書も充実してきていて、「Processingではじめるビジュアル・デザイン入門」（翔泳社）や、「デザイン言語 Processing入門」（森北出版）などが定番として挙げられます。
興味のある分野から始めてみて、「描きながら覚える」ことがProcessingでは一番の近道です。
まとめ
Processingは、デジタルデザインの世界に触れるための最高の入り口です。
インストールも簡単で、数行のコードで目に見える変化が得られるため、プログラミング未経験でも挫折しにくいのが魅力です。
ビジュアル表現を通じて、創造性と論理性の両方を育てることができます。
まずはsetup()とdraw()の役割を覚えて、マウスで動く図形を描いてみましょう。
そこから一歩ずつ、自分だけのアートを生み出す旅が始まります。
あなたのデザインセンスとコードが出会う瞬間、何かが動き出すかもしれません。
記事のリライトや補足、次回のテーマ案内など必要であればお気軽にどうぞ。
SNOWさんの感想
ほぼ描画だけに集中してコードを書けば、コーディングしたなりの図形が描ける。
大昔に「花子」というWindows3.1のソフトウェアがありましたが、それでりんごやみかんを描いていた淡い思い出。
じゃなくて、コードで絵を描くってけっこう大変だと思うけど、繰り返し描画とか動きを付けるってなったらプログラムが効率が良いと思います。
ちゃんと勉強して使いこなせば、とても良いものだろうなと思いました。
※フォロー＆質問お待ちしてます（SNOWさんのXプロフィール）
🎁 Sponsors: Amazon | Prime | Music | Audible | Kindle Unlimited 🎁