Carte (terrain) de jeu avec Canvas et JavaScript

**toshiba1996** · 15/02/2017, 10h53

Bonjour,
J'ai un petit soucis par rapport a mon code : J'ai envie de créer une carte de jeu vidéo à partir d'une image de bruit. Afin que cela soit plus 'esthétique', j'ai décider de diviser le canvas en grille de 50x50p, et de colorer ces grilles de facons pseudo aléatoire a l'aide du bruit de Perlin.
Je ne comprends pas pourquoi j'ai une erreur par rapport a mon tableau. Voici mon code (J'utilise la librairie P5.js) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
var inc = 0.0075;
 
 
function setup() 
{
  createCanvas(1500, 900);
  pixelDensity(1);
 
}
 
 
 
function draw() 
{
 
 
  var yoff = 0;
  //var largeur = canvas.width;
 
  //var hauteur = canvas.height;
 
 
  var plaine = 0;
  var montagne = 0;
  var ocean = 0;
  var plage = 0; 
 
  var monTab =[[1,2,3],[4,5,6]];
 
  var initX = 0;
  var initY = 0;
 
 
 
 
 
  var ctx = canvas.getContext("2d");
  //fill("yellow");
  //rect(0,0,50,50);
 
  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;
      //alert(r);
      pixels[index ] = r;
      pixels[index + 1] = r;
      pixels[index + 2] = r;
      pixels[index + 3] = 255;
 
 
      xoff += inc;
 
      //console.log(pixels[index]);
      //console.log(pixels[index + 1]);
      //console.log(pixels[index + 2 ]);
      //console.log(pixels[index + 3]);
 
 
 
 
 
    }
 
    yoff += inc;   
 
 
  }
  for (var m = 0; m * 50 < 1500 ;m++)
  {
    monTab[m] = new Array();
  }
 
  //Pour chaque case
  for (var e = 0; e * 50 < 1500 ;e++)
  {
    for (var f = 0; f * 50 < 900 ; f++)
    {
      //On regarde chaque pixel
      for (var g = 0; g < 50; g++)
      {
        for(var h = 0; h < 50; h++)
        {
        console.log("Salut Je suis dans le i");
 
 
          if(pixels[index + 0] < 255 &&  pixels[index + 0] >= 150)
          {
            ocean++;
            //alert("ocean");
          }
 
          else if(pixels[index + 1] < 150 &&  pixels[index + 1] >= 70)
          {
            plaine++;
            //alert("plaine");
          }
 
 
          else if(pixels[index + 2] < 70 &&  pixels[index + 2] >= 1)
          {
 
            montagne++;
            //alert("montagne");
          }
 
         }
        }
 
 
      if(montagne>plaine && montagne>ocean)
      {
         monTab[g][h] = "montagne";
 
 
 
      }
 
      if(ocean>plaine && ocean>montagne)
      {
 
        monTab[g][h] = "ocean";
 
 
      }
 
      if(plaine>ocean && plaine>montagne)
      {
        monTab[g][h] = "plaine";
 
 
      }
      ocean = 0;
      plaine = 0;
      montagne = 0;        
 
 
    }
 
  }
 
 
  for (var g = 0; g * 25 < 100 ;g++)
  {
    console.log(monTab[g][h] ); // h est undefined
    for (var h = 0; h * 25 < 100 ; h++)
    {
 
      console.log(monTab[g][h]);
 
    }
  }
 
  console.log(createCanvas.x);
  console.log("montage : " + montagne);
  console.log("plaine : " + plaine);
  console.log("ocean :" + ocean);
  updatePixels();
 
  noLoop();
 
}

**danielhagnoul** · 15/02/2017, 11h34

Je découvre P5.js, vous avez inverser. Voir : https://p5js.org/reference/#/p5/pixelDensity.

**toshiba1996** · 15/02/2017, 11h37

Je n'ai pas très bien compris ce que j'ai inverser ?

**danielhagnoul** · 15/02/2017, 11h54

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

**toshiba1996** · 15/02/2017, 12h01

Je ne pense pas que ce soit le soucis. J'ai plutôt un problème vis a vis des tableaux a double dimensions que je maîtrise très mal.
Mais merci je modifie ça de suite

**danielhagnoul** · 15/02/2017, 12h26

J'ai essayé d'exécuter votre code. Une fois les erreurs (déclarations et portée de variables) corrigées, on obtient un code qui fonctionne pour un canvas de 150 par 90, mais très très lent.

En simplifiant, j'ai obtenu le code ci-dessous, rapide, mais le rendu est différent.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
  <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
  <script>
    'use strict';
    
    const inc = 0.0075;
    
    function setup(){
      pixelDensity();
      createCanvas( 400, 400 );
    }
    
    function draw(){
      let
        xoff = 0,
        yoff = 0,
        index = 0,
        r = 0;
        
      loadPixels();
      
      for ( let y = 0; y < height; y++ ) {
        
        for ( let x = 0; x < width; x++ ){
          index = ( x + y * width ) * 4;
          r = noise( xoff, yoff ) * 255;
          
          pixels[ index ] = r;
          pixels[ index + 1] = r;
          pixels[ index + 2] = r;
          pixels[ index + 3] = 255;
          
          xoff += inc;
        }
        
        yoff += inc;   
      }
      
      updatePixels();
      noLoop();
    }
    
    document.addEventListener( 'DOMContentLoaded', ev => {
      
    }, false );
    
    window.addEventListener( 'load', ev => {
      
      
    }, false );
  </script>
</head>
<body>
  <main>
 
  </main>
</body>
</html>

**toshiba1996** · 15/02/2017, 15h42

Bonjour,
Déjà merci de votre réponse .
En effet ce n'est pas le rendu espéré ^^. J'aimerai pouvoir isoler mon canvas en cases de 50x50p pour les colorier ensuite individuellement.
Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
var inc = 0.0045;
 
function setup() {
  pixelDensity(1);
  createCanvas(1500 , 900 );
 
 
 
}
 
 
function draw() {
 
  var ctx = canvas.getContext("2d");
 
 
  var yoff = 0;
 
  var plaine = 0;
  var montagne = 0;
  var ocean = 0;
  var plage = 0;
 
  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 + 3] = 255;
 
 
         if ( r < 255 &&  r >= 150) //ocean.     
         {              
         pixels[index + 0] = 0;
         pixels[index + 1] = 0;
         pixels[index + 2] = 
         ocean++;
         }
         if ( r < 151 &&  r > 147) //plage.
         {
 
         pixels[index + 0] = 255;
         pixels[index + 1] = 255;
         pixels[index + 2] = 0;
 
         }
         if ( r < 148 &&  r > 70) //plaine.
         {
 
         pixels[index + 0] = 0;
         pixels[index + 1] = 100;
         pixels[index + 2] 
         plaine++;
         }
         if ( r < 31 && r > 0) //neige.
         {
 
         pixels[index + 0] = 255;
         pixels[index + 1] = 255;
         pixels[index + 2] = 255;
         }
 
          if ( r < 71 &&  r > 30) //montagne.
         {             
         pixels[index + 0] = 0;
         pixels[index + 1] = 0;
         pixels[index + 2] = 0;
         montagne++;
         }
 
 
      xoff += inc;
 
 
    }
 
    yoff += inc;
 
 
 
  }
 
 
 
updatePixels();
 
    if(montagne>plaine && montagne > ocean)
     {
        ctx.beginPath();
       ctx.fillStyle = "black";
       ctx.fillRect(0,0,50,50);
        ctx.closePath();
      }    
      if(plaine>ocean && plaine > ocean)
      {
        ctx.beginPath();
       ctx.fillStyle = "green";
       ctx.fillRect(0,0,50,50);
        ctx.closePath();
      }
      if(ocean>plaine && ocean > montagne)
      {
        ctx.beginPath();
       ctx.fillStyle = "blue";
       ctx.fillRect(0,0,50,50);
        ctx.closePath();
      }
 
 
 
  console.log("montagne " + montagne);
  console.log("plaine " + plaine );
  console.log("ocean " + ocean);
 
 
 
 
  noLoop();
 
}

**NoSmoking** · 15/02/2017, 18h44

Bonjour,

J'aimerai pouvoir isoler mon canvas en cases de 50x50p

dans ce cas pourquoi ne pas passer par des rectangles ?

**danielhagnoul** · 15/02/2017, 23h00

Perlin noise

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
  <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
  <script>
    'use strict';
    
    let yoff = 0.0; // 2nd dimension of perlin noise
    
    function setup() {
      createCanvas( 710, 400 );
      //noLoop();
    }
    
    function draw() {
      background( 51 );
      fill( 255 );
      
      // We are going to draw a polygon out of the wave points
      beginShape(); 
      
      //let xoff = 0;       // Option #1: 2D Noise
      let xoff = yoff; // Option #2: 1D Noise
      
      // Iterate over horizontal pixels
      for ( let x = 0; x <= width; x += 10 ) {
        // Calculate a y value according to noise, map to
        
        // Option #1: 2D Noise
        //let y = map( noise( xoff, yoff ), 0, 1, 200, 300 );
        
        // Option #2: 1D Noise
        let y = map( noise( xoff ), 0, 1, 200, 300 );
        
        // Set the vertex
        vertex( x, y );
        
        // Increment x dimension for noise
        xoff += 0.05;
      }
      
      // increment y dimension for noise
      yoff += 0.01;
      
      vertex( width, height );
      vertex( 0, height );
      endShape( CLOSE );
    }    
 
    document.addEventListener( 'DOMContentLoaded', ev => {
      
    }, false );
    
    window.addEventListener( 'load', ev => {
      
      
    }, false );
  </script>
</head>
<body>
  <main>
 
  </main>
</body>
</html>

**danielhagnoul** · 16/02/2017, 12h06

3D TERRAIN GENERATION WITH PERLIN NOISE IN PROCESSING

Codes : Rainbow-Code/challenges/CC_11_PerlinNoiseTerrain_p5.js/

Vidéo (le code de la vidéo n'est pas à jour)

**toshiba1996** · 16/02/2017, 14h17

Oui du coup j'utilise des rectangles que je colore par la suite, mais d'abord j'aimerai compter le nombre de pixels pour chaque seuillage. Par exemple, pour les pixels compris entre 0 et 50, je compte le nombre de pixels qui sont verts, puis qui sont rouges puis qui sont bleus. Ensuite je prends le plus grand nombre et je colore la case entière dans la couleur (Si bleu > rouge et bleu > vert alors je colore toute la case en bleu). Puis je ferai la meme chose entre 50 et 100 puis 100 et 150 et ainsi de suite.
Voici ce que j'ai commencer a faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
var inc = 0.0045;
 
function setup() {
  pixelDensity(1);
  createCanvas(1500 , 900 );
 
 
 
}
 
 
function draw() {
 
  var ctx = canvas.getContext("2d");
 
 
  var yoff = 0;
 
  var plaine = 0;
  var montagne = 0;
  var ocean = 0;
  var plage = 0;
 
  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 + 3] = 255;
 
 
         if ( r < 255 &&  r >= 150) //ocean.     
         {              
         pixels[index + 0] = 0;
         pixels[index + 1] = 0;
         pixels[index + 2] = 
         ocean++;
         }
         if ( r < 151 &&  r > 147) //plage.
         {
 
         pixels[index + 0] = 255;
         pixels[index + 1] = 255;
         pixels[index + 2] = 0;
 
         }
         if ( r < 148 &&  r > 70) //plaine.
         {
 
         pixels[index + 0] = 0;
         pixels[index + 1] = 100;
         pixels[index + 2] 
         plaine++;
         }
         if ( r < 31 && r > 0) //neige.
         {
 
         pixels[index + 0] = 255;
         pixels[index + 1] = 255;
         pixels[index + 2] = 255;
         }
 
          if ( r < 71 &&  r > 30) //montagne.
         {             
         pixels[index + 0] = 0;
         pixels[index + 1] = 0;
         pixels[index + 2] = 0;
         montagne++;
         }
 
 
      xoff += inc;
 
 
    }
 
    yoff += inc;
 
 
 
  }
 
 
 
updatePixels();
 
    if(montagne>plaine && montagne > ocean)
     {
        ctx.beginPath();
       ctx.fillStyle = "black";
       ctx.fillRect(0,0,50,50);
        ctx.closePath();
      }    
      if(plaine>ocean && plaine > ocean)
      {
        ctx.beginPath();
       ctx.fillStyle = "green";
       ctx.fillRect(0,0,50,50);
        ctx.closePath();
      }
      if(ocean>plaine && ocean > montagne)
      {
        ctx.beginPath();
       ctx.fillStyle = "blue";
       ctx.fillRect(0,0,50,50);
        ctx.closePath();
      }
 
 
 
  console.log("montagne " + montagne);
  console.log("plaine " + plaine );
  console.log("ocean " + ocean);
 
 
 
 
  noLoop();
 
}

**toshiba1996** · 20/02/2017, 20h35

C'est bon, j'ai réussi, voici le résultat pour ceux qui sont bloqués

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
 
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();
}

Carte (terrain) de jeu avec Canvas et JavaScript

JavaScript

Discussions similaires

Partager

Partager