a-15 動き(5) 円運動・らせん

a-15 円運動・らせん

sin()関数とcos()関数は、指定した角度の正弦(サイン)と余弦(コサイン)を-1から1の間の数として返す。arc()関数と同じように、角度はラジアンで指定する。
ラジアンについて

sin()関数

float angle = 0.0;
float offset =100;
float scalar =50;
float speed =0.05;

void setup(){
  size(500,250);
}

void draw(){
  background(99,171,242);
  fill(254,253,108);
  noStroke();
  float y1 =offset + sin(angle)*scalar;
  float y2 =offset + sin(angle+0.4)*scalar;
  float y3 =offset + sin(angle+0.8)*scalar;
  ellipse(200,y1,50,50);
  ellipse(250,y2,50,50);
  ellipse(300,y3,50,50);
  angle += speed;
}

sin()の値に動きを加えると、サイン波に沿った動きをします。

円運動

float angle = 0.0;
float offset =250;
float scalar =50;
float speed =0.05;

void setup(){
  size(500,500);
}

void draw(){
  fill(254,253,108);
  float x = offset + cos(angle)*scalar;
  float y = offset + sin(angle)*scalar;
  ellipse(x,y,50,50);
  angle += speed;
}

sin()関数とcos()関数を合わせると円運動を作ることができる。cos()がx座標、sin()がy座標となり、この2つに変数scalerをかけて、回転半径を変更し、変数offsetを加えて回転中心を移動させている。

float angle = 0.0;
float offset =250;
float scalar =50;
float speed =0.05;

void setup(){
  size(500,500);
}

void draw(){
  background(99,171,242);
  fill(254,253,108);
  noStroke();
  float x = offset + cos(angle)*scalar;
  float y = offset + sin(angle)*scalar;
  ellipse(x,y,50,50);
  angle += speed;
}

background()を入れると、円運動の軌跡は見えません。

らせん

float angle = 0.0;
float offset =250;
float scalar =5;
float speed =0.05;

void setup(){
  size(500,500);
  background(99,171,242);
  fill(254,253,108);
  noStroke();
}

void draw(){
  float x = offset + cos(angle)*scalar;
  float y = offset + sin(angle)*scalar;
  ellipse(x,y,5,5);
  angle += speed;
  scalar += speed;
}

scalarの値をフレームごとに大きくしていくと、らせんを描きます。