Problème Grille Canvas.

Default
,

Bonjour,

Je rencontre un petit soucis avec mon code. J'essaie de créer a l'aide d'une image de Perlin une carte. J'arrive a avoir une carte mais pas très esthétique malheureusement. (Voici mon code GitHub si vous voulez la voir : https://github.com/CrisDossierPJ/tower-defense).
J'aimerai, afin de rendre mon code plus esthétique et afin de mettre des coordonnées, mettre mon Canvas en sorte de carrés de 50x50p, afin de faire un peu comme une carte de Pokémon, et de rendre ainsi ma carte plus esthétique.
Voici mon code :

var inc = 0.0045;

function setup() {
  createCanvas(1500 , 900 );
  pixelDensity(1);

}

function draw() {


  var yoff = 0;

  var plaine = 0;
  var montagne = 0;
  var ocean = 0;
  var plage = 0;

  var ctx = canvas.getContext("2d");


  loadPixels();


  for (var y = 0; y < height; y++) {
    var xoff = 0;

    for (var x = 0; x < width; x++) {
      var index = (x + y * width) * 4;
      //var r = random(255);
      var r = noise(xoff, yoff) * 255;

      pixels[index ] = r;
      pixels[index + 1] = r;
      pixels[index + 2] = r;
      pixels[index + 3] = 255;







         for (var y = 0; y < 50; y++) {


    for (var x = 0; x < 50; x++) {

      for (var i = 0; i <= 4; i++) {



        if ( pixels[index + i] < 255 &&  pixels[index + i] >= 150) //ocean.         
      {

      pixels[index + 0] = 0;
      pixels[index + 1] = 0;
      pixels[index + 2] = 204;
      pixels[index + 3] = 255;

      }
      if ( pixels[index + i] < 151 &&  pixels[index + i] > 147) //plage.
      {

      pixels[index + 0] = 255;
      pixels[index + 1] = 255;
      pixels[index + 2] = 0;
      pixels[index + 3] = 255;


      }
      if ( pixels[index + i] < 148 &&  pixels[index + i] > 100) //plaine.
      {

      pixels[index + 0] = 0;
      pixels[index + 1] = 100;
      pixels[index + 2] = 0;
      pixels[index + 3] = 255;



      }
      if ( pixels[index + i] < 31 &&  pixels[index + i] > 0) //neige.
      {

      pixels[index + 0] = 255;
      pixels[index + 1] = 255;
      pixels[index + 2] = 255;
      pixels[index + 3] = 255;



      }

       if ( pixels[index + i] < 71 &&  pixels[index + i] > 30) //montagne.
      {

      pixels[index + 0] = 0;
      pixels[index + 1] = 0;
      pixels[index + 2] = 0;
      pixels[index + 3] = 255;



      }
      if ( pixels[index + i] < 101 &&  pixels[index + i] > 70) //plaine.
      {

       pixels[index + 0] = 0;
      pixels[index + 1] = 100;
      pixels[index + 2] = 0;
      pixels[index + 3] = 255;



      }
    }
  }


      }





      xoff += inc;


    }

    yoff += inc;



  }

  updatePixels();

  noLoop();

}


Je veux obtenir une carte 'belle', plus esthétique.

J'obtiens une boucle infinie, je ne comprends pas pourquoi :(.
Merci de vos réponses et de votre aide !

23 Réponse

2
112438
, Il a répondu à ma question !

sorry, mais je pense que l'on ne se comprend pas.
soit c moi, soit c toi, qui s'exprime mal...
donc, si c moi qui ait mal compris, je peux pas faire mieux...
++

Default
, Il a répondu à ma question !

C'est bon j'y suis arrivé, merci quand même de votre temps !

Default
, Il a répondu à ma question !

Je met mon code au cas ou il y ai quelqu'un qui bloque ici : (librairie utilisée p5.js)

var inc = 0.0045;

function setup() {

  createCanvas(1300 , 900 );
  pixelDensity(1);


}


function draw()
{

  var ctx = canvas.getContext("2d");
  var lignePix = -1;
  var lignePixH = -1;

  var yoff = 0;

  var plaine = 0;
  var montagne = 0;
  var ocean = 0;
  var plage = 0;
  var tabR = new Array();


  loadPixels();

  for (var y = 0; y < height; y++)
  {
        var xoff = 0;

    for (var x = 0; x < width; x++)
    {

      var index = (x + y * width) * 4;
      //var r = random(255);
      var r = noise(xoff, yoff) * 255;

      tabR[x+(y*width)] = r;
      //console.log(tabR[x]);

      pixels[index ] = r
      pixels[index + 1 ] = r
      pixels[index + 2 ] = r
      pixels[index + 3] = 255;


        if ( r < 255 &&  r >= 170) //ocean.
        {
         pixels[index + 0] = 0;
         pixels[index + 1] = 0;
         pixels[index + 2] = 204;
         ocean++;
        }

         if ( r < 170 &&  r > 85) //plaine.
        {
         pixels[index + 0] = 0;
         pixels[index + 1] = 100;
         pixels[index + 2] = 0;
         plaine++;
         }


          if ( r < 85 &&  r > 0) //montagne.
         {
         pixels[index + 0] = 0;
         pixels[index + 1] = 0;
         pixels[index + 2] = 0;
         montagne++;
         }




          xoff += inc;
    }
        yoff += inc;
        //console.log("r" + r);
  }
  updatePixels();


for(var a = 0; a<height; a+=25)// faire des bons en hauteur
{

  for(var b =0; b< width; b+=25)//faire des bons en largeur
  {

    var vert=0;
    var bleu = 0;
    var noir =0;

    for(var g = 0; g < 25; g++)//on s'occupe pixel par pixel hauteur
    {
        ocean = 0;
        plaine = 0;
        montagne = 0;



            for(var h = 0; h < 25; h++)//on s'occupe pixel par pixel largeur
            {
                var pix = h+(g*width)+b+(a*width);
                var y = tabR[pix];

                if ( y< 255 &&  y >= 170) //ocean.
                {
                  ocean++;
                }

                if ( y < 170 &&  y > 85) //plaine.
                {

                 plaine++;
                }

                if ( y <= 85 &&  y >= 0) //montagne
                {
                 montagne++;
                }

            }

       if(montagne > plaine && montagne > ocean )
       {
          noir++;
       }

       if(plaine > montagne && plaine > ocean)
       {
         vert++;
       }

       if(ocean > plaine && ocean > montagne)
       {
        bleu++;
       }

     }

     /*console.log("montagne " + noir);
           console.log("plaine " + vert );
           console.log("ocean " + bleu);*/
      if(noir>vert && noir>bleu)
      {
      ctx.beginPath();
      ctx.fillStyle = "#996633";
      ctx.fillRect(b,a,25,25);
      ctx.closePath();
      }
     else if(vert>noir && vert>bleu)
      {
      ctx.beginPath();
      ctx.fillStyle = "green";
      ctx.fillRect(b,a,25,25);
      ctx.closePath();
      }
      else if(bleu>vert && bleu>noir)
      {
      ctx.beginPath();
      ctx.fillStyle = "blue";
      ctx.fillRect(b,a,25,25);
      ctx.closePath();
      }
      else {
      ctx.beginPath();
      ctx.fillStyle = "green";
      ctx.fillRect(b,a,25,25);
      ctx.closePath();
      }


  }

}

  noLoop();
}

2