媒介変数を使う
高校の数学で媒介変数(パラメータ)によって図形を表す問題をやったことがあります。それをプログラミングに適用したら、コードも簡単だし、おもしろいこともできるのではないかと思いました。
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
Paper.js Sketch
立体的な八の字を描くようなものができました。作った本人もどのように動いているのかわかりません笑。このような予想不能なものを作るのは楽しいですね。調べてみるとジェネラティブアートと呼ばれるそうです。これがアートかどうか知りませんが・・・・面白い分野だと思いました。