質問編集履歴
1
図を追加し、わかりやすく文章を変更したつもりです。再度見ていただけますと幸いです。
test
CHANGED
File without changes
|
test
CHANGED
@@ -1,68 +1,50 @@
|
|
1
|
-
|
1
|
+
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-19/47b7801b-1a47-4c9e-8384-3d050940392a.jpeg)図のように、動きを実装したいと思っています。
|
2
2
|
|
3
|
-
そして
|
3
|
+
そして行いたいことは、
|
4
|
-
**「
|
4
|
+
**「通過点(mx,my)の座標を保存し、そこを軸に動くアニメーションです」**
|
5
5
|
です。
|
6
|
-
|
7
|
-
設定した値などは、以下のようになっており
|
8
|
-
直線の始まりの座標:(sx,sy)
|
9
|
-
直線の終わりの座標:(ex,ey)
|
10
|
-
描画する四角形の中心の座標を(x,y)
|
11
|
-
などがあり、(sx,sy)の値は変わらずで、(ex,ey)は変化していきます。
|
12
|
-
そして(ex,ey)から四角形を描画し、直線から一定の角度に沿って動かしたいと思っています。
|
13
|
-
|
14
|
-
そこで、まず、四角形を左の真横と左斜め上45度と左斜め下45度の3つに移動するように
|
15
|
-
```Processing
|
16
|
-
s=30(仮)
|
17
|
-
rect(ex-t,ey,s,s);
|
18
|
-
rect(ex-t,ey-t,s,s);
|
19
|
-
rect(ex-t,ey+t,s,s);
|
20
|
-
t=t+30(仮)
|
21
|
-
```
|
22
|
-
としました。
|
23
|
-
|
24
|
-
これを直線の角度に回転させれば、直線から45度の角度で動かすことができると考え、
|
25
|
-
```Processing
|
26
|
-
PVector v;
|
27
|
-
float rad;
|
28
|
-
v = (new PVector(end_x-start_x,end_y-start_y)).normalize();
|
29
|
-
rad =v.heading();
|
30
|
-
```
|
31
|
-
これにより、直線の角度がわかったので、
|
32
|
-
```Procesiing
|
33
|
-
translate(ex,ey);
|
34
|
-
rotate(rad);
|
35
|
-
```
|
36
|
-
|
37
|
-
をrectの前におき、rect(-t,0,s,s)などすることで、直線から一定の角度で図形を動かすことはできました。
|
38
|
-
|
39
|
-
これを実行したところ、
|
40
|
-
(ex,ey)は常に変化するので、この座標についていく感じで図形が動くようになりました。
|
41
|
-
|
42
|
-
私が実装したいのは、描画を始めたときの(ex,ey)を保存し、そこから30ずつ(仮)線に沿って動いていくようにしたいです。
|
43
6
|
|
44
7
|
そこで、
|
45
8
|
```Processing
|
9
|
+
v = (new PVector(end_x-start_x,end_y-start_y)).normalize();
|
46
|
-
in
|
10
|
+
rad =v.heading();
|
11
|
+
|
12
|
+
if((video.duration()/5) < time && time < (video.duration()*3/5)){
|
47
13
|
if(i==1){
|
48
14
|
mx=ex;
|
49
15
|
my=ey;
|
50
16
|
i++;
|
51
17
|
}
|
52
|
-
pushMatrix();
|
18
|
+
pushMatrix();
|
53
|
-
translate(mx,my);
|
19
|
+
translate(mx,my);
|
54
|
-
rotate(rad);
|
20
|
+
rotate(rad);
|
55
|
-
rect(-t,0,30,30);
|
21
|
+
rect(-t,0,30,30);
|
56
|
-
rect(-t,-t,30,30);
|
22
|
+
rect(-t,-t,30,30);
|
57
|
-
rect(-t,-t,30,30);
|
23
|
+
rect(-t,-t,30,30);
|
58
|
-
t=t+30
|
24
|
+
t=t+30
|
59
|
-
popMatrix();
|
25
|
+
popMatrix();
|
26
|
+
}
|
27
|
+
|
28
|
+
if((video.duration()*2/5) < time && time < (video.duration()*4/5)){
|
29
|
+
if(i2==1){
|
30
|
+
mx2=ex;
|
31
|
+
my2=ey;
|
32
|
+
i2++;
|
33
|
+
}
|
34
|
+
pushMatrix();
|
35
|
+
translate(mx2,my2);
|
36
|
+
rotate(rad);
|
37
|
+
rect(-t,0,30,30);
|
38
|
+
rect(-t,-t,30,30);
|
39
|
+
rect(-t,-t,30,30);
|
40
|
+
t=t+30
|
41
|
+
popMatrix();
|
42
|
+
}
|
60
43
|
```
|
61
44
|
|
62
|
-
|
63
|
-
などとすることにより、できるかと思ったのですが、図形が写ることなく、うまくいきませんでした。
|
64
|
-
|
45
|
+
draw関数の一部です。
|
65
|
-
|
46
|
+
これで図形がうまく思うところに描画されないのは、ifの時間の範囲が被っているために、
|
66
|
-
わか
|
47
|
+
translateで原点が(mx,my)の時に次の(mx2,my2)に(ex,ey)が代入されるなどして、座標の位置関係がよくわからないことになってしまっているのでしょうか。
|
67
48
|
|
68
49
|
|
50
|
+
|