【Processing】triangleの使い方【三角形で強い印象の作品をつくれるようになる】

【Processing】triangleの使い方【三角形で強い印象の作品をつくれるようになる】
  • URLをコピーしました!
ワタタク

Processingで三角形ってどうやって描くんだろう?

調べたところ、triangleを使えばProcessingで三角形を描けるようになること分かりました。

三角形は最も強い形と言われていて、Processingで強いイメージのある作品を作りたい場合は、triangleを使ってアイデアを考えるといいですね。

記事の中では、他の三角形のイメージについてを解説して、関連知識をつけてからProcessingのtriangleのコードの書き方について説明しています。

ワタタク

triangleはちょっと入力する数値が多いけど、難しくないです。真似してみてくださいね。

この記事を書いた人

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

目次

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

triangleの英語について
英語の読み方トライアングル
英語の意味三角形

triは3つという意味があり、angleは角度どいう意味がある。2つ合わさってtriangleの三角形。

ワタタク

語源を理解すると、英単語を覚えやすいね。

なんのためにProcessingでtriangleを使うの?

Processingでtriangleを使う理由7つ
  • 三角形を描くため
  • 強いイメージのある作品をつくるため
  • 安定感のある作品をつくるため
  • 印象的なシンボルマークを作るため
  • 方向性を感じてもらえる作品をつくるため
  • 動きを感じやすい作品をつくるため
  • 幾何学的な作品をつくるため

上記の2、3、4についての補足。

ピラミッドは安定感があって強そうです。そして、4のシンボルマークも、三角形を使うと強くて安定感があるので使用されているのだと思います。

たとえば、アメリカ合衆国の1ドル札の裏側にあるプロビデンスの目。

ワタタク

プロビデンスの目についてはよく分かっていないけど、すっごい強そうだし安定感がある。

【Processing】triangleはどんなアートのジャンルで使うの?

triangleを使うアートジャンル4つ
  • ミニマリズム
  • 風景
  • 抽象的な表現
  • 幾何学的な表現
ワタタク

風景だと山を表現するのに使う。

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

triangleで三角形を描く方法と説明
書き方triangle(x1, y1, x2, y2, x3, y3);
入力内容x1 三角形の最初の角の横の位置

y1 三角形の最初の角の縦の高さの位置

x2 三角形の2番目の角の横の位置

y2 三角形の2番目の角の縦の高さの位置

x3 三角形の3番目の角の横の位置

y3 三角形の3番目の角の横の位置
数値を入力したらどうなるかx1, y1の角、 x2, y2の角  x3, y3の角がつながって三角形を描かれる

【3STEP】Processingのtriangleを使って、三角形を描く手順【コードと画像つき】

以下のtriangleの画像について、詳しく説明していきます。

【3STEP】Processingのtriangleを使って、三角形を描く手順【コードと画像つき】
STEP
三角形の最初の角の位置、x1とy1を入力する

500がx1、200がy1。

size(1000, 1000); //ディスプレイウィンドウのサイズ
background(255); //背景の色を白に
// 三角形のx1とy1を入力
triangle(500, 200,

上記コードの画像。

三角形の最初の角の位置、x1とy1を入力する。
STEP
三角形の2番目の角の位置、x2とy2を入力する

900がx2、800がy2。

size(1000, 1000);
background(255);
// 三角形のx2とy2を入力
triangle(500, 200, 900, 800, 

上記コードの画像。

三角形の2番目の角の位置、x2とy2を入力する。
STEP
三角形の3番目の角の位置、x3とy3を入力する

100がx3、800がy3。

size(1000, 1000);
background(255);
// 三角形のx3とy3を入力
triangle(500, 200, 900, 800, 100, 800);

上記コードの画像。

三角形の角の位置が決まりました。

三角形の3番目の角の位置、x3とy3を入力する。

コードを実行。

ワタタク

三角形が完成~。

【Processing】いろいろな三角形を描いてみる

はみだす三角形

Processingのtriangleではみ出す三角形を作成。

x3で-500を入力することで、左側にはみ出すように位置を調整。

size(1000, 1000);
background(255);
triangle(100, 200, 500, 500, -500, 100);

縦に長い三角形

Processingのtriangleで、縦に長い三角形を作成。
size(1000, 1000);
background(255);
triangle(900, 50, 1000, 1500, 800, 800);

重なった三角形

Processingのtriangleで、重なった三角形を作成。
size(1000, 1000);
background(255);
triangle(300, 500, 700, 800, 100, 459);
triangle(500, 500, 500, 800, 200, 600);

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

triangleは「,」のつけ忘れに注意すればいいですね。

ワタタク

イメージした三角形の形の数値を考えるのに夢中になって、コンマをつけ忘れたことがあります。イメージした通りの三角形の数値を思いついたとしても、焦らずに「,」がついているか確認するのが大切。

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

三角形に色をつけるにはどうしたらいい?

輪郭線はstrokeで、塗りつぶすにはfillを使うことで色をつけることができる。

三角形の2番目の角は、左の角からでも右の角からでも描ける?

はい。描けます。

以下のように、x2, y2とx3,y3の順番を変えて、
triangle(500, 200, 900, 800, 100, 800);と描いても
triangle(500, 200, 100, 800, 900, 800);と描いても同じ三角形が表示されました。

どちらの書き方でも表示された画像。

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

ピラミッドや三角定規を見ると、Processingのtriangleのことを感gなえることができるようになりました。

ワタタク

矢印とか弓矢も見るとtriangleのことを考えることができるように。見るたびに復習できる。

Processingのtriangleを使いこなして、風景を描きたい

僕はtriangleを工夫して、山を描いたりしたいですね。

学習が進めば、三角形を使って、堅苦しい感じのアートも作成してみたい。

皆さんはtriangleでどのような作品をつくりますか?

数値を6個入力しないといけないので、少し大変ですが、慣れていきましょう。

ワタタク

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

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

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

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

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

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

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

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

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