Fractale de Sierpinski

Construction aléatoire: jeu du chaos

Code pour jeu du chaos

• form et input: sélection du nombre de points et interaction avec le canvas:
  

  <form onchange="Drawh()" onsubmit="Drawh();return false;" >
  <label>Nombre de points:</label>
  <input type="number" id="Nch" min="0" value="1000" max="100000" step="1" size="10">
  </form>
  

  Le canvas, zone graphique où se passe la représentation animable,
  

  <canvas id="spih" width="400" height="400" style="border:1px solid black"></canvas>
  
• et le programme javascript à proprement parler:
  

  <script>
  canvash = document.getElementById("spih");
  ctxh = canvash.getContext("2d");
  Width=document.getElementById("spih").width;
  Height=document.getElementById("spih").height;
  
  function milieux(A,B) {
      //return C milieu de [AB]
      xC=(A[0]+B[0])/2
      yC=(A[1]+B[1])/2
      return [xC,yC] 
  }
  
  function Drawh() {
  x=0.5;y=0.5;
   ctxh.clearRect(0,0,Width,Height);
   Nch=document.getElementById("Nch").value;
    for (i=1;i<Nch;i++) {
      p=Math.random();
      if (p<1/3) {// M est le milieux de [AM], avec A(0,0)
        x=(0+x)/2;y=(0+y)/2;}
      else if (p<2/3) {// M est le milieux de [BM], avec B(0,Width)
        x=(0+x)/2;y=(Width+y)/2;}
      else {// M est le milieux de [CM], avec C(Height,Width)
        x=(Height+x)/2;y=(Width+y)/2;}
      ctxh.fillStyle="blue";
      ctxh.fillRect(x,y,1,1);
    }
  }
  Drawh();
  </script>
  

Avec une IFS