Gradually ramp up a parameter

Question

Gradually ramp up a parameter

I'm working on a game concept where players can earn money steadily over time (e.g. $50 per second). However, I don't want the money to increase in jumps of $50 every second; instead, I want it to smoothly increase.

setInterval(increaseMoney, 1000);
function increaseMoney() {
  money = money + moneyPerSecond;
}

My current approach involves dividing the earning rate into two categories: one earns $1 every 1/moneyPerSecond seconds (where moneyPerSecond < 1000), and the other category earns y dollars every 0.001 seconds.

However, there are two challenges: I initially avoided floats to maintain precision, but now I realize that using integers may cause imprecision issues. Edit: It's okay to use floats! I could also enhance precision by increasing the time interval between updates, even though this might make the increments less smooth.

My questions:

Am I on the right path with this approach?
How can I implement the solution effectively to minimize imprecision?

Requirements: Floats are acceptable, and accuracy is crucial for the implementation.

javascript

Answer 1

Answer №1

1. simple game loop

Experience a basic game loop structure with a start function for initializing the game and an update function that runs every frame. Modify the target value in real-time to witness the smooth transition using lerp -

let money;
let target;

// initialization
function start ()
{ money = document.forms.example.money
  target = document.forms.example.target
}

// frame by frame process
function update (delta)
{ const next = lerp(Number(money.value), Number(target.value), delta/1e2)
  money.value = next.toFixed(2)
}

// helper functions
function lerp (v0, v1, t, p = 1e-3)
{ const next = (1 - t) * v0 + t * v1
  if (Math.abs(v1 - next) < p)
    return v1
  else
    return next
}

function sleep (ms)
{ return new Promise(r => setTimeout(r, ms)) }

function time ()
{ let now = Date.now()
  let last
  return _ =>
  { last = now
    now = Date.now()
    return now - last
  }
}

async function loop ()
{ const deltaTime = time()
  await start()               // call `start` to initialize
  while (true)
  { await update(deltaTime()) // call `update` each frame
    await sleep(50)
  }
}

// running the game
loop()

<form id="example">
  target: <input type="number" name="target" value="3000">
  &larr; try a big value like <b>99999999</b><br>
  money: <output name="money">0.00</output><br>
</form>

2. plain html form

If you prefer to see this concept outside of a traditional game loop scenario, we can illustrate it through a simple Html form. The implementation of lerp here (similar to above) is inspired by Wikipedia's Linear Interpolation article -

function lerp (v0, v1, t, p = 1e-3)
{ const next = (1 - t) * v0 + t * v1
  if (Math.abs(v1 - next) < p)
    return v1
  else
    return next
}

function sleep (ms)
{ return new Promise(r => setTimeout(r, ms)) }

async function onSubmit (event)
{ // preventing default form behavior
  event.preventDefault()

  // retrieving input values from form as Numbers
  const f = event.target
  let from = Number(f.from.value)
  let to = Number(f.to.value)

  // execute lerp operation!
  do
  { f.output.value = from.toFixed(2)
    from = lerp(from, to, 0.33)
    await sleep(50)
  } while(from < to)
}

// adding form listener
document.forms.example.addEventListener("submit", onSubmit)

<form id="example">
  from: <input name="from" value="100"><br>
  to: <input name="to" value="3000"><br>
  output: <output name="output"></output><br>
  <button type="submit">Lerp it!</button>
</form>

3. basic html form with generator

We can also streamline the onSubmit listener by implementing lerp as a generator, reducing complexity significantly -

function* lerp (v0, v1, t, p = 1e-3)
{ do
  { yield v0
    v0 = (1 - t) * v0 + t * v1
  } while (Math.abs(v1 - v0) > p)
  yield v1
}

function sleep (ms)
{ return new Promise(r => setTimeout(r, ms)) }

async function onSubmit (event)
{ event.preventDefault()
  const f = event.target

  // iterating over lerp generator
  for (const v of lerp(Number(f.from.value), Number(f.to.value), 0.33))
  { f.output.value = v.toFixed(2)
    await sleep(50)
  }
}

document.forms.example.addEventListener("submit", onSubmit)

<form id="example">
  from: <input name="from" value="123.45"><br>
  to: <input name="to" value="3000.99"><br>
  output: <output name="output"></output><br>
  <button type="submit">Lerp it!</button>
</form>

Answer 2

1. simple game loop

Experience a basic game loop structure with a start function for initializing the game and an update function that runs every frame. Modify the target value in real-time to witness the smooth transition using lerp -

let money;
let target;

// initialization
function start ()
{ money = document.forms.example.money
  target = document.forms.example.target
}

// frame by frame process
function update (delta)
{ const next = lerp(Number(money.value), Number(target.value), delta/1e2)
  money.value = next.toFixed(2)
}

// helper functions
function lerp (v0, v1, t, p = 1e-3)
{ const next = (1 - t) * v0 + t * v1
  if (Math.abs(v1 - next) < p)
    return v1
  else
    return next
}

function sleep (ms)
{ return new Promise(r => setTimeout(r, ms)) }

function time ()
{ let now = Date.now()
  let last
  return _ =>
  { last = now
    now = Date.now()
    return now - last
  }
}

async function loop ()
{ const deltaTime = time()
  await start()               // call `start` to initialize
  while (true)
  { await update(deltaTime()) // call `update` each frame
    await sleep(50)
  }
}

// running the game
loop()

<form id="example">
  target: <input type="number" name="target" value="3000">
  &larr; try a big value like <b>99999999</b><br>
  money: <output name="money">0.00</output><br>
</form>

2. plain html form

If you prefer to see this concept outside of a traditional game loop scenario, we can illustrate it through a simple Html form. The implementation of lerp here (similar to above) is inspired by Wikipedia's Linear Interpolation article -

function lerp (v0, v1, t, p = 1e-3)
{ const next = (1 - t) * v0 + t * v1
  if (Math.abs(v1 - next) < p)
    return v1
  else
    return next
}

function sleep (ms)
{ return new Promise(r => setTimeout(r, ms)) }

async function onSubmit (event)
{ // preventing default form behavior
  event.preventDefault()

  // retrieving input values from form as Numbers
  const f = event.target
  let from = Number(f.from.value)
  let to = Number(f.to.value)

  // execute lerp operation!
  do
  { f.output.value = from.toFixed(2)
    from = lerp(from, to, 0.33)
    await sleep(50)
  } while(from < to)
}

// adding form listener
document.forms.example.addEventListener("submit", onSubmit)

<form id="example">
  from: <input name="from" value="100"><br>
  to: <input name="to" value="3000"><br>
  output: <output name="output"></output><br>
  <button type="submit">Lerp it!</button>
</form>

3. basic html form with generator

We can also streamline the onSubmit listener by implementing lerp as a generator, reducing complexity significantly -

function* lerp (v0, v1, t, p = 1e-3)
{ do
  { yield v0
    v0 = (1 - t) * v0 + t * v1
  } while (Math.abs(v1 - v0) > p)
  yield v1
}

function sleep (ms)
{ return new Promise(r => setTimeout(r, ms)) }

async function onSubmit (event)
{ event.preventDefault()
  const f = event.target

  // iterating over lerp generator
  for (const v of lerp(Number(f.from.value), Number(f.to.value), 0.33))
  { f.output.value = v.toFixed(2)
    await sleep(50)
  }
}

document.forms.example.addEventListener("submit", onSubmit)

<form id="example">
  from: <input name="from" value="123.45"><br>
  to: <input name="to" value="3000.99"><br>
  output: <output name="output"></output><br>
  <button type="submit">Lerp it!</button>
</form>

Answer 3

Answer №2

To efficiently handle decimals in your code, it's recommended to internally track them and only display whole numbers to users without showing the decimals. Utilize the floor() function to achieve this.

While this might be considered excessive for your specific needs, below is a demonstration of how I manage multiple calculations and present whole numbers to the user.

class TimerCalc {
  constructor(incAmt, interval, updater) {
    this.incAmt = incAmt;
    this.interval = interval;
    this.updater = updater;
    this.lastTimeRun = performance.now();
    this.calc();
  }
  calc() {
    const diff = performance.now() - this.lastTimeRun;
    this.lastTimeRun = performance.now();

    const incAmt = diff / this.interval * this.incAmt;
    this.updater(incAmt);

    this.timer = window.setTimeout(() => this.calc(), 10);
  }
  kill() {
    this.timer && window.clearTimeout(this.timer);
  }
}

class Bank {
  constructor(initialAmount, outputSelector) {
    this.funds = initialAmount || 0;
    this.outputElem = document.querySelector(outputSelector);
    this.timers = {};
  }
  updateAccount(diff) {
    this.funds += diff;
    this.updateScreen();
  }
  updateScreen() {
    this.outputElem.textContent = Math.floor(this.funds).toLocaleString();
  }
  addResource(name, rate, interval) {
    this.timers[name] = new TimerCalc(rate, interval, this.updateAccount.bind(this));
  }
}

const myBank1 = new Bank(0, '#out1');
myBank1.addResource("fast", 1, 1000);

const myBank2 = new Bank(0, '#out2');
myBank2.addResource("slow", 1, 10000);

const myBank3 = new Bank(0, '#out3');
myBank3.addResource("mine1", 1, 10);
myBank3.addResource("worker1", -1.50, 1000);
myBank3.addResource("worker2", -2.50, 1000);
myBank3.addResource("manager", -5.50, 1000);

<div id="out1"></div>
<div id="out2"></div>
<div id="out3"></div>

Answer 4

To efficiently handle decimals in your code, it's recommended to internally track them and only display whole numbers to users without showing the decimals. Utilize the floor() function to achieve this.

While this might be considered excessive for your specific needs, below is a demonstration of how I manage multiple calculations and present whole numbers to the user.

class TimerCalc {
  constructor(incAmt, interval, updater) {
    this.incAmt = incAmt;
    this.interval = interval;
    this.updater = updater;
    this.lastTimeRun = performance.now();
    this.calc();
  }
  calc() {
    const diff = performance.now() - this.lastTimeRun;
    this.lastTimeRun = performance.now();

    const incAmt = diff / this.interval * this.incAmt;
    this.updater(incAmt);

    this.timer = window.setTimeout(() => this.calc(), 10);
  }
  kill() {
    this.timer && window.clearTimeout(this.timer);
  }
}

class Bank {
  constructor(initialAmount, outputSelector) {
    this.funds = initialAmount || 0;
    this.outputElem = document.querySelector(outputSelector);
    this.timers = {};
  }
  updateAccount(diff) {
    this.funds += diff;
    this.updateScreen();
  }
  updateScreen() {
    this.outputElem.textContent = Math.floor(this.funds).toLocaleString();
  }
  addResource(name, rate, interval) {
    this.timers[name] = new TimerCalc(rate, interval, this.updateAccount.bind(this));
  }
}

const myBank1 = new Bank(0, '#out1');
myBank1.addResource("fast", 1, 1000);

const myBank2 = new Bank(0, '#out2');
myBank2.addResource("slow", 1, 10000);

const myBank3 = new Bank(0, '#out3');
myBank3.addResource("mine1", 1, 10);
myBank3.addResource("worker1", -1.50, 1000);
myBank3.addResource("worker2", -2.50, 1000);
myBank3.addResource("manager", -5.50, 1000);

<div id="out1"></div>
<div id="out2"></div>
<div id="out3"></div>

Gradually ramp up a parameter

Answer №1

Answer №2

Similar questions

Guide on executing a PHP file from HTML or Javascript

Verify whether the value is considered false, true, or null

Using AngularJS to retrieve JSON data with the HTTP module

Issue with interactions between datepicker and jQuery dialog box

Apologies, but it seems that the function Buffer.write(string, encoding, offset[, length]) is no longer supported

Dynamic Translation Service for Ionic 2 and Angular 2 with ngx-translate

Removing duplicate elements from an array using lodash

The strategy of magnifying and shrinking graphs on Google Finance for better analysis and

Locate the parent and child elements within an array

Display a loading bar or prevent any user interface actions until the server has finished generating the file

Angular application across multiple subdomains

JSFiddle Functioning Properly, But Documents Are Not Loading

Tips for locating the index of the previously selected active class

Successfully Passing GET Parameters to ngResource in AngularJS

Can the vacant space on an HTML page be determined through calculation?

I recently discovered how to modify the video source (src) within an html5 source tag, but I am encountering varied outcomes when using it within a function or with inline javascript

Determining when all $http requests have completed in AngularJS

When transitioning to a different page, Angular is creating a duplicate of $scope

What is the proper method for implementing a scrollable effect to the <v-bottom-sheet> element within the Vuetify framework?

Trie-based autocomplete functionality