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

【Processing】書いたコードが表示される順序。
  • URLをコピーしました!
ワタタク

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

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

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

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

ワタタク

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

この記事を書いた人

ワタタク(Watataku)
  • クリエイティブコーダー / アーティスト
  • 「人の心に寄り添う、機能するアート」を探究しています
  • アートとテクノロジーが、社会や個人のウェルビーイングにどう貢献できるかに、関心があります

目次

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

Processingで書いたコードは、上から順番に機能し、表示されていきます。

例。

はじめに1000×1000のサイズの画面が表示される。

次に、背景が白色になる。

最後に、円が表示される。

size(1000, 1000);//1 画面のサイズを1000、1000するコードが機能し、表示
background(255);//2 背景を白色にするコードが機能し、表示される
ellipse(500, 500, 500, 500);//3 円を描くコードが機能し、表示される
【Processing】書いたコードが表示される順序。

【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の図形の重なり方について。

重なり方を意識して、作品をつくる

慣れないときは、ノートに図形などの重なり方を描いてから、コードにしていくと頭の中が「あれ?どっちが重なってて上にくるんだっけ?」ってならないです。

僕はProcessingの勉強を続けていて、2~5つの図形の重なり方は頭の中でもイメージすることができるようになりました。

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

ワタタク

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

ワタタク(Watataku)
クリエイティブコーダー/アーティスト
AIと共に、「人の心に寄り添う、機能するアート」を探究しています。

ここは、その思索と創造の全記録を記す、思考の実験室(アトリエ)です。

僕の創作の源泉は、人生経験そのものです。
不当な出来事や、精神的な支配の中で、私の心は何度も粉々に砕け散りました。しかし、その一つ一つの破片をどのようにすれば鮮やかな絵の具にできるかを考え、ゆっくり心のパレットに色を整えていきました。その、長い、長い、自身との対話の果てに「人の役に立つアートを作りたい」という考え方にたどり着きました。

かつて、僕の武器は、アコースティックギター弾き語りと、カメラでした。
オリジナルソングの演奏でお客様投票1位となった「物語の力」。
世界20カ国の旅で培った、多様な「視点」。

今、僕は、それら全ての経験を、「コード」という、新しい言語で、世界に問いかけています。

このブログでは、作品の制作過程や、日々の発見、そして、僕自身の上達の軌跡を記録していきます。

僕の旅が、あなたの日常を、ほんの少しでも豊かにするための、光になることを願って。

クリエイティブコーディングロード運営者 ワタタク
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次