【Processing】組み込み変数のwidthとheightについて【図形の数値入力が楽になる】

2024年7月19日

URLをコピーしました！

ワタタク

Processingの図形で数値をもっと楽に入力する方法はないかな？

調べたところ、Processingのwidthとheightを使えば、図形の数値の入力を楽にすることができました。

図形の位置の調整や重ねて描くのがすっごく楽に。

ワタタク

英語のwidthとheightの意味から解説し、使い方を載せていきます。

この記事を書いた人

ワタタク

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

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

※記事内のProcessingのバージョンは4.3です。

【Processing】組み込み変数のwidthとheightの意味

widthは横幅、heightは縦の幅という意味です。

ワタタク

かなり重要です。

【Processing】widthとheightの構文

widthとheight書く方法と説明
構文	ellipse(1000, 1000, width, height); ellipse(width, height, width, height); ellipse(width, height, width + 200, height + 300); というような書き方ができる。
入力内容について	widthとheightはsize();で設定した数値になります。
数値を入力したらどうなるか	size(500, 500);でellipse(width, height, width, height);なら、真ん中に円ができます。

【Processing】組み込み変数のwidthとheightを使って図形を書いてみる

横と縦の位置のみをwidthとheightを使って書く

size(1000, 1000);
ellipse(width, height, 500, 500);

横と縦の位置、幅と高さをwidthとheightを使って書く

size(1000, 1000);
ellipse(width, height, width, height);

widthとheightを四則計算を使って書く

size(1000, 1000);
ellipse(width - 500, height - 500, width -300, height -300);

ワタタク

楕円が500と500の位置から、幅700、縦700の楕円を描いています。

+ や / *も機能するので試してみてください。

【Processing】組み込み変数のwidthとheightは図形を重ねて描きたいときに便利

size(1000, 1000);
ellipse(width - 500, height -500, width -50, height -50);
ellipse(width - 500, height -500, width -100, height -100);
ellipse(width - 500, height -500, width -200, height -200);
ellipse(width - 500, height -500, width -300, height -300);
ellipse(width - 500, height -500, width -400, height -400);
ellipse(width - 500, height -500, width -500, height -500);
ellipse(width - 500, height -500, width -600, height -600);
ellipse(width - 500, height -500, width -700, height -700);
ellipse(width - 500, height -500, width -800, height -800);
ellipse(width - 500, height -500, width -900, height -900);

ワタタク

数値を考えるのが圧倒的に楽。入力も脳の負担も減ります。

【Processing】組み込み変数のwidthとheightは数値を適当に変えてみると、思わぬアイデアの発見があるかも

size(1000, 1000);
ellipse(width - 230, height -311, width -145, height -777);
ellipse(width - 500, height -7920, width -230, height -210);
ellipse(width - 700, height -50, width -220, height -340);
ellipse(width - 333, height -280, width -555, height -388);
ellipse(width - 289, height -90, width -789, height -459);
ellipse(width - 945, height -531, width -244, height -1112);
ellipse(width - 345, height -899, width -661, height -119);
ellipse(width - 50, height -45, width -5, height -111);
ellipse(width - 335, height -388, width -10, height -4430);
ellipse(width - 661, height -277, width -300, height -500);