Tracer la courbe d'une fonction

Messages postés
25
Date d'inscription
mardi 14 juillet 2015
Statut
Membre
Dernière intervention
24 juin 2016
- - Dernière réponse : 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

@karamel
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
51 -
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.
AFmika
Messages postés
25
Date d'inscription
mardi 14 juillet 2015
Statut
Membre
Dernière intervention
24 juin 2016
> @karamel
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
-
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...