今回は何をするの？
今回の目標
今回はProcessingでプログラミングをし、下の絵を描くところまでを目標にします。
簡単なパーツで構成されているので、1ステップずつ一緒に頑張りましょう！💪
今回のポイント
・コメントアウト機能
・プログラムが処理される順番
・円、線を書く処理
今回のポイントはこの3点です！ではいきましょう！
いざProcessing！
STEP 1 事前準備
まず、Processingを開いて新しいテキストウインドウを準備しましょう。
準備ができたら、まず下の処理を書いてみましょう！
//画面サイズ
size(500,500);「//画面サイズ」というのも丸ごと書いてみてください。
「//」 というのはコメントアウトという機能で、コンピュータが処理しない、人だけが読むメモ書きの機能です！
単にコメントと言ったりもします。
「//」と書かれた以降の文字はコンピュータが処理しないので
ここはこの処理。というのをメモすることでプログラムが格段に読みやすくなります。
コメントアウトには「// ○○」と書く方法と「/* ○○ */」という2通りがあります。
前者は改行するまでコメントアウトが有効で、後者は改行に関わらず、「/*」から「*/」の間を全てコメントアウトする違いがあります。
STEP 2 円を描こう！
続いて下の処理を追記します。
//顔パーツ
ellipse(250,250,300,300);
ellipse(250,275,250,250);ellipse()は円を描け！という処理です。数字は以下の情報を指定できます。
ここまで正しく入力できていれば下の左側の図のようになっていると思います。
また、入力するコードを上下順番をひっくり返して入力すると右の図になります。
/*参考
顔パーツ(入力上下逆)*/
ellipse(250,275,250,250);
ellipse(250,250,300,300);書く順番を変えただけで同じ処理を書いているはずなのに、表示される図が異なるのがわかると思います。
これには、プログラムは上から順に処理されることが影響しています！
上から順に処理されるので、小さい円から書いてしまうと、大きい円が覆い尽くしてしまうのです...
これはどのプログラミング言語でもそうなので覚えてしまいましょう💡
STEP ３ 線を描こう！
続いて下の処理を追記します。少し多いので、コピペでもいいですよ！
//ひげ
//左側
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()は線を描け！という処理です。数値で以下の情報を指定します。
line(150,210,200,220); であれば、(150,210)と(200,220)を線で結ぶ。という処理になります。
ここまで正しく入力できると下のようになると思います。
面影が見えてきましたね。もう一踏ん張りです。頑張りましょう！
STEP 4 残りのパーツを描こう！
最後です！下の処理を一気に追加します！
//鼻、口
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);入力して実行し、無表情のドラ○もんが表示されると成功です！
まとめ
いかがでしたでしょうか？
少し長かったですが、プログラミングで某キャラクターを描くことができましたね！😁
今回のポイントをおさらいしましょう！
次回は、今回描いた絵に色などをつけて完成度を上げてみましょう！
Take it easy！Take IT Breezy！
おつかれさまでした！！