斜めに傾けた要素を綺麗に無限ループさせたい

Question

いつもお世話になっています。

回転させた要素を斜めに移動させたく、以下の計算式を使用することで上手くいきました。

 x += Math.cos(deg * Math.PI / 180) * 5;
 y += Math.sin(deg * Math.PI / 180) * 5;

移動させる要素がある程度進んだところで、位置を初期の方に戻し無限ループしているような表現をしたいのですが、単純に初期値を入れるだけでは切り替わりの際にガクッとズレてしまいました。

どのようにしたら綺麗につながって、ループしているように見えますでしょうか。

補足

• 要素は横長の画像です。
• 画像を一つclone()して前方に横並びとして繋げています
• 横スライダーの斜めバージョンのようなイメージです

アドバイスの程よろしくお願いいたします。

補足2

言葉では上手く説明できないと思うので、やりたいことを具体的にコードにしてみました。
https://jsbin.com/wosivi/

Answer 1

「要素を A の位置から少しずつずらして行って B の位置まで行ったら、また A に戻す」のを
繰り返し、B から A に戻す時ガクッとしないで滑らかに見せたいということでしょうか。

滑らかに見せるには、B から A の移動を一気にしないで、逆方向に動かせばよいと思います。
+= を -= にすれば、逆方向に移動します。 * 5 の係数を大きくすれば、移動速度を速くできます。
例えば
x -= Math.cos(deg * Math.PI / 180) * 50;
とすれば、A → B の10倍の速さで B → A に移動します。

Comments

[t-book]

ありがとうございます！
ちょっと言葉では上手く説明できませんでしたので、補足を追加してみました。
お手数ですが確認いただけますと幸いです！

[mie]

すっかり勘違いしていました。ごめんなさい。

rossi46hiroさんも書いていらっしゃるように、-100という境界値が正しくないためです。
abcdefgabcdefg を画像と考えると
abcdefgabcdefg
abcdefgabcdefg
abcdefgabcdefg とずらして行って
abcdefgabcdefg まで来たら次は初期位置に戻す ★
abcdefgabcdefg
ということですよね。この時の★の位置（x=-100）が正しくないと思います。
斜めになっていることを考慮して
境界値の値を定数 limit = -itemWidth / 2 * Math.cos(deg * Math.PI / 180 ) として
if ( x > limit )
にするのが正しいと思います。

「変数を使って汎用性を持たせること」はよいことです。
－100とか ＊3 とか、実際の数値や文字列などをプログラムの中に書いてしまうのは
ハードコーディングと言って（数値の場合はマジックナンバーとも言います）
コーディングのお作法として”やってはいけないこと”の１つです。

[mie]

スペース入れたのに、ずれていませんでした

abcdefgabcdefg を画像と考えると
. abcdefgabcdefg
. . abcdefgabcdefg
. . . abcdefgabcdefg とずらして行って（. は無視してください）
. . . . . . . abcdefgabcdefg まで来たら次は初期位置に戻す ★
abcdefgabcdefg

[t-book]

ありがとうございます！
そうです！境界値を算出する方法が知りたかったのでした！
境界値を少しずつ調整していけばそのうちある程度自然なループができたので、どうやってその値を出したらよいものか、と思っていました

ですがすみません、ご提示いただきました式を当てはめてみても、やはりガクッとなってしまうようです・・・。何か根本的に間違っているのでしょうか。

重ね重ねお手数をお掛けしますが、どうぞよろしくお願いいたします。

↓コード直してみました。
https://jsbin.com/wosivi/

[mie]

ちょっと間違っていました。
× 境界値の値を定数 limit = -itemWidth / 2 * Math.cos(deg * Math.PI / 180 ) として

ではなくて、初期位置からの移動距離が
itemWidth / 2 * Math.cos(deg * Math.PI / 180 )
となる点が境界値のはずです。
画像が傾いていないのであれば、画像の横幅の半分 itemWidth / 2 ですが
傾いているのでその分の係数 Math.cos(deg * Math.PI / 180 ) を掛けます。
初期位置から ↑ の距離移動した点
limit = 初期値 + itemWidth / 2 * Math.cos(deg * Math.PI / 180 )
が境界値です。
これでダメだったら、境界値以外の別の問題になってしまいます。

三角関数の基本なので、図を書いて考えてみるとわかりやすいと思います。

[t-book]

うーん、思うようにいきません。おっしゃるとおり境界値以外の画像の切れ目とかせいかもしれません。もう少し自分なりに試してみます。

長々とお付き合いいただきありがとうございました！

Answer 2

回転とか斜めとかちょっと？？？状態ですが、スライダーのようなものを画像でやる場合は、スライダー幅分画像が重複している必要がありますよ。

Comments

[t-book]

ありがとうございます！
ちょっと言葉では上手く説明できませんでしたので、補足を追加してみました。
お手数ですが確認いただけますと幸いです！

[rossi46hiro]

loop()のif( x > -100 )をif( x > -65 )でガクッとならないかと思います。
ただこれだと画像の幅が足りないので、足らない分の画像を追加、その際、$target.width(itemWidth * 2)などはそのままで
これでいけると思いますがいかがでしょうか？

[t-book]

ありがとうございます！
すみません。。2つほど質問よろしいでしょうか。

1. 足らない分の画像を追加とは、具体的にどこにどのような処理を行えばよろしいのでしょうか。。

2. x > -65の値ですが、こちら変数を使って汎用性を持たせることは可能でしょうか。
回転する角度や始まる位置を柔軟に変えたい、との意図がございます。

説明・理解力が足りずに申し訳ありません。
よろしくお願いします。