【Processing】ellipseMode4種類の使い方【方眼罫の画像を使って段階を踏んで解説】

ワタタク

ProcessingのellipseModeってどうやって使うんだろう？

調べたところCENTER、RADIUS、CORNER、CORNERS4種類の使い方があるということが分かりました。

ellipseModeの4種類を使うことによって、ellipseで楕円を描くときの位置の調整をしやすくなります。

ellipseについて分かっていないと理解しにくいので、分かっていないなら【Processing】ellipseで楕円を描く方法【数値を調整したら線も描けた】を先に読んでからこの記事の内容を読んでくださいね。

ワタタク

ではellipseMode();について画像つきで、段階を分で解説していくので参考にしてください。

この記事を書いた人

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

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

 

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

【Processing】ellipseModeの英語の読み方と意味

エリプスの楕円という意味と、モードのやり方という2つの意味が合わさって、エリプスモードという英語になっています。

ワタタク

モードの意味はなんとなく分かる人が多いと思いますし、ellipseの楕円という意味が分かればいいですね。

なんのためにProcessingでellipseModeを使うの？

ワタタク

ではどのように書くのか解説していきます。

【Processing】4種類のellipseMode書き方のルール

ellipseModeを書くためのルールは、以下の4つです。

【ルール1】ellipseMode(CENTER)で書く方法

ellipseMode(CENTER);は、楕円の最初の位置を中心にし、それから横幅と高さを設定するモード。

ellipseの横の中心の位置であるaが500。

縦の高さの中心の位置であるbが500。

楕円の横幅cが1000。

楕円の縦の高さdが1000。

上記画像のコード。

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

コードを実行した結果。

【ルール2】ellipseMode(RADIUS)で書く方法

ellipseMode(RADIUS);は、楕円の最初の位置を中心にします。

そして半径の横幅と半径の縦の高さで楕円を描きます。

ellipseの横の中心の位置であるaが500。

縦の高さの中心の位置であるbが500。

ellipseの横の長さが半径300。

縦の高さが半径300。

上記コードの画像。

size(1000, 1000);
ellipseMode(RADIUS);
ellipse(500, 500, 300, 300);

コードを実行した結果。

【ルール3】ellipseMode(CORNER)で書く方法

ellipseMode(CORNER)は最初の位置を角に設定し、楕円を描く方法です。

ellipseの横の位置であるaが300。

縦の高さの位置であるbが300。

楕円の横の幅であるcが300。

縦の高さであるdが100。

コード。

size(1000, 1000);
ellipseMode(CORNER);
ellipse(300, 300, 300, 100);

コードを実行した結果。

【ルール4】ellipseMode(CORNERS)で書く方法

ellipseMode(CORNERS);は、楕円の最初の角と対角にある角の数値を入力して描く。

楕円の最初の位置を設定。

横の位置であるaが300。

縦の位置であるbが300。

aとbの対角の位置を決める。

横の対角の位置であるcが1000。

縦の対角の位置であるdが1000。

円の左上にある黒丸が300, 300の位置。

円の右下にある黒丸が1000, 1000の位置。

これらの2つの位置から円が描かれる。

コード。

size(1000, 1000);
ellipseMode(CORNERS);
ellipse(300, 300, 1000, 1000);

コードを実行した結果

ワタタク

CORNERSはちょっと難しかったね。

【Processing】コーディング中に他のellipseModeに変える方法

ellipseMode(RADIUS);を使ったあとに、ellipseMode(CORNERS);を使ってコードを書けば、他のellipseMode();で楕円を描けるようになります。

ワタタク

せっかくだから、ellipseModeを同じ数値を使って描いたらどう変わるのか描いてみます。

size(1000, 1000);
background(255);// 背景を白にする

fill(255, 0, 0);// 赤色の円
ellipseMode(RADIUS);
ellipse(300, 300, 500, 500);

fill(0, 255, 0);// 緑色の円
ellipseMode(CORNER);
ellipse(300, 300, 500, 500);

fill(0, 0, 255);// 青色の円
ellipseMode(CORNERS);
ellipse(300, 300, 500, 500);

上記コードの画像。

ワタタク

ellipseMode();によって、同じ数値でも違う位置、大きさの円が描かれることが分かりました。

ProcessingのellipseModeで、気をつけたいエラー

ellipseMode(RADIUS);などのRADIUSを大文字で書くこと。

ellipseMode();のMを大文字で書くこと。

ワタタク

上の2つを特に気をつけること。

【Processing】ellipseModeを学んでいた感じた疑問1つを解決

どのellipseModeを使えばいいの

基本的には、デフォルトで設定されているellipseMode(CENTER);でいいと思います。

なぜなら、ellipseMode(RADIUS);など、別のモードにすると1行書くことが増えてしまうからです。

もし、よっぽどellipseMode(RADIUS);など他のモードの方が楕円を描くイメージを使いやすいなら、あなたが使いやすいellipseModeを使うといいですね。

なぜellipseMode(RADIUS);でわざわざ、半径で描くの？

ellipseMode(RADIUS);で描くと、ellipse(a,b,c,d)のcとdの部分の数値を少なく、読みやすく、理解しやすく書けるから、半径で書くのだと思います。

例えば、ellipse(1000, 1000, 1000, 1000);よりもelipse(1000, 1000, 500, 500);と0の数を減らして、桁数を少なくしたほうが読みやすいです。

【Processing】ellipseModeを学ぶと、世界の見え方がこう変わる

楕円や丸い物を、ellipseMode();を自分なりに設定して、見ることができるようになりました。

リンゴを見たときに「ellipseMode(RADIUS);だとしたら、ellipse(60, 60, 20, 20);くらいか？」と考えて楽しめるように。

僕はProcessingのellipseMode();をデフォルトで使います

僕はデフォルトで設定されているellipseMode(CENTER);を使います。

デフォルトで設定されているので、何も書かなくていいので楽だからです。

皆さんはどのellipseMode();を使いますか？

使いやすいモードを使ってくださいね。

ワタタク

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