【Processing】書いたコードが表示される順序

ワタタク

Processingで書いたコードって、どういう順番で表示されてるんだろう？

書いたコードがどのように実行されてるのか、理解することは重要です。

理解することによって、2つの図形を重ねたときに、どちらを上にするのか下にするのかを決めることができるようになります。

分かっていないと、思った通りに表示されないこともあるので、知っておいてくださいね。

ワタタク

僕はプログラマーの友達に教えてもらいました。

この記事を書いた人

当ブログがはじめての方へ

• クリエイティブコーディング初心者が、アーティストとして活躍するまでの上達の過程を発信
• コンセプトは「クリエイティブコーディング上達のための参考書」
• 参考にしてもらえるブログにするため、Processingを独学で勉強して共有中

 

※記事内の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つの図形の重なり方は頭の中でもイメージすることができるようになりました。

頭の中でイメージした通りに図形を重ねれるようになると楽しいですよ。

ワタタク

それでは今日もレッツワクワクコーディング。