Javascript for Exponential Growth / Decay

[Heretic86]

Hi all, not sure if this is the right place ask for help with using Javascript to calculate a curve for Exponential Growth / Decay...

I have a form element that has a Min, Max, and Rate, where if the Rate slider is set to 0, its just straight Linear Growth...

Im trying to mirror functionality from these Window Forms:

What I'd like to do is to move the Range (where it says Fast Middle Slow) so the output looks like this:

This is my function so far...

    function calculateValues(){
      if (level1.value == '' || !level1.checkValidity()) return;
      if (level99.value == '' || !level99.checkValidity()) return;
      
      let rate = parseInt(paramRate.value);
      let min = actor.parameters[selectedParameterId][0], max = actor.parameters[selectedParameterId][98];
      if (isNaN(min) || isNaN(max)) return;
      
      let n = (max - min) / 98;
      
      for (let i = 0; i < 99; i++){
        actor.parameters[selectedParameterId][i] = min + Math.round(i * n);
      }
    }

 

The function is INCOMPLETE.

I need to keep the first and last values the same in the data set.

What do I need to do to generate the Exp Curves as displayed in the windows I am trying to emulate?

Edited June 20, 2022 by Heretic86

[Sensei]

Try Math.pow(x,y).

https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Math/pow

If y=1 you will get straight line for free.

Values less than 1 will give you what you have on #2 picture.

Values greather than 1 will give you what you have on #3 picture.

 

How to draw an HTML5 curve on a canvas in a web browser:

https://www.google.com/search?q=javascript+canvas+curved+line

 

You can use the Wolfram Alpha  to see what the curve will look like:

https://www.wolframalpha.com/input?i=x^0.1

 

 

Edited June 20, 2022 by Sensei

[Heretic86]

I already have a Canvas Draw method:

  drawParam(){
    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    this.ctx.fillStyle = this.htmlColor();
    
    let params = this.actor.parameters[this.type];
    let s = ([0,1].includes(this.type)) ? 100 : 10;
    let ch = 100 / this.ctx.canvas.height * 100;
    let cw = this.ctx.canvas.width / params.length, w = Math.ceil(cw);
    
    for (let i = 0; i < params.length; i++){
      let x = i * cw;
      let h = parseInt((params[i]) / s / (1 / (this.ctx.canvas.height / 100)));
      let y = this.ctx.canvas.height - h;
      this.ctx.fillRect(x, y, w, h);
    }
  }

Im stuck on this line, I dont see where to use Math.pow(x, y) in the call...

actor.parameters[selectedParameterId][i] = Math.round(min + Math.pow(i * n, rate));

I need the LAST VALUE to end up at 5000, or whatever the user has in the "Level 99" value, not just unlimited growth into the stratosphere...

[Sensei]

Then constrain it using the Math.min() and Math.max() functions.

Edited June 20, 2022 by Sensei

[Heretic86]

Well now it shoots up and hits the max at Level 20, not 99, then just stays at whatever that is, clamped.  No curve...

[Sensei]

12 hours ago, Heretic86 said:

No curve...

As I mentioned earlier, the correctness of the mathematical equations can be checked in the Wolfram Alpha program:

e.g.:

https://www.wolframalpha.com/input?i=x^0.1

(curve from #2 picture)

https://www.wolframalpha.com/input?i=x^2

(curve from #3 picture)

https://www.wolframalpha.com/input?i=x^1.01

https://www.wolframalpha.com/input?i=pow(x%2C1.01)

(almost a straight line)

 

JavaScript can print the log to a file or console:

https://stackoverflow.com/questions/54654946/how-to-write-console-log-to-a-file-instead

Log all variables on the console or in a file and analyze where the error occurred..

https://developer.mozilla.org/pl/docs/Web/API/Console/log

 

12 hours ago, Heretic86 said:

Well now it shoots up and hits the max at Level 20

pow(x,20) is very extreme:

https://www.wolframalpha.com/input?i=x^20

 

12 hours ago, Heretic86 said:

not 99,

99 is obviously even worse:

https://www.wolframalpha.com/input?i=x^99

Due to the pixelated nature of the computer screen, this can be a straight vertical line...

 

Edited June 20, 2022 by Sensei

[Heretic86]

I tweaked the Rate slider so the value default is 1, min value is 0.1 and max is 2, so it never hits 20 as the exponent.  Like you said n ** 20 is rather extreme.

I know how to use console.log(), console.warn() and console.error just fine as well as most of the Math static functions.  Im not a total idiot, parts are missing, so only partially dumb. (Specifically, I had my Wisdom Teeth removed.... oh, wait)

This was supposed be a request for "one line of code" that it seems no one has been able to help me with so far, even on other forums...

 

[Sensei]

I would do a for-loop for each column in the canvas, instead of going from 0...99.

Then map the pixel screen coordinate space to the exponential equation space.

Then convert the result of the exponential equation back to screen coordinate space.

Instead of drawing a rectangle, draw a straight vertical line for each column.

Edited June 20, 2022 by Sensei