[第3回: 図形の描画] Processingでキャラクターを描く
Processingという言語を使って、プログラミングの基礎を学んでいくシリーズ。
第3回目は図形を組み合わせてキャラクターを描いていきます。
おもちのような可愛らしいキャラクターを作っていきましょう！
1. キャラクターを描く前の準備
キャラクターを描く前の準備として、ウィンドウの大きさの指定や背景の色、
そして図形を書く際の起点となる座標を定義してあげましょう！
size(500, 500);
background(220, 240, 255);
int x = width/2;
int y = 280;
noStroke();x, yで座標をあらかじめ指定しておくことによって、その点を起点にして他の座標も指定できるのでプログラムがわかりやすくなります。
2. 体を描く
キャラクターの土台となる体を描いていきます。
おもちのようなぷっくりとしたような形を表現します。
// 本体
fill(255);
ellipse(x, y, 220, 180);
3. 頭部を描く
次に、頭・目・口・ほっぺをまとめて描いていきます！
これでかなりキャラクターっぽくなります。正月の鏡もちですね(笑)
// 頭
ellipse(x, y-100, 180, 150);
// 目
fill(0);
ellipse(x-25, y-110, 10, 20);
ellipse(x+25, y-110, 10, 20);
// 口
fill(100);
arc(x, y-60, 30, 20, 0, PI);
// ほっぺ
fill(255, 180, 180);
circle(x-50, y-80, 20);
circle(x+50, y-80, 20);なお、ここで口を描くのに出てきたarcについて少し詳しく説明します。
arcは孤を描くためのメソッドで、全部で7つの引数を指定することができます。(最後の1つはオプショナルのため任意)
arc(x座標, y座標, 横の長さ, 縦の長さ, 孤を描く際の開始角度, 終了角度, オプショナルでモード)
4. 手足を描く
最後に手足を書いていきます。これでキャラクターの完成です！
かわいらしい仕上がりになったのではないでしょうか(笑)
// 手
fill(255);
circle(x-130, y, 40);
circle(x+130, y, 40);
// 足
ellipse(x-50, y+95, 40, 25);
ellipse(x+50, y+95, 40, 25);
全体のコード
コードの全体も共有しておきます。みなさんもぜひ、様々な図形を組み合わせながらオリジナルのキャラクターを作っていってください。
図形の描画に対する理解が深まるだけでなく、自分の作ったものは愛着がわくと思います！
size(500, 500);
background(220, 240, 255);
int x = width/2;
int y = 280;
noStroke();
// 本体
fill(255);
ellipse(x, y, 220, 180);
// 頭
ellipse(x, y-100, 180, 150);
// 目
fill(0);
ellipse(x-25, y-110, 10, 20);
ellipse(x+25, y-110, 10, 20);
// 口
fill(100);
arc(x, y-60, 30, 20, 0, PI);
// ほっぺ
fill(255, 180, 180);
circle(x-50, y-80, 20);
circle(x+50, y-80, 20);
// 手
fill(255);
circle(x-130, y, 40);
circle(x+130, y, 40);
// 足
ellipse(x-50, y+95, 40, 25);
ellipse(x+50, y+95, 40, 25);
