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

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

Processing:回転運動の速度と加速度

「The Nature of Code」から回転運動について取り上げます。回転運動の速度と加速度について学びます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。

本記事の参考書籍は以下です。

回転運動の例

以下は、rotate()メソッドを利用した回転の参考例です。一定な速度で回転します。

float angle = 0;  //角度

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

void draw(){
  background(255);

  fill(175);
  stroke(0);
  strokeWeight(2);

  translate(width/2, height/2); //原点をウィンドウの中心に設定する
  rotate(angle);
  line(-50, 0, 50, 0);
  ellipse(50, 0, 16, 16);
  ellipse(-50, 0, 16, 16);

  angle += 0.05;
}

回転運動の速度と加速度

ベクトルの考え方に倣い、回転の速度と加速度を用いて回転する角度を計算します。この例では、どんどん加速して回転します。

//Angular motion using rotate()

float angle = 0;  //角度
float aVelocity = 0;  //回転の速度
float aAcceleration = 0.001;  //回転の加速度

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

void draw() {
  background(255);

  fill(175);
  stroke(0);
  strokeWeight(2);

  translate(width/2, height/2);
  rotate(angle);
  line(-50, 0, 50, 0);
  ellipse(50, 0, 16, 16);
  ellipse(-50, 0, 16, 16);

  aVelocity += aAcceleration;
  angle += aVelocity;
}

プログラムを実行して確認することをおすすめします。

メモ

  • translate(x, y);
    • 原点を(x, y)に設定する
size(400, 400);
translate(width/2, height/2);
rect(0, 0, 100, 100);

まとめ

「The Nature of Code」から回転運動について取り上げました。回転運動の速度と加速度について学びました。引き続き、「The Nature of Code」の内容を勉強します。

参考書籍

Javaの勉強にもなるので一石二鳥です。

» HTML入門のまとめはこちらです。