Tracer la courbe d'une fonction

Soyez le premier à donner votre avis sur cette source.

Vue 4 531 fois - Téléchargée 857 fois

Description

bonjour tout le monde! ... comme son nom l'indique ce script vous permet de tracer la courbe de la fonction entree dans un canvas et vous pourrez ajuster l'echelle ... je voudrais bien y mettre quelque fonctions supplementaires sur le zoom avec la souris mais j'y travaille encore... merci

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

@karamel
Messages postés
1721
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
8 novembre 2019
49 -
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
1721
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
8 novembre 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...

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.