Last updated: 2016 -2014. Kajiyama                    [ 目次に戻る ]

[演習]     時計(直線の円運動)

マウスボタンを押すと止まる


  1. 回転角度(position)と角速度(velocitiy)の関係

      基本の運動として,直線が水平面上を一定の角速度でまわり続ける「等速円運動」のシミュレーションを考える.

      Processingのフレームが変わるたびに,角速度ωは回転角度θ(位置)を変えていく.

      描画の1フレームをframeRate(60)の1/60秒間隔で考える.

      例えば,初速度の角速度の設定 2.0 (ラジアン/秒)とすると,

      これを1フレーム(1/60秒)ごとの角速度に換算すると  angular_velocity = 2.0/60 (ラジアン/秒)

      1フレーム(1/60秒)ごとに位置を角度 2.0/60 (ラジアン)回転し,これが既存の回転角度θに加算される.

      1フレームの角度 θ (ラジアン)は,現在の角度 θ = 以前の角度 θ + 角度ω/60  angle = angle + angular_velocity (ラジアン)



  2. 時計の針の等速円運動--速度と位置の変化


    マウスボタンを押すと止まる
    
    
    
    // Processingのプログラム 時計と等速円運動
    
    int length=0;// 直線の長さ,回転半径
    float angle = 0.0;// 回転角,角度はラジアン
    float angular_velocity = 2.0/60;// 角速度
    
    void setup() {
      size(300, 300);//キャンバスのサイズ
      background(255);//背景色
      length = width/2;// 直線の長さ,回転半径
      frameRate(60);//1秒間に画面を60回描画する
    }
    
    void draw() {
      background(255);//フレーム毎に,白く塗り以前の描画を消す
      translate(width/2, height/2);// 座標軸の原点(0,0)を画面中央に移動
      rotate(angle);// 以下の図形を原点を中心に回転
      stroke(100);// 線の色 グレースケール
      strokeWeight(0);//直線の太さをピクセル単位で
      line(-length/2, 0, length, 0);// 直線を描く
    
      angle = angle + angular_velocity;
    }
    
    void mousePressed() {
     exit();// マウスボタンを押すと止まる
    }
    


  3. 直線の等速円運動 重ね書きする

    マウスボタンを押すと止まる
    
    
    
    // Processingのプログラム 時計の針の重ね書き
    
    int length=0;// 直線の長さ,回転半径
    float angle = 0.0;// 回転角,角度はラジアン
    float angular_velocity = 2.0/60;// 角速度
    
    void setup() {
      size(300, 300);//キャンバスのサイズ
      background(255);//背景色
      length = width/2;// 直線の長さ,回転半径
      frameRate(60);//1秒間に画面を60回描画する
    }
    
    void draw() {
      //background(255);//フレーム毎に,重ね書きをする
      translate(width/2, height/2);// 座標軸の原点(0,0)を画面中央に移動
      rotate(angle);// 以下の図形を原点を中心に回転
      stroke(100);// 線の色 グレースケール
      strokeWeight(0);//直線の太さをピクセル単位で
      line(-length/2, 0, length, 0);// 直線を描く
    
      angle = angle + angular_velocity;
    }
    
    void mousePressed() {
     exit();// マウスボタンを押すと止まる
    }
    


  4. 線の長さを変化させる.

    マウスボタンを押すと止まる
    
    
    
    // Processingのプログラム 針の長さを変える
    
    int length=0;// 直線の長さ,回転半径
    float angle = 0.0;// 回転角,角度はラジアン
    float angular_velocity = 2.0/60;// 角速度
    
    void setup() {
      size(300, 300);//キャンバスのサイズ
      background(255);//背景色
      length = 0;// 直線の長さ,回転半径 0から増やす
      frameRate(60);//1秒間に画面を60回描画する
    }
    
    void draw() {
      //background(255);//フレーム毎に,重ね書きをする
      translate(width/2, height/2);// 座標軸の原点(0,0)を画面中央に移動
      rotate(angle);// 以下の図形を原点を中心に回転
    
      stroke(100);// 線の色 グレースケール
      strokeWeight(0);//直線の太さをピクセル単位で
      line(-length/2, 0, length, 0);// 直線を描く
        // lengthがwidth/2以上ならlength=0に戻す
        length=length+1;
        if (length >=width/2+1) {
        length=0;
        }
    
      angle = angle + angular_velocity;
    }
    
    void mousePressed() {
     exit();// マウスボタンを押すと止まる
    }
    


  5. 線の色をグレーのグラデーションにする.


    マウスボタンを押すと止まる
    
    
    
    // Processingのプログラム 線の色を変える
    
    int i=0;// 線の色番号
    int length=0;// 直線の長さ,回転半径
    float angle = 0.0;// 回転角,角度はラジアン
    float angular_velocity = 2.0/60;// 角速度
    
    void setup() {
      size(400, 400);//キャンバスのサイズ
      background(255);//背景色
      length = 0;// 直線の長さ,回転半径 0から増やす
      frameRate(60);//1秒間に画面を60回描画する
    }
    
    void draw() {
      //background(255);//フレーム毎に,重ね書きをする
      translate(width/2, height/2);// 座標軸の移動
      rotate(angle);// 以下の図形を原点を中心に回転
    
      stroke(i);// 変化する線の色 グレースケール
        // iが255以上ならi=0
        i=i+1;
        if (i >=255) {
        i=0;
        }
      strokeWeight(0);//直線の太さをピクセル単位で
      line(-length/2, 0, length, 0);// 直線を描く
        // lengthがwidth/2以上ならlength=0に戻す
        length=length+1;
        if (length >=width/2+1) {
        length=0;
        }
      angle = angle + angular_velocity;
    
    }
    
    void mousePressed() {
     exit();// マウスボタンを押すと止まる
    }
    



[ 目次に戻る ]