画像を順番に取り出す

Question

前提・実現したいこと

let number = 0;
const images = ["img01","img02","img03","img04","img05"];

このように画像が入った配列imagesがありまして,
numberの数字を増やしていった時に順番に画像を取り出したいです。

試したこと

images[number % images.length]

これで出来たと思いましたが、これだと

img01→img02→img03→img04→img05→img01→img02,→...

となります。
そうではなくて、

img01→img02→img03→img04→img05→img04→img03,→...

としたいです。
img05まで行ったあと、img01に戻るのではなくimg04に戻りたいです。

あとnumberが-1,-2,...になった時もimg02,img03と順番に出したいです。

つまり

number     -2      -1      0        1     (略)     4       5       6
images    img03  img02   img01    img02   (略)   img05   img04   img03

こんな感じにしたいのです。
どなたかご教授お願いいたします。

補足

説明が難しいので、ここにコードを上げてみました。

https://jsfiddle.net/gyot3ce2/

Comments

[skys215]

numbersがプラスの時は4->5->4と戻るけど、マイナスの場合はどうですか？
0->-1->-2->-3->-4->-5
img01->img05>img04->img03->img02->img01->?そのあとはimg05ですか？それともimg02ですか？

[donkuri]

ありがとうございます。
説明が下手ですみません。

0->-1->-2->-3->-4->-5->-6->-7->-8->-9->-10...
img01->img05>img04->img03->img02->img01->img05>img04->img03->img02->img01->...
こうしたいです。

[donkuri]

あ　すみませんちょっと考え直します

[donkuri]

申し訳ありません。
私が考え違いをしていまして、
0->-1->-2->-3->-4->-5
img01->img02>img03->img04->img05->img04->...
こうなるのが正しい形でした。
質問文を訂正しておきます。

Answer 1

ボールドテキスト命題が合理的ではありません
1→2→3→4→5→4→3・・・となるなら
遡る方も
1←5←4←3ではなく
1←2←3←4←5←4←3となるべきです

sample

こんな感じでどうでしょう？

<textarea cols=40 rows=10></textarea>
<script>
const images = ["img01","img02","img03","img04","img05"];
const len=images.length;
const getIndex=number=>{
  let idx=Math.abs(number)%((len-1)*2);
  if(idx>=len) idx=(len-1)*2-idx;
  return idx;
}
for(let number=-30;number<30;number++){//numberを適当な範囲で変更
  document.querySelector('textarea').value+=images[getIndex(number)];
}
</script>

表にするとこうです

number	Math.abs(number)	Math.abs(number)%((len-1)*2)	idx>=len	(len-1)*2-idx;
-10	10	2
-9	9	1
-8	8	0
-7	7	7	true	1
-6	6	6	true	2
-5	5	5	true	3
-4	4	4
-3	3	3
-2	2	2
-1	1	1
0	0	0
1	1	1
2	2	2
3	3	3
4	4	4
5	5	5	true	3
6	6	6	true	2
7	7	7	true	1
8	8	0
9	9	1
10	1	2

Comments

[donkuri]

なるほど
確かにそうですね。
すみませんちょっと考え直します

[donkuri]

すみません。
やはりマイナスの時の動きが反対でした・

質問文を修正しました。

[yambejp]

追記しておきました

[donkuri]

ありがとうございます！

すみません
Math.abs()は絶対値を取ってるのは分かったのですが、
%((len-1)*2　ここは何をしているのでしょうか。。
%len ならわかるのですが、なぜ-1して*2をするのでしょうか・・

[yambejp]

たとえばデータ数が5個あるなら
0→1→2→3→4→3→2→1(→0→1→・・・)
という周期ができます。
要素数は(len-1)*2になります。

要素数＝2:0→1 周期:2
要素数＝3:0→1→2→1 周期:4
要素数＝4:0→1→2→3→2→1 周期:6

その他計算の意味は表にしてあるので参考にしてください

[donkuri]

表を書いて頂いてなんとなく分かってきた気がします。
周期も考えて場合分けしないといけないんですね。

難しいですがもう少し考えればなんとか理解できそうです。
ありがとうございました！

Answer 2

yambejpさんのご回答にもあるように、正負で非対称なので条件式が含まれることになりそうです。

let number = -10;
const images = ["img01", "img02", "img03", "img04", "img05"];
while (number < 20) console.log(number,
    (number < 0) ?
        images[Math.abs(Math.abs(number++ + 1) % ((images.length - 1) * 2) - (images.length - 1))] :
        images[Math.abs((number++ + images.length - 1) % ((images.length - 1) * 2) - (images.length - 1))]
)

/*
-10 img04 
-9 img05 
-8 img04 
-7 img03 
-6 img02 
-5 img01 
-4 img02 
-3 img03 
-2 img04 
-1 img05 
0 img01 
1 img02 
2 img03 
3 img04 
4 img05 
5 img04 
6 img03 
7 img02 
8 img01 
9 img02 
10 img03 
11 img04 
12 img05 
13 img04 
14 img03 
15 img02 
16 img01 
17 img02 
18 img03 
19 img04 

*/

---

追記

Math.sign を使って条件式を外してみましたが、かなり読みにくいコードになりました。

while (number < 20)
    console.log(number,
        images[Math.abs((Math.abs(number + images.length * Math.sign(Math.sign(++number))) - 1) % ((images.length - 1) * 2) - (images.length - 1))],
    );

---

質問の変更に合わせて追記

let number = -10;
const images = ["img01", "img02", "img03", "img04", "img05"];
while (number < 20)
    console.log(number,
        images[Math.abs((Math.abs(number++) + images.length - 1) % ((images.length - 1) * 2) - (images.length - 1))],
    );

Comments

[donkuri]

ありがとうございます！

せっかく作っていただいたのですが、
すみませんちょっと私が考え違いしていたかもしれません。
ちょっと考え直します

[donkuri]

せっかく回答して頂いたのに申し訳ありません。
私の質問文のマイナスの時の順番が反対でした。

質問文を修正しました。

[donkuri]

ありがとうございました！

計算式が難しくて理解が追いつきませんが、頂いた回答で色々考えてみます！