Processing 直線に沿って四角形を動かす

Question

Processingでシェイプアニメーションを制作しています。

直線の終点：（e_x,e_y）
直線の始点：（s_x,s_y）
四角形の中心点（ｘ，ｙ）
四角形の動くスピードを10px位として、

直線に沿った四角形のシェイプアニメーション的なのを作りたいです。
Rect（ｘ＋ｚ、ｙ＋ｚ）；
ｚ＝ｚ＋１０；
とすると斜め45度に１０ずつ（厳密にいうと10×√３ですが）動くことは理解しています。

発生している問題・エラーメッセージ

該当のソースコード

Processing

試したこと

傾きを
float slope_x,slope_y;と定義して
始点と終点の差が0～200くらいをとりえるので、map関数を使うために新たに
float ms_x,ms_y;（mapslope略してms)を定義し

slope_x = e_x-s_x;
slope_y = e_y-s_y;

ms_x = map(slope_x,0,200,1,3);
ms_y = map(slope_y,0,200,1,3);

とし
Rect(x+zms_x,y+zms_y);
z=z+10;

このように組んでみたりしたのですが、増加する値が大きすぎて、すぐ飛んで行ってしまいます。
明らかにこれではうまくいかないのはわかっているのですが、
どう組めばいいかわかりません。
宜しくお願い致します。

補足情報（FW/ツールのバージョンなど）

Processing 3.5.4

Answer 1

mapとかなんで出てくるかしら...難しく考えてごちゃごちゃになっていませんか?

始点(s_x,s_y)終点(e_x,e_y)とすれば方向ベクトル(e_x-s_x,e_y-s_y)
距離は √((e_x-s_x)^2+(e_y-s_y)^2)、これはProcessingでdistという関数が用意されているのでdist(s_x,s_y,e_x,e_y)で求まります。
なので、方向ベクトルの単位ベクトル(長さ1のベクトル)は( (e_x-s_x)/d, e_y-s_y/d)

だけど、Processingで単位ベクトルを求める機能が用意されているからそれを使えば
PVector v;
v=(new PVector(e_x-s_x,e_y-s_y)).normalize();

四角形の座標を中心指定なら
rectMode(CENTER);
としておいて、

あとは、方向の単位ベクトルに距離を掛けて始点に足せばいいのだから
float t; //ちょっとzは違う気がする。媒介変数的なのでtにする
としておいて
rect(s_x+v.x*t, s_y+v.y*t,50,50);
t+=10;
を繰り返せばいいんじゃないですか?

10px/frameだと、200pxは20frame、Processingのデフォルトが60frame/secで1秒足らずで結構速いけど...

Comments

[_jii_]

初心者に丁寧な説明ありがとうございますm(__)m
できるようになりました！本当にありがとうございます。