【Processing】ellipseで楕円を描く方法【数値を調整したら線も描けた】

ワタタク

Processingでシンプルな円を描きたいなぁ。どうやったら描けるんだろう？

Processingでシンプルな円は、ellipseを使うと描けることが分かりました。

今回の記事では、ただellipseの使い方をお伝えするだけでなく、「ellipseの正確な英語の訳」や、記事の後半では「ellipseで線を描いた方法」などをお伝えしていきます。

ワタタク

では、ellipseの正確な意味から理解していきましょう～。

この記事を書いた人

プロフィール

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

 

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

楕円と円の違いについて

楕円
円を押しつぶしたような形

Googleの楕円　意味の検索結果より引用

円
まるいこと。また、その形。

デジタル大辞泉より引用

Processingには、ellipseで楕円を書く構文と、circleで円を書く構文があるので、意味の違いを理解しておくのは重要。

ワタタク

ellipseの方がいろいろな形をつくりやすい。

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

Processing初心者の多くの方が、最初にコーディングで絵を描くのはellipseだと思います。（参考書も大体ellipse。）

ellipseは、Processingの座標の感覚をつかみやすいですし、書き方のルールもちょっと勉強したらすぐに書けます。

ワタタク

僕は初めてellipseで楕円を書いたとき、コードを書いて絵を描けた感覚に「おお！！すげぇ。」って感動しました。

【Processing】ellipseの書き方のルール

ワタタク

次の項目のellipseを書く手順を真似すると、簡単に描けることが分かるよ。

【Processing】ellipseで楕円を書く手順を画像つきで解説【6STEP】

真似してくださいね。

STEP

描くellipseの楕円を確認する

ellipse(a, b, c, d);で以下のX軸の位置500, Y軸の位置500, 楕円の横幅1000、 楕円の縦の高さ600の楕円を描くプログラムを書いていきます。

STEP

sizeで1000×1000のキャンバスを用意

Copy

size(1000, 1000);

STEP

楕円のX軸の位置を決める

今実行してもxの位置が決まっているだけなので、エラーになります。

なぜなら、ellipse(a, b, c, d);のabcdすべてを入力しないとエラーになるからです。

Copy

size(1000, 1000);
ellipse(500, 

STEP

楕円のY軸の位置を決める

入力例

Copy

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

STEP

楕円の横幅の大きさを決める

入力例

Copy

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

STEP

楕円の縦幅の高さを決めて、実行すれば完成

入力例

Copy

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

実行

ellipseを使って書いた楕円の例5つ【コードあり】

背景を白にしてみると、ellipseの輪郭が目立ちますね。

シャーペンで描いたような細さの輪郭です。

【1】円

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

すごくきれいな円。

【2】縦長の楕円

size(1000, 1000);
background(255);
ellipse(300, 500, 250, 780);

縦長の楕円もきれいに描いてくれますね。

【3】はみ出す楕円

size(1000, 1000);
background(255);
ellipse(100, 300, 400, 800);

はみ出す表現も工夫すれば、いろいろと面白い表現ができそうです。

【4】楕円を重ねる

size(1000, 1000);
background(255);
ellipse(100, 200, 300, 150);
ellipse(200, 300, 400, 200);
ellipse(300, 400, 500, 250);
ellipse(400, 500, 600, 300);
ellipse(500, 600, 700, 350);
ellipse(600, 700, 800, 400);
ellipse(700, 800, 900, 500);

こっちに迫ってくる感じを楽しみました。

【5】楕円で線を描く

size(1000, 1000);
background(255);
ellipse(100, 800, 750, 0);

Processingのlineを使わずに、ellipseで線を描けたことに気づけたのは嬉しかったです。

いろいろと数値を試してみて良かったと思いました。

【Processing】ellipseで、気をつけたいエラー

ellipse(500, 500);のように数値を4つ入力しないとエラーになります。

ellipse(500, 500, 500, 500);のように4つの数値を入力することが基本。

ワタタク

ellipseの入力に慣れていないときは、数値を2つだけしか入力してなくて、エラーになった経験から「気をつけないとな。」と思えるようになりました。

Processingのellipseを学んだ後は、世界の見え方がこう変わる

ラグビーボールや、目の形を意識したときに、ellipseが思い浮かぶようになりました。

楕円の形の物って、なかなか思いつかないですね。

この記事のまとめ

今回の記事では、ellipseの書き方を理解するのに集中してもらいたかったので、色をほぼ変更せずに、お伝えしてきました。（記事の後半で背景を白にしたくらい。）

Processingの学習を進めて、楕円に色をつけれるようになったり、輪郭の太さを変えれるようになると、表現がひろがり、とても楽しくなります。

fillで楕円の色を変えることができ、strokeWeightで楕円の輪郭を変えることができます。

調べてみてくださいね。

ワタタク

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