NARITA YUSUKE

トロコイドで描く幾何学模様

トロコイドっていうのを利用すると幾何学模様が描けるらしいのでやってみた。

トロコイドってなんだ?

Wikipedia によると、

トロコイド (trochoid) とは、円をある曲線(円や直線はその特殊な場合)にそってすべらないように転がしたとき、その円の内部または外部の定点が描く曲線。
トロコイド – Wikipedia

だそうだ。

Wikipedia では、「外トロコイド」と「内トロコイド」が解説されている。

なにやら幾何学模様を描くのに便利そうなのでエディタを作ってみた↓

trochoid_editor
トロコイドエディタ

以下、ちょっと解説とか。

外トロコイド

外トロコイドの式はこうだ。

外トロコイドの式
トロコイド – Wikipedia

これを JavaScript にするとこうなる。(cx, cy は canvas の中心 xy 座標)

var angle = degree * Math.PI / 180;
var x = (rc + rm) * Math.cos(angle) - rd * Math.cos(((rc + rm) / rm) * angle) + cx;
var y = (rc + rm) * Math.sin(angle) - rd * Math.sin(((rc + rm) / rm) * angle) + cy;

で、例えば var rc = 150, rm = 30, rd = 25; とすると下のような花びらみたいな形になる。

内トロコイド

内トロコイドの式
トロコイド – Wikipedia

JavaScript にするとこう。

var angle = degree * Math.PI / 180;
var x = (rc - rm) * Math.cos(angle) + rd * Math.cos(((rc - rm) / rm) * angle) + cx;
var y = (rc - rm) * Math.sin(angle) - rd * Math.sin(((rc - rm) / rm) * angle) + cy;

で、例えば var rc = 150, rm = 90, rd = 130; とすると下のような星になる。

楽しいね、トロコイド

ほかにもいろんな形が作れちゃう。


Adobe Acrobat のロゴもトロコイド。

大きく表示する

ぐるぐるトロコイド。

大きく表示する

雪だるま作るっていうのはどぉーお?

大きく表示する

これを応用して、トロコイドを使って CSS パーティクル!

これで作ったパラメータを利用して CSS パーティクルも簡単にできちゃう。

(参考: SCSSとCompassでおしゃれなCSSパーティクルを作ってみた – ICS LAB

いやー、トロコイドって面白いですね!

こちらからは以上です。