元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事とブログのカスタマイズについてアウトプットしています。

 menu

【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;
}
f:id:shiroyuki2020:20210427230616g:plain

螺旋状に図形を描画する

半径を増やして螺旋を描く。

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;  //半径を増やして螺旋を描く
}
f:id:shiroyuki2020:20210427230625g:plain

まとめ

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

参考サイト