Calcul d'un ratio

Bonjour,
je cherche a ajuster la dimension d'une police pour l'affichage d'un message sur une page internet en fonction de la résolution du navigateur et nombre de caractères à afficher.

Jusqu’à maintenant je ne prenais pas en compte la résolution du navigateur et j'utilisais une formule comme ça :

fontsize = 35 - (0.04 * NBcarac)

35 c'est la dimension en pixel de la police initiale
0.04 c'est un ratio qui me paraissait correct jusqu’à maintenant.


J'aimerais inclure la résolution du navigateur simplement en utilisant le nombre de pixels que contient le navigateur.
Après plusieurs essais j'ai trouvé ces ratios qui me conviennent.
resolution |nb de pixels| ratio idéal
1900*900   | 1 700 000  | 0.03
1200*800   |   960 000  | 0.04
1024*768   |   780 000  | 0.04
 800*500   |   400 000  | 0.08
 320*560   |   180 000  | 0.15
tous les chiffres sont approximatifs.
On devine une 2 courbes qui se croisent entre le nombre de pixels et le ratio, la résolution est juste là pour illustrer.

J'ai le niveau CP en mathématiques et j'aurais besoin de votre aide pour une formule qui me permettrait de calculer le ratio en fonction du total de pixels.
Merci d'avance

Réponses

  • Bon j'ai pu dessiner la courbe à l'aide d'un logiciel et pour avoir quelque chose de correct je n'ai gardé que ces points :
          x       |         y 
    ***************************
    1 700 000     |       0.03
      960 000     |       0.04
      400 000     |       0.08
      180 000     |       0.15
    
    La question maintenant c'est comment convertir ces 4 points en une fonction...
    ou plutôt comment trouver une fonction qui donnerait une courbe passant approximativement par ces 4 points.
  • Voici une proposition – la meilleure de la forme $f(x)=\frac{a}{x^b}$ :\[f(x) = \frac{0{,}0403}{x^{0{,}7642}}.\]Graphiquement, les données en bleu (abscisses divisées par un million), l'approximation en orange.79312
  • Super, ça devrait faire l'affaire.
    Bon le dernier point me chagrine un peu car j'aurai préféré que les erreurs soit plus sur les points du milieu mais je pourrais tricher un peu avec une simple soustraction sur le résultat final ou en jouant un peu avec les valeurs.

    Par contre comme je l'ai dit plus haut, je suis nul en math et je n'arrive pas a me servir de cette fonction (ou bien elle est fausse ;-) )

    si je prends le point : 180 000 | 0.15

    en javascript je fait ça:
    var a = 0.0403;
    var b = Math.pow(180000,0.7642);    // 180000 puissance 0.7642
    var r = a/b;
    

    J'obtiens 0.00000388.
    Idem à la calculatrice.

    Donc je suppose que je m'y prends mal ?
  • Je crois qu'il faut diviser tous tes $x$ par un million avant d'utiliser la fonction de Math Coss. Ici, remplace 180000 par 0.18.
  • Oui, c'est cela, j'avais compté les $x$ en millions. Avec l'élévation à la puissance $0{,}73$, ce facteur donne « n'importe quoi ». En l'état, l'erreur sur le dernier point est faible : $0{,}14947$ « calculé » contre $0{,}15$ « théorique ».

    Pour une meilleure approximation, de la forme $f(x)=\frac{a}{x^b+c}$, tu peux prendre \[
    f(x)=\frac{249.156}{x^{0{,}6373} - 574.398}.\] (Cette fois-ci, sans diviser par un million. NB : C'est bizarre de prendre trois paramètres pour interpoler quatre points...) L'approximation sur le dernier point est un peu meilleure ($0{,}15009$), au détriment de celle sur les points précédent.

    Sinon, si tu préfères améliorer les deux extrémités au détriment du troisième point, tu peux prendre \[\frac{126.315580899}{x^{0.589716729563} - 414.496536136}.\] (J'ai calculé ça en répétant le premier et le dernier point.)
  • Effectivement, en divisant x par 1 million ça marche.

    par contre j'ai un problème dans mon calcul final de la dimension de la police:
    fontsize = 35 - (0.04 * NBcarac)
    
    35 c'est la dimension en pixel de la police initiale
    0.04 c'est un ratio qui me paraissait correct jusqu’à maintenant. 
    

    pour les grandes résolution et les petites ça marche bien mais pour les intermédiaires ça ne va pas du tout.

    Je suis parti d'une taille initiale pour la police auquel j'ai appliquer des corrections selon nombre de caractères et un ratio pour essayer de corriger tout cela selon la résolution.

    Je pense maintenant qu'il faut juste calculer la taille de la police selon la résolution et le nombre de caractères puis ensuite appliquer une correction mais je ne sais pas encore comment. Il faut que je fasse plusieurs essais pour établir un tableau avec la dimension idéal de la police dans plusieurs résolutions et avec au moins 2 longueurs de message.

    Merci pour votre aide
  • Par contre, les résolutions étant "très discrètes", et en nombre fini, ne peut-on pas avoir recours au seul polynôme de degré convenablement grand pour n'avoir que des valeurs exactes ?
  • À l'origine de la forme des fonctions $a/x^b$ et variations, il y a le constat que les points $(\ln x_i,\ln y_i)$ sont près d'être alignés (premier graphe), ce qui conduit à la courbe orange.
    La courbe jaune est la meilleure approximation de la forme $a/(x^b+c)$ sur une liste dont les premiers et derniers termes ont été répétés : de près, c'est mieux mais en gros, c'est pareil.
    En bleu, c'est l'approximation polynomiale « exacte » (interpolation de Lagrange), qui est de degré $3$ puisqu'il y a quatre points.

    Quelle courbe est-ce que tu prendrais pour extrapoler ?79364
  • Je te remercie Dom de t'intérresser à mon problème, malheureusement je ne peux pas te répondre car je ne connais le polynôme de degré que de nom.

    Les possibilités de résolutions sont vraiment multiples car c'est la résolution interne du navigateur que je relève.
    Sur un même appareil selon le navigateur utilisé et les extensions installés, la résolution interne peut varier de peu ou de beaucoup. Si on prends en compte les smartphones, tablettes et le fait qu'il est possible de fenêtrer les navigateurs et que les ratio d'écran ne sont pas tous identiques on obtiens une quantité énorme de résolutions possibles.

    J'ai pris un peu de temps pour trouver les valeurs qui me paraissent bien avec un message court et un message long et j'ai obtenu 2 courbes:

    Abscisse = résolution du navigateur/10 000 __________ Ordonnée = taille de la police en pixels
    dghw.jpg
    vert = message de 100 caractères.
    Bleu, un message de 450 caractères.

    Voici les points pour les courbes:
    résolution |    450    |    100
    ********************************
     180       |    20     |    20
     140       |    20     |    20
     120       |    19.5   |    20
     100       |    19     |    19.5
      80       |    18     |    19
      65       |    17.5   |    19
      50       |    17     |    18.5
      40       |    17     |    18
      30       |    16     |    18
      25       |    16     |    18
      15       |    15     |    17
    

    résolution 180 = 1 800 000 pixels
    140 = 1 400 000 pixels

    Les autres chiffres ce sont des dimensions de la police en pixels
    Fini les histoires de ratio, je repars sur quelque chose de plus simple.

    Dans un 1er temps j'aurai besoin que quelqu'un me trouve les fonctions pour ces 2 courbes en lissant comme cela:
    iny5.jpg

    Et ensuite je ne sais pas trop, soit je n'utilise que l'une des 2 fonctions auquel j'applique une correction selon le nombres de caractère à l'aide d'un ratio ou autre calcul grossier. Soit je fais une prière pour que l'un d'entre vous me trouve une formule "magique" pour ajuster la fonction en fonction du nombre de caractères. :-)
  • @Math Coss
    S'il n'existe que quelques résolutions, je ne me lance pas dans de l'approximation, je trouve une formule polynomiale qui me donne les valeurs souhaitées aux endroits souhaites.
    C'était le sens de mon message.
    Ici, je n'y connais pas grand chose, mais entre deux résolutions distinctes, est-ce pertinent d'interpoler ?
    Puis, est-ce pertinent d'extrapoler ?

    @sylvercis
    Tu as répondu clairement : « on obtient une quantité énorme de résolutions possibles ».
    Le travail de Math Coss est donc pertinent.
  • Personne pour convertir ces 2 courbes en fonction ?
    Existe-t-il un logiciel gratuit pour le faire ?
    Et en logiciels payant, lesquels sont les plus simples à utiliser ?
  • J'ai un peu bricolé hier soir mais la discrétisation pose problème.
    D'abord, dans tes données, il y a au moins un point mal placé (en physique, je parlerais de mesure aberrante). Dans la première figure, je mets un point pour chaque ligne : en abscisse, la taille de la police pour 450 ; en ordonnée, pour 100. Le point encerclé de rouge est vraiment en-dehors des clous ; celui avec le cercle en pointillés n'est pas optimal non plus à mon avis.

    Pour interpoler, les formules \[f_{180}(x)=14.5212820815 \, {\left(x - 2.42940788011\right)}^{0.0639162907463}\quad\text{et}\quad
    f_{450}(x)=9.56659475017 \, {\left(x + 7.94610692027\right)}^{0.144211491067}\]ne sont pas trop mauvaises. Pour passer aux points discrets, tu peux calculer \[.5*\mathrm{floor}\bigl(2*f(x)+.5\bigr),\] ça tombe où tu veux à 1/2 pt près.

    Mais je te propose de revoir tes tailles de polices.
  • Merci Math pour ces formules. Je vais les essayer.

    Par contre je ne comprends pas la 3ème formule, du moins je ne comprends pas son utilité et comme il manque la photo des courbes que tu as réalisées dans tes essais j'ai un peu de mal à te suivre.

    Il y a forcement des petites erreurs dans mes mesures mais d'après les courbes que j'ai données c'est de l'ordre de 0.5px maxi par rapport à une courbe idéal. Donc même si les courbes ne passent pas exactement par les points que j'avais fournis, ça devrait aller visuellement. Ça sera peut être même mieux que ce que j'avais trouvé.
  • j'ai fais les essais et c'est parfait!

    Avec la formule "f180" pour des messages de 100 caractères
    P= Dimension de police que je souhaitais obtenir
    R= Dimension calculée
    résolution  |    P      |    R  
    **********************************
     1 800 000  |    20     |   20.21
     1 400 000  |    20     |   19.89
     1 200 000  |    20     |   19.69
     1 000 000  |    19.5   |   19.45
       800 000  |    19     |   19.17
       650 000  |    19	|   18.91
       500 000  |    18.5   |   18.50
       400 000  |    18     |   18.30
       300 000  |    18     |   17.94
       250 000  |    18     |   17.72
       150 000  |    17     |   17.07
    

    Avec la formule "f450" pour des messages de 450 caractères
    résolution  |    P      |    R            
    **********************************
     1 800 000  |    20     |    20.35
     1 400 000  |    20     |    19.66
     1 200 000  |    19.5   |    19.25
     1 000 000  |    19     |    18.79
       800 000  |    18     |    18.24
       650 000  |    17.5   |    17.76
       500 000  |    17     |    17.18
       400 000  |    17     |    16.71
       300 000  |    16     |    16.16
       250 000  |    16     |    15.83
       150 000  |    15     |    15.03
    

    Donc pour moi la courbe est proche de la perfection et les erreurs se trouvent du coté de mes mesures (P dimension souhaitée).

    En javascript cela donne ceci:
    var total_pixels = (document.body.clientWidth * document.body.clientHeight);
    
    // si le message fait 100 caractères j'utilise cette formule
    var fontsize = 14.5213 * (Math.pow(((total_pixels/10000)-2.4294),0.0639));
    
    // si le message fait 450 caractères j'utilise celle ci.
    var r = 9.5666 * (Math.pow(((total_pixels/10000)+7.9461),0.1442));
    

    Le problème maintenant c'est que mes messages peuvent varier de ~50 à ~600 caractères.
    Comment faire pour inclure cette variation dans l'une des formules ci-dessus?

    Je vais essayer de jouer avec la 3ème formule que tu as donné et que je ne comprends pas, la réponse est peut être dedans ?
Connectez-vous ou Inscrivez-vous pour répondre.