P5.js : exemple 1

by 18_102_elias

HTML

<script src="https://data.noordover.fr/js/p5.min.js"></script>
<h2>Projet Repère</h2>

<fieldset>
<p>
  Xmin = <input type = 'number' id ='Xmin' value = '-5'/>
  Xmax = <input type = 'number' id ='Xmax' value = '5'/>
  Xgrad = <input type = 'number' id ='Xgrad' value ='1' min = '0.5' step ='0.5'/>
</p>
<p>
  Ymin = <input type = 'number' id ='Ymin' value = '-5'/>
  Ymax = <input type = 'number' id ='Ymax' value = '5'/>
  Ygrad = <input type = 'number' id ='Ygrad' value = '1' min = '0.5' step ='0.5'/>
</p>
<p>
  X canvas = <input type = "number" id ="Xcanvas" min = "400" max =" 600" value = "400"/>
  Y canvas = <input type = "number" id ="Ycanvas" min = "400" max =" 600" value = "400"/>
</p>
</fieldset>

<div id="div_container">

</div>

JavaScript

function aff(variable,texte=""){   
             console.log(Object.prototype.toString.call(variable)
             + " --- " + texte, variable);
}




// Définition d'une fonction sketch
let sketch = function(p) {
	var $largC = $("#Xcanvas").val(); //dimension canvas
	var $hautC = $("#Ycanvas").val();
      // setup : fonction exécutée une seule fois

      var $Xmin = Number($("#Xmin").val());
      var $Xmax = Number($("#Xmax").val());
      var $Ymin = Number($("#Ymin").val());
      var $Ymax = Number($("#Ymax").val());
      
      
      
           p.setup = function(){
         p.createCanvas($largC, $hautC);
         p.background(255,255,200);
         p.noLoop(2);// 2 images par seconde
         afficheRepere();
         
         $("input").on('change',function(){
           p.background(255,255,200);
           
              $Xmin = Number($("#Xmin").val());
              $Xmax = Number($("#Xmax").val());
              if ($Xmax - $Xmin <= 0 ){
              	alert('Xmax doit être supérieur à Xmin');
              }
              $Ymin = Number($("#Ymin").val());
              $Ymax = Number($("#Ymax").val());
           		if ($Ymax - $Ymin <= 0 ){
              	alert('Ymax doit être supérieur à Ymin');
              }
              
              
           afficheRepere();
           
         })
      } //fin setup
      
      
     
		function afficheRepere(){

        var $Ygrad = Number($("#Ygrad").val());
        var $Xgrad = Number($("#Xgrad").val());
     
        p.strokeWeight(1);  
        var Y = y2Y(0);
        var X = x2X(0);
      		p.line( X, 0, X, $hautC);
          p.line( 0, Y, $largC, Y);
        
          
      	var gradX = $Xmax/$Xgrad;
        var gradY = $Ymax/$Ygrad;
        
        p.strokeWeight(5);
        for (var g = 0; g <= $Xmax; g += $Xgrad){   //droite
        		p.point(x2X(g),y2Y(0));
        }
        for (var g1 = 0; g1 >= $Xmin; g1 -= $Xgrad){ //gauche
        		p.point(x2X(g1),y2Y(0));
        }
       ...