Increase and decrease a variable until a number is reached in Javascript

Question

How can I increase and decrease a variable in Javascript until 100 and when 100 is reached it should start decreasing.

So accuracyBarValue should start in 0, increase to 100, and when 100 is reached it should go to 0, and then repeat procedure.

This in intervals of 10.

I use this in a very simple JS game, where this value is used to increase and decrease a PowerBar.

Solution 1

Here is another take on this:

var up = true;
var value = 0;
var increment = 10;
var ceiling = 100;

function PerformCalc() {
  if (up == true && value <= ceiling) {
    value += increment

    if (value == ceiling) {
      up = false;
    }
  } else {
      up = false
      value -= increment;

      if (value == 0) {
        up = true;
      }
  }

  document.getElementById('counter').innerHTML = 'Value: ' + value + '<br />';
}
setInterval(PerformCalc, 1000);

<div id="counter"></div>

Solution 2

for (var i=0;i<100;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
while (i>0)
{
    i -= 10;
    document.write("The number is " + i);
    document.write("<br />");
}

You can test and modify it here.

Solution 3

Code

let i = 100;
setInterval(() => {
  console.log(Math.abs((i+=10)%200 - 100))
}, 1000);

Deconstruction

1. i+=10 → i gets indefinitely increased by 10 on every tick
2. %100 → modulo of double the max value (division remaining ex. 10 % 6 = 4)
3. - 100 → remove the range (so the numbers will always be between 100 and -100, otherwise it would be between 0 and 6)
4. Math.abs() → removes the - (Makes sure the number moves from 0 to 100 and back)

Steps Visualized

i++

∞       .
       .
      .
     /
    /
   / 
  /
0

(i+=10)%200

200 
     /    /    /    .
    /    /    /    .
   /    /    /    .
  /    /    /    /
 /    /    /    /
0

i++%200-100

100 
  \        /\        /\
   \      /  \      /  \
0   \    /    \    /    .
     \  /      \  /      .
      \/        \/        .
-100

Math.abs(i++%200-100)

100 
  \    /\    /.
   \  /  \  /  .
    \/    \/    .
0

Implementation Example

const max = 10;

let i = max;
const $body = document.querySelector('body');

setInterval(() => {
  const val = Math.abs(i++%(max * 2) - max);
  const $el = document.createElement('i');
  $el.style = `--i: ${i}; --val: ${val}`;
  $body.appendChild($el);
  window.scrollTo(window.innerWidth, 0);
  console.log(val);

}, 200);

i {
  --i: 0;
  --val: 0;
  --size: 10px;
  
  position: absolute;
  background: black;
  width: var(--size);
  height: var(--size); 
  top: var(--size);
  left: calc(-10 * var(--size));
  transform: translate(
    calc(var(--i) * var(--size)),
    calc(var(--val) * var(--size))
  )
}

Alternative Approaches (Float based)

Math.acos(Math.cos(i * Math.PI)) / Math.PI;

or

Math.abs(i - Math.floor(i) - .5);

Where i is a float between 0 - Infinity. Result is a float as well that needs to be multiplied by your max and rounded (target value).

Comments

[David Hobs]

If your incrementing by 10 as well, in the for loop it should be: i+=10 as in: for(var i=0;i<100;i+=10)

[David Hobs]

Well, that's incrementing by 1. Instead of i++, it should be i+=10;

[Alex]

Based on your answer, I made my addapted solution just working for integer values: jsfiddle.net/eLynvxt3/9 Thank you

[pbarney]

This is really useful. I've been scouring the web for these formulas and it's almost impossible to come up with a search phrase to get here. Thanks for taking the time to post this stuff.

[Katya Appazova]

@pbarney let me know what you searched for, so I can modify the answer a bit

[pbarney]

It's hard for me to say because I used startpage to search and it does a POST instead of a GET, so my history doesn't show what I searched for. Probably something like "formula to increment a number until it reaches a certain limit and then restart." Very kludgy. I think later I looked for "increment loops" or something like that that led me here.