TP : Piloter un canvas avec le javascript

Objectif

On simule une pluie aléatoire de points M dans un carré de côté 1 dans lequel on a tracé le quart du cercle unité. On compte le nombre de points tombant à l'interieur du quart de cercle. La fréquence de points intérieurs au cercle tendra vers π/4 (soit la surface du quart de cercle) lorsque le nombre de points tendra vers l'infini. On peut donc considérer que cette fréquence est une approximation de π.

Phase 1 : la balise `canvas`

Voici le code de la pages web (au format .html) :

<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Monte-Carlo</title>
</head>
<body>
  <canvas id="canvas" width="500" height="500">Impossible d'ouvrir le canvas !</canvas>
</body>
</html>

Copiez ce code dans un page montecarlo.html et testez-le.

Phase 2 : Mise en place du fond et l'arc de cercle

Rajouter la partie en javascript à la page :

<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Monte-Carlo</title>
</head>
<body>
  <canvas id="canvas" width="500" height="500">Impossible d'ouvrir le canvas !</canvas>
    <script>					
      function draw() {	
        var canvas = document.getElementById('canvas');
        canvas.width=500;
        canvas.height=500;
        var context = canvas.getContext('2d');
        //couleur noire choisie pour la couleur de fond du canvas
        context.fillStyle = "#222222";
        //fillRect(x, y, largeur, hauteur);.
        context.fillRect(0,0,500,500);
        //couleur jaune pour l'arc de cercle
        context.strokeStyle = "yellow";
	    context.beginPath(); 
	    context.arc( 0 , 500 , 500, 0, 3*Math.PI/2,true);//context.arc(x abscisse du centre, y ordonnée du centre, rayon, anle de départ, angle d'arrivée, sens :true pour sens trigo sinon false attention la valeur par défaut est false donc on gradue dans le sens contraire du sens trigp);
	    context.stroke();
	    context.closePath()
      }//fin de la fonction draw()
     //appel de la fonction draw()
     draw();
	  </script>
</body>
</html>

Copiez ce code à la place du pécédent et testez-le.
Introduire une variable var cote=500; telle que la taille de l'image s'adapte à la valeur de cette variable

Phase 3 : Rajouter les points

Collez la ligne suivante, au début de la balise <script>, avant le début de la fonction draw().

var n=1000;

Collez ce bout de code à la fin de la fonction draw().

//tracage des points en vert dans le quart de cercle et rouge dehors
for (let i=1;i<n;i++){
  var x=Math.floor(Math.random() * cote);
  var y=Math.floor(Math.random() * cote);
  if (Math.pow(x,2)+Math.pow(cote-y,2)>+Math.pow(cote,2))
    {context.fillStyle = "red";	}
  else
    {context.fillStyle = "green";}
  context.beginPath(); //On démarre un nouveau tracé.
  context.arc( x , y , 1, 0 , Math.PI*2); //On trace les points
  context.fill(); //On utilise la méthode fill(); si l'on veut une forme pleine
  context.closePath();

Testez les modifications.

Phase 4 : Afficher les résultats

Pour afficher les résultats, il faut créer une zone pour visualiser les résultats dans notre page web.

Dans la partie html, on va placer une div avec un identifiant.

Collez la ligne suivante au-dessus de la balise canvas.
```
<div id="piapprox"></div>
```

Dans la partie javascript, on modifie le code qui permettra de compter les points.

Collez la ligne suivante, au début de la balise <script>, après var n=1000; et avant le début de la fonction draw().

var pi;

Collez la ligne suivante au début de la fonction draw().
```
var compteur=0;
```
Placer la ligne suivante afin que la variable compteur donne le nombre de points verts (à l'intérieur du cercle).

Collez enfin ces 2 lignes suivantes à la fin de la fonction draw().

pi=4*compteur/n ;
document.querySelector('#piapprox').innerHTML="pi="+pi+" et π = "+Math.PI.toString();

Analysez et testez les modifications.

Phase 5 : Utiliser un bouton pour changer le nombre de points

Pour créer une interaction avec notre page web, nous allons rajouter une zone de saisie et un bouton.

Dans la partie html :

Collez la ligne suivante au-dessus de la balise <div id="piapprox"></div>.

<input id="nbpoints" type="number" min="100" max="10000" value="5000"><button onclick="draw()">dessin</button>

Analysez la modification.

Dans la partie javascript :

Collez la ligne suivante au début de la fonction draw().
```
var n=document.querySelector('#nbpoints').value;
```
Analysez et testez les modifications.

Phase 6 : Utiliser un curseur

5000 points

Modifiez le code afin d'obtenir le résultat dans le cadre ci-dessus.