Tracer la courbe d'une fonction

AFmika Messages postés 25 Date d'inscription mardi 14 juillet 2015 Statut Membre Dernière intervention 24 juin 2016 - 13 sept. 2015 à 23:43
AFmika Messages postés 25 Date d'inscription mardi 14 juillet 2015 Statut Membre Dernière intervention 24 juin 2016 - 15 sept. 2015 à 23:18

Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/101165-tracer-la-courbe-d-une-fonction

AFmika Messages postés 25 Date d'inscription mardi 14 juillet 2015 Statut Membre Dernière intervention 24 juin 2016
15 sept. 2015 à 23:18

Merci pour les astuces. Je suis debutant et c'est l'un de mes tout premiers scripts. Pour tout te dire je venais de decouvrir canvas et je voulais faire un truc que quelqu'un semble ne pas avoir encore fait alors voila... :) en passant ... j'avoue l
existence de certaines erreurs et trucs inutiles comme la ligne se repetant a chaque fois...

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 14/09/2015 à 15:41

bonjour

le script est une bonne base de départ mais il y a des chose qui peuvent être changé comme la création des point qui passent par un rectangle alors que le faire avec une ligne est plus simple de même que le 0.001 qui force a faire trop de calcules inutilement. il y a aussi la création des ligne de repéré qui est répété inutilement pour ça il suffit de créer une fonction qui est lancé au chargement de la page et qui crée un seul fois ces lignes et enfin quand tu cree une boucle pour l'incrémentation tu utilise la variable i sans le mot var tu cree donc une variable globale pour ce script c'est pas grave mais dans d'autres cas sa peut causer des problèmes

voici des modifs afin de rendre le script fluide

function init_c(){

var canvas = document.getElementById("canvas")
 var ctx = canvas.getContext('2d')
 var dx = canvas.width
 var dy = canvas.height

//Les droites constituant notre sous repère
 
 ctx.beginPath();
 
 ctx.moveTo(dx, (dy/2)+4); // on place le stylo au point A(dx,dy/2+(réel d'ajustement))
 ctx.lineTo(0,(dy/2)+4); // première droite
 ctx.moveTo(dx/2 , 0 );
 ctx.lineTo( dx/2 , dy); // deuxième droite
 ctx.lineWidth = 2; // épaisseur du trait
 ctx.stroke()
 
}


function draw_curve(){

 var canvas = document.getElementById("canvas")
 var ctx = canvas.getContext('2d')
 var dx = canvas.width
 var dy = canvas.height
 /**Centre du canvas(centre du sous repère) x=dx/2 et y = dy/2
 -Puisque l'ordonnée 'y' s'inversse on calcule dans le canvas de dimension dx , dy
 -Pour tout point M(x',y') sur le canvas, dans le sous repère du canvas OIJ, les coordonnées de M sont :
 *Canvas : M(x',y') = dOIJ/dCanvas : M(dx/2 + x' , dy - (y' + dy/2))
 **/
 
 //On va débuter ici le tracé de la courbe en fonction de la fonction entrée
 var k = document.getElementById("echelle").value //Echelle réel à k ~ 20
 
 ctx.beginPath();

 for( var i= -dx ; i < dx ; i+=0.1 ){ //On associe 'i' réels à f(x) prédéfini dans la dimension du canvas pour construire des points
  var x = dx/2 + k*i
  var y = dy - (k*f(i) + dy/2)
  ctx.lineTo(x , y);
  
 }
 ctx.strokeStyle='red'
 ctx.lineWidth = 2;
 ctx.stroke()
}

window.addEventListener("load", init_c, false);

sa rend le script plus long mais l'objectif n'est pas d'avoir le script le plus court a tout prix.

sinon j'aime bien le coté simple et efficace c'est un truc qui demande a être amélioré par l'ajout d'options.

Discussions similaires

programme pour tracer une courbe

tracer courbe en langage C

Courbe de tendance

Approximation d'une courbe "particulière" sous Excel par une droite affine

Excel - Coefficients courbe de régression/tendance

Votre réponse

Discussions similaires