【p5.js】三角関数:sin(),cos()

三角関数を使うと円周上に図形を描画することができます。三角関数の理解を深められれば、より複雑な軌道を描くアニメーションができると思います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

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;  //半径を増やして螺旋を描く
}

まとめ

• 三角関数を使うと円周上に図形を描画できる
• 数学の知識があるとより良い

参考サイト

• p5.js入門 (全14回) - プログラミングならドットインストール