この記事と合わせて読むと、理解が深まる関連知識
ワタタクProcessingで書いたコードって、どういう順番で表示されてるんだろう？
書いたコードがどのように実行されてるのか、理解することは重要です。
理解することによって、2つの図形を重ねたときに、どちらを上にするのか下にするのかを決めることができるようになります。
分かっていないと、思った通りに表示されないこともあるので、知っておいてくださいね。
ワタタク僕はプログラマーの友達に教えてもらいました。
この記事を書いた人
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
※記事内のProcessingのバージョンは4.3です。
目次
【Processing】書いたコードが表示される順序
Processingで書いたコードは、上から順番に機能し、表示されていきます。
例。
はじめに1000×1000のサイズの画面が表示される。
次に、背景が白色になる。
最後に、円が表示される。
size(1000, 1000);//1 画面のサイズを1000、1000するコードが機能し、表示
background(255);//2 背景を白色にするコードが機能し、表示される
ellipse(500, 500, 500, 500);//3 円を描くコードが機能し、表示される
【Processing】書いたコードが表示されるときの重なり方
表示された内容は、上から順番に重なっていきます。
言い換えると、後に書いたコードが上に表示されます。
背景を書くときには順序に気をつける
円の上に、背景を白色にするコードが重なり、円が見えなくなっている例。
正しくは、size→background→ellipseの順番でコードを書くこと。
size(1000, 1000);//1 画面のサイズを1000、1000するコードが機能し、表示
ellipse(500, 500, 500, 500);//2 円を描くコード
background(255);//2 背景を白色にするコードが機能し、表示される1000×1000の白色の背景が表示されている。
図形の重なり方
三角形の上に円が重ねた例。
size(1000, 1000);
background(255);
triangle(500, 250, 200, 800, 650, 800);//三角形を表示するコード
ellipse(600, 600, 450, 450);
重なり方を意識して、作品をつくる
慣れないときは、ノートに図形などの重なり方を描いてから、コードにしていくと頭の中が「あれ？どっちが重なってて上にくるんだっけ？」ってならないです。
僕はProcessingの勉強を続けていて、2～5つの図形の重なり方は頭の中でもイメージすることができるようになりました。
頭の中でイメージした通りに図形を重ねれるようになると楽しいですよ。
ワタタクそれでは今日もレッツワクワクコーディング。