Bonjour à tous,

Je ne sais pas vraiment si mon problème est un problème d'ordre d'exécution et suis débutant en javascript.
J'ai codé une petite animation (apparition d'hexagones façon ruche) sur un canvas et j'ai besoin de votre aide pour le corriger.
L'animation est visible ici : http://codepen.io/anon/pen/HjCGp

Le problème est que certains hexagones se superposent. On le voit dans la démo car certains sont noirs (deux noirs opacité 0.5 superposés) et d'autres gris (un seul noir opacité 0.5, comme désiré partout).
Je veux éviter ce problème en enregistrant, dans un tableau posTable, l'origine de l'hexagone (le coin supérieure gauche).
A chaque fois que je veux dessiner un hexagone je vérifie que son origine n'est pas présente dans le tableau.

Le script que je poste ci-dessous est long (je m'en excuse) mais les quelques lignes d'explications qui le suivent devraient lever le voile sur ce qui ne va pas.
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
document.addEventListener('DOMContentLoaded', function(){
 
  var canvas = document.getElementById('bgCanvas');
  var context = canvas.getContext('2d');
  canvas.width = document.body.clientWidth;
  canvas.height = Math.max( window.innerHeight, document.body.clientHeight );
 
  function initPosTable( nbTot ){
    posTable = new Array(nbTot);
    for (var i = nbTot - 1; i >= 0; i--) {
      posTable[i] = new Array(2);
    }; 
  }
 
  function drawHexagon( x, y, unit ){
 
    var sin_unit = unit * Math.sin(Math.PI/6); 
    var cos_unit = unit * Math.cos(Math.PI/6);
 
    context.strokeStyle = 'rgba(150,150,150,1)';//+ (0.8 - nbDrawn/nbTot )+')';
    context.shadowBlur = 10;
    context.shadowColor = 'rgba(150, 150, 150, 0.2 )';
    context.lineWidth = 2;
    context.beginPath();
    context.moveTo(x                  , y);
    context.lineTo(x + unit           , y);
    context.lineTo(x + unit + sin_unit, y + cos_unit);
    context.lineTo(x + unit           , y + 2 * cos_unit);
    context.lineTo(x                  , y + 2 * cos_unit);
    context.lineTo(x - sin_unit       , y + cos_unit);
    context.lineTo(x                  , y);
    context.stroke();
    context.fillStyle = 'rgba(0,0,0,0.5)';//+ (0.4 - nbDrawn/nbTot )+')';
    context.fill();
 
 
  }
 
  function drawBrother( x, y, unit ){
 
    //Don't draw what we can't see.
    //Maybe useless. Just to be sure it stops process out of canvas boundaries.
    if ( x < 0 || y < 0 || x > canvas.width || y > canvas.height ) return;
 
    drawHexagon(x,y,unit);
    posTable[nbDrawn][0] = Math.floor(x);
    posTable[nbDrawn][1] = Math.floor(y);
    ++nbDrawn;
 
    setTimeout(function() {
 
      drawSomeBrothers(x, y, unit );
    }, 30);
  }
 
  function checkExist(x, y){
    for ( var i = 0; i < nbDrawn; ++i){
      //Strict position equality not match very well
      if ( ( Math.abs(posTable[i][0] - Math.floor(x)) < 10) 
        && ( Math.abs(posTable[i][1] - Math.floor(y)) < 10) ) {
        return true;
      }
    }
    return false;
  }
 
  function drawSomeBrothers(x, y, unit){
 
    if (nbDrawn < nbTot -1){
      /*At least 2 (direct) brothers per hexagon. More compact. More beautiful.*/
      for (var i = 0; i < 2; ++i ){
        var nextCoo = chooseRandomBrotherToDraw(x,y,unit);
        if (nextCoo[0] || nextCoo[1])
          drawBrother(nextCoo[0], nextCoo[1], unit);
      }
    }
    return;
  }
 
  function shuffle(o){
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
  }
 
  function chooseRandomBrotherToDraw(x,y,unit){
 
    var randomIds = [1,2,3,4,5,6];
    randomIds = shuffle(randomIds);
 
    var sin_unit = unit * Math.sin(Math.PI/6); 
    var cos_unit = unit * Math.cos(Math.PI/6);
 
    var newX = x;
    var newY = y;
 
 
    for ( var i = 0; 
          i < 6 && checkExist(newX, newY); 
          ++i) 
    {
      switch(randomIds[i]){
      case 1: //top left
        newX = x - sin_unit - unit;
        newY = y - cos_unit ;
        break;
      case 2: //top
        newX = x;
        newY = y - 2 * cos_unit;
        break;
      case 3: //top right
        newX = x + sin_unit + unit ;
        newY =  y - cos_unit ;
        break;
      case 4: //bottom right
        newX = x + sin_unit + unit ;
        newY = y + cos_unit ;
        break;
      case 5://bottom
        newX = x;
        newY = y + 2*cos_unit;
        break;
      case 6://bottom left
        newX = x - sin_unit - unit;
        newY = y + cos_unit;
        break;
      default:
        newX = 0;
        newY = 0;
        return;
      }
    };
 
    nextPositionToDraw = new Array(2);
    nextPositionToDraw[0] = newX;
    nextPositionToDraw[1] = newY;
 
    return nextPositionToDraw;
 
  }
 
  function printPos(x,y){
    console.log(Math.floor(x)+","+Math.floor(y)+" n'est pas dans :");
    for(var i = 0; i < nbDrawn; ++i){
      console.log(posTable[i][0]+","+posTable[i][1]);
    }
  }
 
  function main(){
    var nbMin = 50;
    var nbMax = 200;
    nbTot = nbMin + (nbMax - nbMin) * Math.random();
    nbTot = 100//Math.round(nbTot);
    initPosTable(nbTot);
 
    var xFirst = Math.random() * canvas.width;
    var yFirst = Math.random() * canvas.height;    
    var unit = 20 + 40 * Math.random();
 
    nbDrawn = 0;
    drawBrother(xFirst, yFirst, unit);
  }
 
  document.getElementById("trigger").addEventListener( 'mouseover', function(){
    context.clearRect(0, 0, canvas.width, canvas.height);
    main();
  });
});
Un premier hexagone est dessiné, puis je calcule les coordonnées de 2 voisins que je dessine s'ils n'existent pas (et c'est là le problème, ma vérification ne marche pas comme elle devrait), et ainsi de suite jusqu'à ce qu'il y en ait assez. Je pense que le problème peut se situer au moment de l'incrémentation de nbDrawn, comme 2 écritures dans la même case du tableau posTable.

Merci de m'avoir lu,
Coridalement