こんにちは、コンスキです。
マウスカーソルの軌跡を保存しておきたい時ってありますよね。
そこで、今回はマウスカーソルの軌跡を保存しておく方法をご紹介します。
完成形
次のような感じでマウスの軌跡を保存しておくことができます。
上の動画では次のようなことをやっています。
- マウスでクリックしながら動かしてから離す(マウスの軌跡を記録)
- ウィンドウの右下30×30ピクセルの部分をクリックする(記録完了)
- 記録したマウスの軌跡が描画される
マウスの軌跡を保存して表示するスクリプト
先ほどの動画のようなことを実現するスクリプトはこちらです▼
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つでセットの値を入れておきたい時に便利だと思います。
コメント