コードで鏡餅を描く – p5.js で鏡餅づくりを詳しく解説【その2】

お正月ということでコードで鏡餅を書いてみてその解説をしています。前回の記事の続きです。

コードで鏡餅を描く – p5.js で鏡餅づくりを詳しく解説【その1】

お正月といえば鏡餅ですね。p5.js で鏡餅を描いてみたので解説します。 コードで画像生成するにはProcessingやp5.jsが便利 コード(プログラミング)で画像を作るにはProc…

p5.jsで鏡餅を作った手順(の続き)

前回はコードエディタを開いて、最初から書かれていたコードを実行して意味を確認しました。確認後設定を元に戻したと思いますので、コードエディタを開いた時点からまた手順を追って鏡餅を作成していきます。

コードエディタを開いた時点のコード

餅を1つ描いてみる

お餅は丸いですね。まずひとつ円(丸)を書いてみましょう。ドロー(描画)関数の中に書いていきます。5~7行目の{}カッコの中に新しく行を作って(今回の場合7行目に)ellipse(200,200,250,250); と書いていきます。

書けたら実行してみましょう。以下のように中央に円が描かれたでしょうか?

コメント

コードの中に説明のためにコメント(コードの説明)を入れたくなる時があります。

上のコードで「// 円を描く」と書いてある部分がコメントです。

p5.jsやProcessingでは「//」(スラッシュを2つ連続で入力)と書いた後のテキストはコメントとして扱われます。

こうした書き方はコメントアウトと呼ばれます。

※記事としては詳細説明としてコメントを入れていますが、コードを書くときに自分でもわかりやすくなるのでコメントは上達のコツともいえます。業務等で他の人が書いたコードを触る時も必要なコメントがされているコードは引き継ぎがしやすくなります。

コードを変更して餅らしくする

お餅のようにしたいので、平べったい形に変更しましょう。ellipse(200,200,250,250); コマンドは4つの数字が使われていますね。これは(円の中心のx座標, 円の中心のy座標, 円の幅, 円の高さ)となっています。円の幅と高さを設定できるので、正円以外に楕円を描くことができるのです。4つめの数字円の高さを250から90に変更してみましょう。

以下のようにお餅のように(横長の丸に)なったでしょうか。

2つめの餅を描く

鏡餅は2段重ねて飾りますので、もうひとつ持ちを描きましょう。コードは7行目と同じように8行目に書きます。打ち直しても複製️(コピー&ペースト)しても構いません。

ただしこのまま実行しても先ほどと何も変わりませんね。上の餅は少し小さく上の位置に、下の餅はそのままの大きさで少し下の位置に変更しましょう。下の餅は少し下にずらすので、円の中心のy座標を200から220に変更しました。上の餅は小さくするために幅, 高さを200, 70に変更。位置を上にずらすために円の中心のy座標を200から150に変更しました。

位置・座標

コンピュータのスクリーン上で位置を示すのに座標がよく使われます。システムや設定、機器によって様々ですが、p5.jsやProcessingの場合標準の設定ではキャンバスの左上の角がx=0, y=0 となっています。

x座標は右に進むほど大きくなり、y座標は下に進むほど大きくなります。

※今回お餅の位置を上や下に動かしましたが、y座標の数字を大きくすると下に、小さくすると上に移動します。

実行すると以下のように2段のお餅になりました。

台を描く

鏡餅を載せる台は長方形を2つ組み合わせて作ってみましょう。ドロー(描画)関数の中にわかりやすいように1行開けて、10,11行目にコードを追加します。rect() は長方形を描くコマンドで4つの数字の意味は(長方形の左上の角のx座標, 長方形の左上の角のy座標, 長方形の幅, 長方形の高さ)となっています。楕円のellipse() は図形の中心点でしたが、長方形は左上の角になっていることに注意が必要です。

とりあえず実行すると、以下のように台のようになったではないでしょうか?位置や大きさが異なる場合、入力する数字に注意して確認してみてください。

図形は何も指定をしないと白く塗りつぶされて輪郭には黒い線がつきます。お餅は白いままでいいのですが、台は木のような色にしてみましょう。rect()の前にfill()という塗りつぶしを指定するコマンドを10行目に追加して書きます。fill()の3つの数字はbackground()の時と同じですので(赤, 緑, 青)の光の強さを表します。

ここで試しに実行してみると大変なことに気づきます。以下のようにお餅の色も変わってしまうのです。これは最初に説明したドロー(描画)関数が繰り返し実行されるという動作によるもので正常です。省略して書いてみると以下のような順で処理されています。

  1. [7,8行目]白い(指定なしで)餅を描く(一瞬だけ白かったはず)
  2. [10行目]塗りつぶしを木の色に設定する
  3. [11,12行目]台の長方形を描く(木の色になる)
  4. [13行目]ドロー(描画)関数が終わって[5行目]に戻る
  5. [7,8行目]餅を描く(塗りつぶしは木の色になっているため、2周目からは色が変わる)
  6. (…2.に戻って繰り返し)

つまり、一度色の指定をするとそれ以降その色で塗りつぶされるのですが、draw() 関数は繰り返し実行されるため、何も指定せず白で描いていたお餅まで色が変わってしまうのです。

そうならないために、お餅の色を指定しましょう。8行目でfill()コマンドで白を指定します。全ての色の光を最大にする(255, 255, 255)で白になります。

実行すると以下のようになります。

行の扱い

コードを書き進めていくと、行がどんどん増えていきます。コードの編集と実行の観点で行についてまとめます

コードの編集:新しく行を増やしたいときは改行すればOKです。(人間が読みやすいように)意味の塊を分けるために空の行を開けたりします。「// (スラッシュを2つ)」を使ってコメント行にしてもいいですね。参考にするコードがある場合でも行数まで全く一緒にする必要はありません。

コードの実行:p5.jsやProcessingをはじめ多くのプログラミング言語ではコードは上の行から下の行に向かって1行ずつ順に実行されていきます。中にはdraw関数や他の制御構文によって繰り返されたり、処理の条件により読み飛ばされたりすることもあります。またコードを実行するコンピュータは空の行やコメント行は無視しますが、ファイルサイズや処理時間(主に読み込み)には影響が出ることがあります。

お餅と台ができました。最初の見本では下のお餅が大きいくはみ出したように表していたので、同じようになるように少しコードを編集します。コードの順を、台を書いてからお餅を書くことでお餅が手前に飛び出るように表現できます。以下のようにコメントを加え順序を入れ替えました。(コピー&ペーストなどで編集します)

みかんを描く

鏡餅といえば、最上段にみかんを飾ったりしますね。みかんもコードで書いてみましょう。fill()elipse() を使って以下のように書いてみました。これまでの解説を参考に読み解いたり、位置や大きさを変化させて確認してみてください。

実行すると以下のようになります。だいぶ見本に近づいてきましたね。次回は紅白の背景を作っていきましょう。お楽しみに!

コードで鏡餅を描く – p5.js で鏡餅づくりを詳しく解説【その3】

1月が終わってしまいましたが、お正月に作ったp5.jsの鏡餅の最終回です。 これまで2回の記事で、p5.jsを使い始め、図形を描くことで鏡餅と飾りのみかん、木の台を作成しま…

続きが公開されました。最終回いよいよ完成です!

TENTOのおすすめポイント

解説記事を読むだけでなく直接指導をご希望の方はお気軽に体験授業にお申し込みください。