Le tracé progressif d’une courbe mathématique est une tâche complexe qui peut être simplifiée grâce à l’utilisation de Javascript et de Canva. Javascript est un langage de programmation qui permet aux développeurs de créer des applications web interactives et Canva est un outil de conception graphique en ligne qui permet aux utilisateurs de créer des designs professionnels. En combinant ces deux outils, il est possible de tracer une courbe mathématique de manière simple et efficace. Dans cet article, nous allons examiner en détail comment utiliser Javascript et Canva pour tracer une courbe mathématique de manière progressive.
Javascript : Canva : Tracé progressif d’une courbe mathématique
Ce que l’on va faire ici
- Dans ce code Javascript intégré dans une page HTML, je vous montre comment réaliser un tracé de courbe progressif.
- On retrouve ici une structure de code habituelle que ce soit avec Arduino, Processing, Pyduino :
- une fonction initiale appelée une seul fois au départ
- puis une fonction appelée en boucle à intervalle régulier
Le code HTML + Javascript de la page
<!– Debut de la page HTML –>
<html>
<!– Debut entete –>
<head>
<meta charset=« utf-8 » /> <!– Encodage de la page –>
<title>JavaScript: Tracé de courbe dans un Canva </title> <!– Titre de la page –>
<!– Debut du code Javascript –>
<script language=« javascript » type=« text/javascript »>
<!–
// variables / objets globaux – a declarer avant les fonctions pour eviter problemes de portee
var canvas= null; // pour objet Canvas
var contextCanvas = null; // pour objet context Canvas
var textInputX=null;
var textInputY=null;
var delai=10; // intervalle a utiliser en ms
var compt=0; // variable de comptage
var x=0; // variable position
var y=0; // variable position
var xo=0; // variable position n-1
var yo=0; // variable position n-1
window.onload = function() { // fonction au lancement
canvas = document.getElementById(« nomCanvas »); // declare objet canvas a partir id = nom
textInputX= document.getElementById(« valeurX »); // declare objet champ text a partir id = nom
textInputY= document.getElementById(« valeurY »); // declare objet champ text a partir id = nom
canvas.width = 360; // largeur canvas
canvas.height = 300; // hauteur canvas
textInputX.value=x; // fixe la valeur du champ
textInputY.value=y; // fixe la valeur du champ
if (canvas.getContext){ // la fonction getContext() renvoie True si canvas accessible
contextCanvas = canvas.getContext(« 2d »); // objet context global permettant acces aux fonctions de dessin
DuneMesure simple de la tension d’une batterie 12V// le code graphique ci-dessous
// carre de la taille du canvas
contextCanvas.fillStyle = « rgb(255,255,200) »; // couleur de remplissage rgb 0-255
contextCanvas.fillRect (0, 0, canvas.width, canvas.height); // rectangle
// position initiale
contextCanvas.fillStyle = « rgb(0,0,255) »; // couleur de remplissage rgb 0-255
contextCanvas.fillRect (x,canvas.height–y–1, 1,1); // context.fillRect(x,y,width,height) – dessine 1 pixel
// parametres graphique
contextCanvas.lineWidth=1; // largeur ligne avec lineTo()
contextCanvas.strokeStyle = « rgb(0,0,255) »; // couleur de pourtour rgb 0-255
// intervalle de rafraichissement
//interval=window.setInterval(draw, 100); // fixe intervalle en ms et fonction a executer
window.setTimeout(draw, delai); // fixe intervalle en ms et fonction a executer – alternative
} // fin si canvas existe
else {
window.alert(« Canvas non disponible »)// code si canvas non disponible
} // fin else
} // fin window.onload
function draw() { // fonction qui est appelee a intervalle regulier
if (contextCanvas!=null) {
// — coordonnees x,y courantes
x=x+1; // incremente x
if (x>canvas.width)x=0; // RAZ x
y=(canvas.height–1)/2+ (Math.cos(2*x * Math.PI/180) * (canvas.height–1)/2) ; // valeur de y = cos (x)
y=Math.round(y); // valeur entiere
if (x==0) { // reinitialisation dessin si x a ete reinitialise
contextCanvas.moveTo(x,y); // deplace sans trace
// rect plein de la taille du canvas = efface canvas pour nouveau trace
contextCanvas.fillStyle = « rgb(255,255,200) »; // couleur de remplissage rgb 0-255
contextCanvas.fillRect (0, 0, canvas.width, canvas.height); // rectangle
xo=0; // RAZ xo point n-1
} // fin if x==0
else { // si x diff 0 : on trace la ligne jusqu’au point courant
contextCanvas.beginPath(); // reinitialise trace – sinon toutes les actions de dessins sont reexecutees
contextCanvas.moveTo(xo,canvas.height–1–yo); // trace virtuellement la ligne
contextCanvas.lineTo(x,canvas.height–1–y); // trace virtuellement la ligne
contextCanvas.closePath(); // reinitialise trace – sinon toutes les actions de dessins sont reexecutees
contextCanvas.stroke(); // trace le pourtour – ne pas oublier
textInputX.value=x; // fixe la valeur du champ
textInputY.value=y; // fixe la valeur du champ
xo=x; // memorise n-1
yo=y; // memorise n-1
} // fin else
DuneCalcul de la charge d’une batterie 12Vwindow.setTimeout(draw, delai); // fixe nouvel intervalle en ms et fonction a executer
} // fin if context !=null
} // fin draw
</script>
<!– Fin du code Javascript –>
</head>
<!– Fin entete –>
<!– Debut Corps de page HTML –>
<body >
<canvas id=« nomCanvas » width=« 300 » height=« 300 »></canvas>
<br />
X=<input type=« text » id=« valeurX » />
Y=<input type=« text » id=« valeurY » />
<br />
Exemple de courbe avec un Canvas
</body>
<!– Fin de corps de page HTML –>
</html>
<!– Fin de la page HTML –>
