Processingでプログラミングをしてドラ○もんに色を付けよう！

今回やること

今回の目標

今回はProcessingで前回作った左下の無機質なドラ○もんを、右下のカラフルなドラ○もんにします！

前回のドラ○もんの作り方は前の記事を参考にしてくださいね！

今回のポイント

・図形の塗りつぶしの色を指定
・塗りつぶし色の指定の影響範囲
・扇形を描く処理

いざコーディング！

コーディングとは？

今更ですが、プログラミングをすることを「コーディング」といいます！
厳密にはコードを書くことを指しますが、コードを書く＝プログラミングをする。なので同義です。
何をするかよくわからないまま「コーディング」とか言われても難しい印象を持ちますからね...😓
でもプログラミングに少し慣れてこられた皆様なら、もう大丈夫だと思います！

STEP１　Processingの事前準備

前回作成したコードを準備します。
新しいファイルを作ってもらっても、以下をコピペしてもらっても大丈夫です。
実行して無機質なドラ○もんが表示されるかどうか確認してみてくださいね！

/* ドラ○もんの描写 
TAKEのIT風万記 */

//画面サイズ
size(500,500);

//顔パーツ
ellipse(250,250,300,300);
ellipse(250,275,250,250);

//ひげ
//左側
line(150,210,200,220);
line(150,250,200,250);
line(150,290,200,280);
//右側
line(350,210,300,220);
line(350,250,300,250);
line(350,290,300,280);

//鼻、口
line(250,190,250,300);
ellipse(250,190,20,20);
line(200,300,300,300);

//目
ellipse(230,160,40,50);
ellipse(270,160,40,50);
ellipse(240,160,10,10);
ellipse(260,160,10,10);

STEP２　青色を塗る

前回の復習ですが、プログラムは基本的に上から順に処理されるので、
上部でコーディングした部分。つまり背景に近い部分から順に処理していきます。
なのでまず青色から塗っていきましょう！

fill() と RGB

Processingで図形に色を塗る処理は上記の通りです。
RはRed(赤)、GはGreen(緑)、BはBlue(青)で、0~255の範囲の整数で指定します。光の三原色ですね。
具体的な値は次のサイトを参照してみてください。
RGB確認ツール

青色で塗りつぶす

さて、色の塗り方を覚えたのでProcessingに追加しましょう。
今回は青色としてfill(100,150,220);を指定します。
数値は好きに変えていただいて問題ないです！

fill();の処理を追加する場所は、色を塗りたい図形より上の部分に書きます！
なぜならプログラムは上から処理されるからですね！
では、以下のようにコードを追加して実行してみましょう。

実行した結果ドラ○もんが全部青色に染まったのがわかりますでしょうか？
fill();というのは、fill();以降の図形の色を指定するので、fill();以降の図形は全て指定した色になります。
特定の図形の色のみを変更したい場合は、再びfill();の処理を書いて指定色を戻す必要があります。
なので、書く際は以下のように書きます。

//顔パーツ
fill(100,150,220); //青色
ellipse(250,250,300,300);
fill(255,255,255); //白色に戻す
ellipse(250,275,250,250);

STEP3　鼻、目を塗る

鼻と目を塗りつぶす

続いて鼻と目をそれぞれ赤と黒に塗っていきます。
鼻は赤(255,0,0)
目は黒(255,255,255)
で指定しましょう。

今回はどこに処理を追加すれば良いか考えてみましょう！
以下の結果になれば成功です！

答え

鼻

//鼻、口
line(250,190,250,300);
fill(255,0,0); //赤色
ellipse(250,190,20,20);
fill(255,255,255); //白色に戻す
line(200,300,300,300);

目

//目
ellipse(230,160,40,50);
ellipse(270,160,40,50);
fill(0,0,0); //黒色
ellipse(240,160,10,10);
ellipse(260,160,10,10);

見事正解できましたでしょうか？
プログラムが処理される順番をイメージしてコーディングしてみてくださいね！！

STEP４　口を描く

ここまででも十分鮮やかになりましたが、せっかくなら笑顔にしてあげましょう😄

半円(扇形)を描く

半円を描きたいのですが、残念ながらellipse();では描けません...
そこで以下の処理で半円を描きます。

指定する数値が多いですね...。😓
ただし、よく見るとellipse();とそんなに変わらないです!
円弧始まり位置、円弧終わり位置というのが追加されているのみです！
詳しく違いを見てみましょう！

時計の3時の位置から時計回りに描写していくイメージです！
radians()というのは度数法の数値を弧度法に直す処理です。弧度法で書くと右のようになります。
※数学に詳しい人は、x軸は右方向、y軸は下方向に＋の軸空間だとイメージすればわかりやすいです！

実際する処理

今回は上に弦、下に円弧の口を表現したいので、以下の処理を追加します。

arc(250,300,180,120,0,radians(180));

さて、最後です。
上記の処理をプログラムのどこに追加すれば良いか考えてみましょう！

答え

//鼻、口
line(250,190,250,300);
fill(255,0,0); //赤色
ellipse(250,190,20,20);
arc(250,300,180,120,0,radians(180));
fill(255,255,255); //白色に戻す
//line(200,300,300,300); //元々の口は消すかコメントアウト

ellipse();とarc();は書く順番が逆でも正解です！
元々あった口は処理しないようにするのも忘れないようにしてください！
ここまで行えば今回の目標が達成できました！

まとめ

いかがでしたでしょうか？
今回はドラ○もんを鮮やかに色塗りしました！
繰り返しになりますが、プログラムは上から処理されるという理解が何よりも大事です！😄
今回のポイントを振り返りましょう！

次回は今後の幅を広げるために、プログラミングに欠かせない「変数」の説明をします！
お楽しみに！