【Processing】マウスカーソルの軌跡(座標)を保存しておく方法

プログラミング

こんにちは、コンスキです。

マウスカーソルの軌跡を保存しておきたい時ってありますよね。

そこで、今回はマウスカーソルの軌跡を保存しておく方法をご紹介します。

完成形

次のような感じでマウスの軌跡を保存しておくことができます。

上の動画では次のようなことをやっています。

  1. マウスでクリックしながら動かしてから離す(マウスの軌跡を記録)
  2. ウィンドウの右下30×30ピクセルの部分をクリックする(記録完了)
  3. 記録したマウスの軌跡が描画される

マウスの軌跡を保存して表示するスクリプト

先ほどの動画のようなことを実現するスクリプトはこちらです▼

ArrayList<PVector>  savedPos = new ArrayList<PVector>();
Boolean flag = false;
int frameCount2; //マウスの動きの記録が完了したフレーム
//--------------------- Ballクラスの定義 --------------------------
class Ball {
  ArrayList<PVector> pos;
  Ball() {
  }
  Ball (ArrayList<PVector> savedPos) {
    this.pos = savedPos; 
  }
  void drawBall(float X, float Y) {
    circle(X, Y, 10);  //ここで画像を表示すれば画像を動かせます
  }
}
//--------------------- Ballクラスの定義 --------------------------
Ball ball;

void settings() {
  size(500, 500);
}
void setup() {
  noStroke();
  fill(0);
  frameRate(60);
  ball = new Ball();
}
void draw() {
  if(mousePressed) {    
    savedPos.add(new PVector(mouseX, mouseY)); //マウスカーソルの座標を追加する
  }
  if(flag) {
    if((frameCount-frameCount2)+1<ball.pos.size()) { //(frameCount-frameCount2)+1の「+1」は記録を完了するためにクリックの時座標を表示しないため
      ball.drawBall(ball.pos.get((frameCount-frameCount2)-1).x, ball.pos.get((frameCount - frameCount2)-1).y);
    }
  }
}

void mousePressed() {
  if(mouseX>width-31&&mouseY>height-31) {  //右下30ピクセル×30ピクセルの部分をクリックしたら
    flag = true;
    ball = new Ball(savedPos);
    frameCount2 = frameCount;  //描画
  }
}

PVectorクラスについて

マウスカーソルの座標を記録しておくために、PVectorというクラスを使っています。

PVector 変数名 = new PVector(1, 2)

上のように書いておくと

「変数名.x」で1が取得でききます。

同じように、「変数名.y」で2が取得できます。

座標のような2つや3つでセットの値を入れておきたい時に便利だと思います。

コメント

タイトルとURLをコピーしました