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

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

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


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

    マウスボタンを押すと止まる
    
    
    
    // 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/3-20, 0, -20, 0);// 直線1を描く
        line(100, 0, length+100, 0);// 直線2を描く
    
      angle = angle + angular_velocity;
    }
    
    void mousePressed() {
     exit();// マウスボタンを押すと止まる
    }
    


  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/3-20, 0, -20, 0);// 直線1を描く
        line(100, 0, length+100, 0);// 直線2を描く
    
      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 = 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/3-20, 0, -20, 0);// 直線1を描く
        line(100, 0, length+100, 0);// 直線2を描く
        // lengthがwidth/2以上ならlength=0に戻す
        length=length+1;
        if (length >=width/2+1) {
        length=0;
        }
    
      angle = angle + angular_velocity;
    }
    
    void mousePressed() {
     exit();// マウスボタンを押すと止まる
    }
    


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


    マウスボタンを押すと止まる
    
    
    
    // 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/3-20, 0, -20, 0);// 直線1を描く
        line(100, 0, length+100, 0);// 直線2を描く
        // lengthがwidth/2以上ならlength=0に戻す
        length=length+1;
        if (length >=width/2+1) {
        length=0;
        }
      angle = angle + angular_velocity;
    
    }
    
    void mousePressed() {
     exit();// マウスボタンを押すと止まる
    }
    



[ 目次に戻る ]