読者です 読者をやめる 読者になる 読者になる

not good but great

プログラミング、アート、映画・本の感想について書きます。

媒介変数に三角関数を掛けて予想不能な動きを作る

Javascript Paper.js

媒介変数を使う

高校の数学で媒介変数(パラメータ)によって図形を表す問題をやったことがあります。それをプログラミングに適用したら、コードも簡単だし、おもしろいこともできるのではないかと思いました。
RETURN 円の媒介変数表示

円を媒介変数で表す

x = r * cos(θ)
y = r * sin(θ)

なぜこうなるのかと言われれば、円の定義だからと言えば良いのでしょうか。数学が得意ではないのでよくわかりません笑。θを消去すれば、円の方程式が出来上がります。

balls[i].path.position += new Point(r * Math.cos(event.count / 10),r * Math.sin(event.count / 10));

コードを一部抜粋すると上のようになります。ボールの位置に足していく形です。三角関数なので、負の値も取ることから、増加し続けるわけではないです。

balls[i].path.position += new Size(r,r) * new Point(Math.cos(event.count / 10),Math.sin(event.count / 10));

半径のrを繰り返し、書いて分かりにくいので、Sizeを使って外に出して書くやり方もあります。

予想不能な図形

balls[i].path.position += new Point(30 * Math.cos(event.count / (i / 6 + 10)),10 * Math.sin(event.count / (i / 3  + 10))) * Math.sin(event.count / 100);

先ほどの円の媒介変数を無茶苦茶に変えてみます。半径も三角関数で動いて、X座標、Y座標それぞれの変わり方も変えます。円の個数に合わせてまた変数(i)を追加してみました。

demo

f:id:naoyashiga:20140327224454p:plain
Paper.js Editor
立体的な八の字を描くようなものができました。作った本人もどのように動いているのかわかりません笑。このような予想不能なものを作るのは楽しいですね。調べてみるとジェネラティブアートと呼ばれるそうです。これがアートかどうか知りませんが・・・・面白い分野だと思いました。