IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Tracer des courbes


Sujet :

JavaScript

  1. #21
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Salut,

    Jolie apparence en effet...

    Je regarde et teste le code...

  2. #22
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Salut,

    Bon j'ai fait quelques testes pour voir ce que cela donne si on effectuait des "zoom box"...

    Voici un exemple :

    Nom : courbe1.PNG
Affichages : 334
Taille : 17,5 Ko

    On peut voir qu'il y a quelques soucis sur les graduations, certaines se répètent à l'identique... Cela semble assez difficile d'avoir des graduations qui tombent justes et qui varient selon un pas constant : 0.25, 0.50, 1 multiplié par 10^n où n peut être positif ou négatif...

    Et plus les intervalles (pas entre deux graduations) sont grands ou petits plus c'est compliqué car là il faudra par exemple utiliser des puissances de 10 pour éviter que les nombres prennent trop de place à l'affichage et qu'il soit plus facile à lire...

  3. #23
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Salut,

    J'ai aussi testé ce code : https://blog.niap3d.com/fr/4,10,news...avascript.html

    Il est intéressant (on peut choisir canvas ou SVG), le code me semble plutôt clair...


    Mais on a le même problème que celui que j'évoque dans mon précédent message...
    Exemple :

    Nom : courbe2.PNG
Affichages : 371
Taille : 11,2 Ko

    Cela confirme que cela n'est pas une fonctionnalité simple, elle nécessite un code plus évolué...

  4. #24
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour,
    On peut voir qu'il y a quelques soucis sur les graduations, certaines se répètent à l'identique
    J'ai changé la précision de 3 par une précision de 9.
    il faudra par exemple utiliser des puissances de 10
    C'est fait pour les nombres supérieurs à 1000 ou inférieurs à 0,001. En fait, il s'agit de la fonction af(), située à la ligne 64 du fichier "JSgrapheur.js".

  5. #25
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Bon j'ai testé et effectivement cela fonctionne mieux...

  6. #26
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour,

    Danse avec une courbe :
    http://eleydet.free.fr/tmp2/

    Certes le code doit être amélioré. C'est un premier essai...

  7. #27
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Merci.

    Intéressant mais chez moi ça consomme pas mal de cpu...

  8. #28
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour,

    Beginner écrivait :
    chez moi ça consomme pas mal de cpu.
    C'est normal, le code devait être amélioré. Avec cette nouvelle version, la consommation de CPU est nettement diminuée. Elle se trouve toujours la même adresse :
    http://eleydet.free.fr/tmp2/

  9. #29
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Chez moi il n'y a rien dans la page...

  10. #30
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonsoir,
    Quel navigateur utilises-tu?
    Pour ma part, c'est FireFox...

  11. #31
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Salut,

    Ah j'ai testé avec Chrome et ça marche bien !

    Sur FF j'ai rien pour l'instant, le problème vient peut-être de chez moi...

  12. #32
    Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 067
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 067
    Points : 17 155
    Points
    17 155
    Par défaut
    Salut

    Pour information, moi le code fonctionne sous FF, Edge, Chrome et Opera, mais pas sous Explorer.
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.
    👉 → → Ma page perso sur DVP ← ← 👈

  13. #33
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    @eleydet
    au moment où j’écris (31 mars, 11h) le code sur ton site utilise un setTimeout. Je te conseille d’utiliser requestAnimationFrame qui est plus adapté pour les animations, comme son nom l’indique
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  14. #34
    Membre expérimenté
    Homme Profil pro
    chomeur
    Inscrit en
    Avril 2015
    Messages
    709
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 709
    Points : 1 582
    Points
    1 582
    Par défaut
    sauf qu'avec requestAnimationFrame on est limiter a utiliser 60 animation par seconde un point c'est tous on peut pas définir une durée précise.
    Plus vite encore plus vite toujours plus vite.

  15. #35
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    60 ou 120, ou autre, ça dépend de la technologie d’affichage du client en fait (c’est indiqué dans la doc). On est censés utiliser le paramètre timestamp passé à notre fonction de rappel pour calculer la prochaine frame d’animation, et donc dans cette logique on n’a pas besoin d’une grande précision sur le délai. D’ailleurs, JavaScript ne nous donne aucune garantie sur ce délai quand on utilise setTimeout ou setInterval, ce qu’on spécifie est simplement le minimum de temps à attendre.
    Le principal avantage de la fonction requestAnimationFrame est qu’elle permet au navigateur d’ajuster l’utilisation du processeur en fonction de la situation, par exemple si l’onglet est en arrière-plan ou si le processeur est peu disponible. C’est pour ça qu’elle est recommandée quand on fait des animations.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  16. #36
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Citation Envoyé par Watilin
    au moment où j’écris (31 mars, 11h) le code sur ton site utilise un setTimeout.
    Je vois plutôt un setInterval(modif,20), erreur de frappe ?

    Quoiqu'il arrive requestAnimationFrame est effectivement plus adapté, au pire setTimeout, car un soucis majeur à l'utilisation de setInterval et le temps que dure l'animation par rapport au délai placé en paramètre de la méthode.

    Exemple, si l'animation dure 100ms et que le délai donné à setInterval est 50ms il y a empilement de la fonction de rappel ce qui va conduire à la saturation du navigateur.

  17. #37
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    En faisant du ménage, je suis retombé sur : https://www.desmos.com/calculator

  18. #38
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Merci.
    J'étais tombé sur ce site aussi mais entre temps je l'ai perdu de vu...

    Il est intéressant, il y a plusieurs fonctionnalités...

  19. #39
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour,

    Une documentation se trouve à l'adresse :
    https://www.desmos.com/api/v1.4/docs/index.html
    Le graphique, basé sur CANVAS, est le même que celui de GeoGebra.
    https://www.geogebra.org/classic?lang=fr
    Les graduations automatiques suivent la progression 1 - 2 - 5 - 10 - 20 - 50 - 100 etc...

  20. #40
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Salut,

    Ah oui le deuxième est meilleur, il y a notamment le fameux zoom-box...

    Citation Envoyé par eleydet Voir le message
    Les graduations automatiques suivent la progression 1 - 2 - 5 - 10 - 20 - 50 - 100 etc...
    Oui, exact il y a trois pas apparemment : 1 - 2 - 5 (x 10^n où n peut être positif ou négatif).

    J'avais fait un code en C++ où il y avait trois pas : 1 - 2,5 - 5 (x 10^n où n peut être positif ou négatif).

    C'était il y a longtemps, je m'étais pris la tête à l'époque sur ce point...

    Il faudrait que j’essaie de le traduire en JS et en python...

Discussions similaires

  1. tracer des courbes en opengl???
    Par jollo dans le forum OpenGL
    Réponses: 10
    Dernier message: 28/02/2013, 10h28
  2. truc pour tracer des courbe en temps reel qvec perl tk
    Par mohaz dans le forum Interfaces Graphiques
    Réponses: 5
    Dernier message: 16/06/2009, 17h48
  3. Tracer des courbes
    Par skywaltitou dans le forum MFC
    Réponses: 5
    Dernier message: 27/03/2007, 16h22
  4. Tracer des courbes - GtkCurve
    Par Ange44 dans le forum GTK+ avec C & C++
    Réponses: 1
    Dernier message: 07/08/2006, 15h44
  5. Réponses: 7
    Dernier message: 06/05/2006, 23h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo