トップページに、Processingについて書いた記事を、辞書のように見つけやすくしてみました

【Processing】arcの使い方【画像とコード付き】

【Processing】arcの使い方【画像とコード付き】
  • URLをコピーしました!
ワタタク

Processingで、円弧を描くにはどうしたらいいんだろう?

調べたところ、arcの構文を使うと円弧を表現できると分かりました。

arcはラジアンとかPIという言葉が出てくるので、数学が苦手だと少し難しいのですが、画像つきの段階を踏んで解説。

今ここでarcを理解しておくことで、今後のProcessingで数学的な表現の勉強を始めるときに、抵抗を少なくすることができます。

ワタタク

記事の最後に、今回の内容を活かせるarcの関連記事(OPEN、CHORD、PIEについて)を載せています。円弧の表現力がつくので、最後まで読んでみてくださいね。

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

目次

【Processing】arcの書き方のルール(構文)

arcの構文
書き方arc(a, b, c, d, start, stop);
arcの構文に入力すること
a円弧の横の位置
b円弧の縦の位置
c円弧の横の直径の長さ
d円弧の縦の直径の長さ
startとstop
3パターンあり

度数で書く方法
radians(0);, radians(180);など


ラジアン(数値)で書く方法
0, 3.14など


PIなどの表記で書く方法
PI,QUARTER_PIなど

【3STEP】Processingのarcの使い方【画像とコード付き】

【STEP1】円弧の位置を決める

1つ目の500が楕円の横の位置。

2つ目の500が楕円の縦の位置。

//この段階では、実行してもエラーになります。

size(1000, 1000); //ディスプレイウィンドウの大きさを設定
arc(500, 500, 

【STEP2】円弧の大きさを決める

3つ目の500が楕円の横の長さ

4つ目の500が楕円の縦の高さ。

//この段階では、実行してもエラーになります。

size(1000, 1000); //ディスプレイウィンドウの大きさを設定
arc(500, 500, 500, 500, 

【STEP3】画像を参考に円弧のstartの位置とstopの位置を決める

以下の画像のような円弧を描き方を書いています。

startとstopの位置が分かりやすい図はすぐ先に載せています。

【STEP3】画像を参考に円弧のstartの位置とstopの位置を決める。

上記の画像は以下の図を参考にすると、円弧をイメージしやすいです。

度数。
radians(0)からradians(180)の範囲の円弧を描く。

Processing円の度数の表記で位置を書いている。

ラジアン(数値)

0から3.14までの範囲の円弧を描く。

Processingの円のラジアン(数値)表記で位置を書いている。

PIなどの表記

0から、PIまでの範囲の円弧を描く。

Processingの円のPIなどの表記で位置を書いている。

コード。

//度数、ラジアン(数値)、PIの3つの書き方で、同じ形になるように入力しています

size(1000, 1000); //ディスプレイウィンドウの大きさを設定

//度数の円弧の開始位置の書き方
arc(500, 500, 500, 500, radians(0), radians(180));

//ラジアン(数値)を使った円弧の開始位置の書き方
//arc(500, 500, 500, 500, 0, 3.14);

//PIなどの表記を使った円弧の開始位置の書き方
//arc(500, 500, 500, 500, 0, PI);

完成した円弧の画像。

Processingのarcで描いた画像。
ワタタク

円弧のstartと、stopの数値を変えて、いろいろな円弧を作成してみてくださいね。arc(500, 500, 500, 500, radians(0), radians(180));の度数を使った書き方が書きやすいと思います。

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

  • radiansのつづりを間違えないこと。
  • PI, QUARTER_PI, HALF_PI, PI+HALF_PIを大文字で書き、つづりを間違えないこと
ワタタク

PI+HALF_PIを入力するときは、長いし特に注意が必要。

【Processing】arcを学んでいた感じた疑問を解決

arcの構文で、度数、ラジアン(数値)、PIなどの表記のどれで書けばいい?

度数での書き方arc(500, 500, 500, 500, radians(0), radians(180));をおすすめします。

書くのも読むのも分かりやすいですから。

学習が進み、ラジアンの数値やPIなどを使って書いた方が表現しやすいなと思ったら、どちらか臨機応変に使います。

PIを使った書き方は長くなることもあるので、そんなに使用されないのではないかと予想しています。



arc(750, 750, 250, 250, HALF_PI, TWO_PI – QUARTER_PI, PIE);

PI PI PIEって3つも出てくるし読むのも大変。

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

虹、扇子、分度器、弓矢などをarcを思い浮かべながら見ることができるようになりました。

ワタタク

扇子を描くときにarcを使うと描きやすそうです。

Processingのarcはstartとstopの位置が大切

Processingのarcは、arc(a, b, c, d, start, stop);のstartとstopの位置を決め方が分かれば、簡単に感じるようになります。

0から360度の位置関係が頭の中で思い浮かぶようになれば、サクッと描くことも可能に。

今回のarcの内容を活かし、円弧の表現力をさらにつけるためには、【Processing】arcのOPEN・CHORD・PIEの使い方【画像とコード付き】を読んでみてください。以下のような表現が可能になります。

ワタタク

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次