Comment créer une formule de dimensionnement basée sur les exigences logarithmiques

Question

Je crée une interface utilisateur qui doit s'adapter à la taille des éléments les plus éloignés du centre. De manière spécifique, les autres éléments viennent du centre, plus ils doivent être petits. Je vais le faire avec CSS transform: scale(x).

Les unités de distance venir en tant que telle:

0 (at the centre, no adjust needed) 
1 
2 
3 
4 
... and so on 

Parce que je me sers scale(x), je dois transformer 1, 2, 3, 4.. en valeurs comme 0.8, 0.65, 0.4, 0.25, etc., de sorte que:

1 = 0.85 
2 = 0.65 
3 = 0.4 
4 = 0.25 

Ceci est juste une approximation, les numéros de sortie n'ont pas besoin d'être exactes, juste une belle courbe.

Comment cela peut-il être fait avec JavaScript? Je sais que c'est une question de maths simple mais je ne peux pas m'en passer la tête.

Answer 1

Pourquoi n'utilisez-vous pas Math.exp(-x). Il fera l'affaire

Answer 2

Vous pouvez choisir n'importe quelle fonction mathématique et expérimenter un peu pour obtenir les bonnes limites.

Par exemple, prenons la fonction cos cos (0) = 1; cos (pi/2) = 0; dans ce cas interpolant notre longueur et l'indice à pi/2 fera l'affaire.

var calcScale = (index, length) => { 
    let x = ((Math.PI/2) * index)/length; 
    return Math.cos(x); 
};