Un changement (semi) exponentiel d'une valeur avec javascript

Question

Je fais quelque chose en utilisant javascript et il y a quelque chose (une citrouille) qui a une quantité optimale d'une valeur.

Si la valeur donnée est la valeur optimale, la citrouille se développe le plus.

Si la valeur donnée est légèrement inférieure/supérieure à la valeur optimale, la citrouille croît, mais pas autant.

Ce modèle de croissance est quelque peu comme https://fastly.kastatic.org/ka-perseus-images/7edbd1ab380efb207cf72aa25850838ef6c05824.png. Ensuite, si la valeur donnée est un peu inférieure/supérieure à la valeur optimale, la citrouille reste la même. Enfin, si la valeur est nettement inférieure/supérieure à la valeur optimale, la citrouille se rétracte en suivant le même schéma que l'image précédente, bien que plus plat.

Ma question est: Comment codifiez-vous ceci?
Cette question a été répondue :).

Answer 1

Vous voulez une fonction comme celui-ci (à l'envers parabola)

function getGrowth(value, maxGrowthAtValue, zeroGrowthAtValue, maxGrowthRate){  
    return maxGrowthRate * (1- Math.pow((value - maxGrowthAtValue)/(maxGrowthAtValue - zeroGrowthAtValue),2)); 
} 

Ainsi, si vous voulez une croissance maximale à la valeur 10 et que le taux d'être 2 et la croissance minimale à la valeur 5 puis

var growth = getGrowth(5, 10, 5, 2); 

Exemple juste une simple visualisation de la fonction. Les curseurs contrôlent les paramètres.

var ctx = canvas.getContext('2d'); 
 
var w = 500; 
 
var h = 170; 
 
var zeroAt = h-40; 
 
var axis = ["black",2]; 
 
var growth = ["red",2]; 
 
var maxLine = ["#FAA",1]; 
 
var maxLine1 = ["#F66",1]; 
 
var MG; 
 
var M; 
 
var m; 
 
ctx.font = "16px arial"; 
 

 
function getGrowth(value, maxGrowthAtValue, zeroGrowthAtValue, maxGrowthRate){  
 
     return maxGrowthRate * (1- 
 
      Math.pow(
 
       (value - maxGrowthAtValue)/
 
       (maxGrowthAtValue - zeroGrowthAtValue), 
 
      2) 
 
     ); 
 
    } 
 

 

 

 
function line(x,y,x1,y1,col,width){ 
 
    ctx.beginPath(); 
 
    ctx.lineWidth = width; 
 
    ctx.strokeStyle = col; 
 
    ctx.moveTo(x,y); 
 
    ctx.lineTo(x1,y1); 
 
    ctx.stroke(); 
 
} 
 
function text(text,x,y,size,col){ 
 
    
 
    ctx.fillStyle = col; 
 
    ctx.textAlign = "center"; 
 
    ctx.textBaseline = "middle"; 
 
    ctx.fillStyle = col; 
 
    ctx.setTransform(size/16,0,0,size/16,x,y); 
 
    ctx.fillText(text,0,0); 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
} 
 
function change(){ 
 
    if(MG !== maxG.value || 
 
     M !== max.value || 
 
     m !== min.value){ 
 
     MG = maxG.value; 
 
     M = max.value; 
 
     m = min.value; 
 
     update(); 
 
    } 
 
} 
 

 
function update(){ 
 
    ctx.clearRect(0,0,w,h); 
 
    line(10,0,10,h,...axis); 
 
    line(0,zeroAt,w,zeroAt,...axis); 
 
    line(M,0,M,h,...maxLine); 
 
    text("Max growth @ " + M, M,20,12,"black"); 
 
    line(0,zeroAt-MG,w,zeroAt-MG,...maxLine1); 
 
    text("Max growth " + MG, w-100,zeroAt-MG,12,"black"); 
 
    line(m,0,m,h,...maxLine); 
 
    line(M + (M-m),0,M + (M-m),h,...maxLine); 
 
    text("Min growth @" + m, m,zeroAt+18,12,"black"); 
 
    var g1 = getGrowth(0,M,m,MG); 
 
    for(var i = 5; i < w; i+= 5){ 
 
     var g2 = getGrowth(i,M,m,MG); 
 
     line(i-5,zeroAt-g1,i,zeroAt-g2,...growth); 
 
     g1 = g2; 
 
    } 
 
} 
 
sliders.addEventListener("mousemove",change); 
 
change(); 
 

 

 
    // console.log("Neg growth : " + getGrowth(2, 10, 5, 2)); 
 
    // console.log("Zero growth : " + getGrowth(5, 10, 5, 2));  
 
    // console.log("Medium growth : " + getGrowth(7, 10, 5, 2));   
 
    // console.log("Max growth : " + getGrowth(10, 10, 5, 2));

canvas { border : 1px solid blue; } 
 
body {font-family : arial; } 
 
div {font-size: small; }

<canvas id=canvas width=500 height=170></canvas> 
 
<div id=sliders> 
 
Max at <input id="max" type="range" min="0" max="250"> 
 
MaxGrowth <input id="maxG" type="range" min="0" max="200"> 
 
Min at <input id="min" type="range" min="0" max="200"> 
 
</div>

Answer 2

Vous cherchez quelque chose de similaire?

const range = document.getElementById("range"); 
 
const pumpkin = document.getElementById("pumpkin"); 
 

 
let rate = 1.025; 
 
let size = 100; 
 

 
range.addEventListener("input", event => { 
 
    rate = 1.025 - Math.abs(range.valueAsNumber - 50)/1000; 
 
}); 
 

 
setInterval(() => { 
 
    size *= rate; 
 
    pumpkin.style.height = size + "px"; 
 
    pumpkin.style.width = size + "px"; 
 
    pumpkin.style.borderRadius = (size/2) + "px"; 
 
}, 100);

#pumpkin { 
 
    background-color: #c63; 
 
}

<input id="range" type="range" min="0" max="100"> 
 
<div id="pumpkin"></div>

Le curseur change le taux de croissance au-dessous (à gauche, à droite) ou au-dessus (au centre) un.