三角関数を使うと円周上に図形を描画することができます。三角関数の理解を深められれば、より複雑な軌道を描くアニメーションができると思います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。
sic(),cos():円周上に図形を描画する
sic()とcos()で、円周上のx座標y座標を求める。
let angle = 0; //角度 let r = 50; //半径 let x, y; //xy座標 function setup(){ createCanvas(200, 200); noStroke(); } function draw(){ background(127); push(); translate(width/2, height/2); x = cos(radians(angle)) * r; y = sin(radians(angle)) * r; ellipse(x, y, 10, 10); pop(); //角度を2度プラス angle += 2; }
螺旋状に図形を描画する
半径を増やして螺旋を描く。
let angle = 0; let r = 20; let x, y; function setup(){ createCanvas(200, 200); noStroke(); background(127); } function draw(){ push(); translate(width/2, height/2); x = cos(radians(angle)) * r; y = sin(radians(angle)) * r; ellipse(x, y, 10, 10); pop(); angle += 2; r += 0.1; //半径を増やして螺旋を描く }
まとめ
- 三角関数を使うと円周上に図形を描画できる
- 数学の知識があるとより良い