Javascript : Canva : Tracé progressif d’une courbe mathématique

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

<!DOCTYPE HTML>

<!– Debut de la page HTML –>
<html>

<!– Debut entete –>
<head>

<!– Debut du code Javascript –>
<script language=« javascript » type=« text/javascript »>
<!–

[$[Get Code]]

// 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

// 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