0から1へ加算と減算

Question

すいません、タイトルがわかりづらいのですが、

animate();
function animate() {
  requestAnimationFrame( animate );
  render();
}
function render() {
  var time = Date.now() * 0.00005;
  var s = ( 360 * ( 1.0 + time ) % 360 ) / 360;
  console.log(s);
}

上記のような感じのコードで、
出力すると

0
0.1111
0.2222
.
.
.
0.9999

（数値ダミーです）
のように1へ向けて加算されていき、
最後はまた0に戻るのですが、
これを

0
0.555
0.999
0.555
0

といきなり0に戻らずに1に近づいたら今度は
0に向けて減算していってほしいのですが、（数値の反転を行いたい）
おそらくsin,cosとか使うのかとおもうのですが、
どのように記述したらよいでしょうか？

Comments

[Udomomo]

このコードだけでは、値が一つ出力されただけで終わってしまい、繰り返し出力されるロジックがわかりません。コードを全て載せていただけますか？

[x_x]

確かにsinはそのような感じになりますが、日時は関係あるのでしょうか？

[cheche0830]

ちゃんと動作するように調整させていただきました！すいません、なぜ日時を使うのかは私もわかっておりません・・・参考例から引用したものになります。。

[kszk311]

sin, cos使わなくてもできることは出来るのですが、どういうロジックにしたいのでしょうか。とりあえず0と1の反復ができれば良いですか？

[cheche0830]

はい！0から1を往復できればなんでも大丈夫です！！

[oikashinoa]

ある数値が、一定の幅内で、ある規則をもって変化する。あるタイミングで値を参照したら、規則に従った結果の値を取得したい、ということですか？requestAnimationFrameを使う必要は無いで良いですか？

[cheche0830]

ご回答ありがとうございました。いただいた回答で無事動きました。

Answer 1

render関数の1行目のvar time = Date.now() * 0.00005;ですが、
requestAnimationFrameの思想からすると若干なめらか度が落ちるかと思います。

requestAnimationFrameは次の実行タイミングで実行されるanimateには第一引数に現在時刻が格納されます。
これを元にtime変数を生成すればより滑らかな数字が作れるはずです。

おそらくsin,cosとか使うのかとおもうのですが

sinやcosは「sin グラフ」などで画像検索すれば分かるように、
-1から+1を滑らかに周回する起動をたどります。
これを0〜1に変換したければ、sinやcosで評価後に+1を行い0〜2にし、これを1/2する事で求められます。
function (it) { return (sin(x) + 1) / 2; }

Math.sinはMath.PI/2 を渡した場合、このメソッドは、1 を返します。とあるように、
円の直径3.1415...という数字を投げ込んで初めて180%の0が帰ってきます。
そして360%には更に倍の6.28...を投げ込む必要があります。

例えば2秒で1周させたければ、タイムスタンプから現在時刻(多分ms)を取り出した後、
Math.sin(now / 1000 * Math.PI)を実行することで求められそうです。
以上をコード化すると、以下のような実装になりそうです。

function sin (now) {
  return Math.sin(now / 1000 * math.PI);
}
function position (now) {
  return (sin(now) + 1) / 2;
}

上手く動くかどうかは未保証ですので、これを参考に色々数値をいじったりしてみて下さい。

Comments

[cheche0830]

ありがとうございます！sinは-1から1の範囲の場合に使うものなんですね。
誤解してました！また細かくご解説もありがとうございました！

Answer 2

投げやりな気もしますが、とりあえず0と1の反復だけでいいなら、time使わずともシンプルにこんな感じでいけますよ。
0.1で計算したら0.899999....とか出たので、0-10の範囲で計算して、console.log時に10で割ってます。

var max = 10;
var min = 0;
var now = 0;
var d = 1;

animate();
function animate() {
  requestAnimationFrame( animate );
  render();
}
function render() {
  console.log(now / 10);
  if(now + d < min || max < now + d){
    d *= -1;
  }
  now += d;
}

Comments

[cheche0830]

ありがとうございます！！試してみます！！！

[cheche0830]

無事出来ました！ありがとうございます！