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

ベクトルを使いボールを水平面上で動かす (位置と速度)


  1. Processing はベクトルを直線運動に利用する

    1. Processing ではPVector がベクトルで position(位置),velocitiy(速度)を表す

      ・高校の復習 速さ(スカラー)と速度(ベクトル)

      ・高校の復習 等速直線運動  ・ 等加速度直線運動

      ・リファレンス ベクトルのクラス解説
      PVector クラスの機能ベクトルの計算メソッドを準備している
      ユークリッド幾何のベクトル
      ベクトルx成分:
      ベクトルy成分:
      PVector 変数名;
       変数名.x
       変数名.y
      ベクトル足し算add();
      ベクトル引き算sub();
      ベクトルをスカラー倍mult();
      ベクトルをスカラーで割るdiv();
    2. ベクトルで速度・加速度運動シミュレーションの解説

      ボールに力を加えない限り,ボールは静止状態を続け、動いているボールは等速直線運動を続ける.(運動の第1法則)

      ボールに力を加えると加速度が生じる. 力 = 質量 X 加速度, 加速度 = 力/質量 (運動の第2法則)

      1章 ベクトル,"The Nature of Cord 自然現象のシミュレーション入門",Daniel Shiffman,岡利崇訳,ボーンデジタル,p23-52, 2014.

      2章 力,"The Nature of Cord 自然現象のシミュレーション入門",Daniel Shiffman,岡利崇訳,ボーンデジタル,p53-84, 2014.


  2. ボールの等速水平運動

    1. ボールの速度とボールの水平面上の位置の変化

      ・ボールに力を加えない限り,ボールは静止状態を続け、動いているボールは等速直線運動を続ける.(運動の第1法則)

      (1) 位置(position)と速度(velocitiy)の関係

       最初の位置の設定 画面の中央: position.x = width/2 と position.y = height/2 (1ピクセル = 1m)

       速度ベクトルの設定: 初速度180√2 (m/s) 下方45度の向き

       Processingのフレームが変わるたびにボールの位置を変えていく.1ピクセル = 1m,1フレーム = 1/60秒

       1/60 秒間隔の1フレームで考える.1フレーム(1/60 秒)ごとの速度に換算すると初速度 180√2/60 (m/s) 下方45度の向き.

       フレームごとの水平方向のx成分 velocitiy.x= 180.0/60 (m/s) と 鉛直方向のy成分 velocitiy.y= 180.0/60 (m/s).

       速度のx方向は1フレーム間に180.0/60 m進むので,1フレーム後のボールの位置は position.x = position.x + velocitiy.x

       速度のy方向は1フレーム間に180.0/60 m進むので,1フレーム後のボールの位置は position.y = position.y + velocitiy.y



       1フレーム後の現在の位置(position)=以前の位置(position)+速度(velocitiy)  ベクトル表現では加算に「+」記号が使えない.

       ベクトルでの加算表現 position.add (velocitiy);  内容はposition.x = position.x + velocitiy.x; position.y = position.y + velocitiy.y; と同じ記述.



      ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

      ソースファイル
      //ボールの等速直線運動とボールの水平位置の変化 //ボールの位置変数のベクトル宣言 変数 position.x と position.y を定義 PVector position; //ボールの速度変数のベクトル宣言 変数 velocitiy.x と velocitiy.y を定義 PVector velocitiy; void setup() { //初期設定 size(500,400);//キャンバスのサイズは500mX400mを想像してください? background(255); position = new PVector(width/2,height/2);//最初の位置(x,y) velocitiy = new PVector(180.0/60, 180.0/60);//速度(x,y)の定義 } void draw() { // 初速度による新しい位置(x,y)の計算 position.add(velocitiy);//新しい位置=以前の位置+速度 ellipse(position.x,position.y,20,20);//新しい位置のボールを描く //save("vector_ellipse01.jpg");// 実行結果を画像形式で保存 //saveFrame("vector_ellipse01-###.tif");// 連続画像で保存 }
      実行結果


    2. ボールが壁にぶつかるとベクトルの方向が反転する

      ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

      ソースファイル
      //等速直線運動のボールが壁にぶつかると反転する //ボールの位置変数のベクトル宣言 変数 position.x と position.y を定義 PVector position; //ボールの速度変数のベクトル宣言 変数 velocitiy.x と velocitiy.y を定義 PVector velocitiy; void setup() { //初期設定 size(500,400); background(255); position = new PVector(width/2,height/2);//最初の位置(x,y) velocitiy = new PVector(180.0/60, 180.0/60);//速度(x,y)の定義 } void draw() { // 初速度による新しい位置(x,y)の計算 position.add(velocitiy);//新しい位置=以前の位置+速度 // 新しい位置(x,y)が壁と接するかを判別 if ((position.x > width-10) || (position.x < 10)) { velocitiy.x = -1 * velocitiy.x; //位置が壁にぶつかると方向反転 } if ((position.y > height-10) || (position.y < 10)) { velocitiy.y = -1 * velocitiy.y; //位置が壁にぶつかると方向反転 } ellipse(position.x,position.y,20,20);//新しい位置のボールを描く //save("vector_ellipse02.jpg");// 実行結果を画像形式で保存 //saveFrame("vector_ellipse02-###.tif");// 連続画像で保存 }
      実行結果


  3. ボールの軌跡を消す処理

    1. ボールの軌跡を全て消す

      ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

      ソースファイル
      //等速直線運動のボールが壁にぶつかると反転する--ボールの軌跡を消す //ボールの位置変数のベクトル宣言 変数 position.x と position.y を定義 PVector position; //ボールの速度変数のベクトル宣言 変数 velocitiy.x と velocitiy.y を定義 PVector velocitiy; void setup() { //初期設定 size(500,400); position = new PVector(width/2,height/2);//最初の位置(x,y) velocitiy = new PVector(180.0/60, 180.0/60);//速度(x,y)の定義 } void draw() { background(255);// フレーム毎に,再度白く塗り替えて描画を消す // 初速度による新しい位置の計算 position.add(velocitiy);//新しい位置=以前の位置+速度 // 新しい位置(x,y)が壁と接するかを判別 if ((position.x > width-10) || (position.x < 10)) { velocitiy.x = -1 * velocitiy.x; //位置が壁にぶつかると方向反転 } if ((position.y > height-10) || (position.y < 10)) { velocitiy.y = -1 *velocitiy.y; //位置が壁にぶつかると方向反転 } ellipse(position.x,position.y,20,20);//新しい位置のボールを描く //save("vector_ellipse03.jpg");// 実行結果を画像形式で保存 //saveFrame("vector_ellipse03-###.tif");// 連続画像で保存 }
      実行結果


    2. ボールの軌跡をグラデーションを付けて残す

      ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

      ソースファイル
      //等速直線運動のボールが壁にぶつかると反転する--ボールの軌跡を残す //ボールの位置変数のベクトル宣言 変数 position.x と position.y を定義 PVector position; //ボールの速度変数のベクトル宣言 変数 velocitiy.x と velocitiy.y を定義 PVector velocitiy; void setup() { //初期設定 size(500,400);background(255); position = new PVector(width/2,height/2);//最初の位置(x,y) velocitiy = new PVector(180.0/60, 180.0/60);//速度(x,y)の定義 } void draw() { // 初速度による新しい位置の計算 position.add(velocitiy);//新しい位置=以前の位置+速度 // 新しい位置(x,y)が壁と接するかを判別 if ((position.x > width-10) || (position.x < 10)) { velocitiy.x = -1 *velocitiy.x; //位置が壁にぶつかると方向反転 } if ((position.y > height-10) || (position.y < 10)) { velocitiy.y = -1 *velocitiy.y; //位置が壁にぶつかると方向反転 } //図形の軌跡をグラデーションで残す fill(255,20); noStroke(); rect(0,0,width,height);//塗りつぶし stroke(255,0,0); fill(255,0,0);//線色を赤・面色を赤 ellipse(position.x,position.y,20,20);//新しい位置のボールを描く //save("vector_ellipse04.jpg");// 実行結果を画像形式で保存 //saveFrame("vector_ellipse04-###.tif");// 連続画像で保存 }
      実行結果

[ 目次に戻る ]