在javascript中填充六角形區域

Question

我正在嘗試使用此維基百科鏈接中提到的算法構建迷宮生成器：https://en.wikipedia.org/wiki/Maze_generation_algorithm 因爲我試圖練習機器學習，我想使用深度優先搜索算法，並且我有此代碼運作良好，到目前爲止：

mazegenerator.js：

var cells = []; 
var sideofCell = 40; 
var cellh = 40*Math.sin(1.04719755); 
var cellx = 20; 
var past = new Array(); 
var current; 
function setup(){ 
createCanvas(1400,900); 
    for(var i=0;i<20;i++){ 
     for(var j=0;j<10;j++){ 
      var cell = new Cells(i,j); 
      cells.push(cell); 
     } 
    } 
    current=cells[0]; 
} 

function draw(){ 
    background(150,100,180); 
    for(var i=0;i<cells.length;i++){ 
     cells[i].show(); 
    } 
    frameRate(5); 


current.visited = true; 
    var next = current.checkNeighbors(); 
    if(next){ 
     past.push(current); 
     next.visited = true; 
     current = next; 
    }else{ 
     current = past.pop(); 
    } 
    print(current,i); 
    print(current.j); 
} 

function index(i,j){ 
    if(i<0 || j<0 || i>19 || j>9){ 
     return -1; 
    } 
    return j+i*10;} 

function Cells(i,j){ 
    this.i=i; 
    this.j=j; 
    this.visited = false; 
    this.walls = [true,true,true,true,true,true,true,true] ;// Top , Bottom , TopLeft , TopRight , BottomLeft , BottomRight 

    this.show = function(){ 
     var x = this.i*3*cellx+100; 
     if(i==1 || i%2!=0){ 
      var y = this.j*2*cellh+100-cellh; 
     }else{ 
     var y = this.j*2*cellh+100; 
     } 
     strokeWeight(2); 
     stroke(255); 
    fill(0); 
    if(this.walls[0]){ 
    line(x+cellx,y,x+3*cellx,y);//Top Line 
    } 
    if(this.walls[1]){ 

    line(x+cellx,y+cellh*2,x+3*cellx,y+cellh*2);//Bottom Line 
    } 
    if(this.walls[2]){ 

    line(x,y+cellh,x+cellx,y);//TopLeft Line 
    } 
    if(this.walls[3]){ 

    line(x+3*cellx,y,x+4*cellx,y+cellh);//TopRight Line 
    } 
    if(this.walls[4]){ 

    line(x,y+cellh,x+cellx,y+2*cellh);//BottomLeft Line 
    } 
    if(this.walls[5]){ 

    line(x+3*cellx,y+2*cellh,x+4*cellx,y+cellh);//BottomRight Line 
    } 

} 

    this.checkNeighbors = function(){ 
     var neighbors=[]; 
     if(i==1 || i%2!=0){ 
     var topRight = cells[index(i+1,j-1)]; 
     var topLeft = cells[index(i-1,j-1)]; 
     var bottomRight = cells[index(i+1,j)]; 
     var bottomLeft = cells[index(i-1,j)]; 
     }else{ 
     var topRight = cells[index(i+1,j)]; 
     var topLeft = cells[index(i-1,j)]; 
     var bottomRight = cells[index(i+1,j+1)]; 
     var bottomLeft = cells[index(i-1,j+1)]; 
     } 
     var bottom = cells[index(i,j+1)]; 
     var top = cells[index(i,j-1)]; 

     if(topRight && topRight.visited==false){ 
      neighbors.push(topRight); 
     } 
     if(topLeft && topLeft.visited==false){ 
      neighbors.push(topLeft); 
     } 
     if(bottomRight && bottomRight.visited==false){ 
      neighbors.push(bottomRight); 
     } 
     if(bottomLeft && bottomLeft.visited==false){ 
      neighbors.push(bottomLeft); 
     } 
     if(top && top.visited==false){ 
      neighbors.push(top); 
     } 
     if(bottom && bottom.visited==false){ 
      neighbors.push(bottom); 
     } 

     if(neighbors.length>0){ 
      var r=floor(random(0,neighbors.length)); 
      if(neighbors[r]==top){ 
       this.walls[0]=false; 
       neighbors[r].walls[1]=false; 
      }if(neighbors[r]==bottom){ 
       this.walls[1]=false; 
       neighbors[r].walls[0]=false; 
      }if(neighbors[r]==topLeft){ 
       this.walls[2]=false; 
       neighbors[r].walls[5]=false; 
      }if(neighbors[r]==topRight){ 
       this.walls[3]=false; 
       neighbors[r].walls[4]=false; 
      }if(neighbors[r]==bottomLeft){ 
       this.walls[4]=false; 
       neighbors[r].walls[3]=false; 
      }if(neighbors[r]==bottomRight){ 
       this.walls[5]=false; 
       neighbors[r].walls[2]=false; 
      } 
      return neighbors[r]; 
     }else{ 
      return undefined; 
      } 

}} 

我想要做的是什麼顏色的訪問的小區，但由於沒有內置函數來繪製一個六邊形並填寫我不能弄清楚如何填補這些六邊形區域。我認爲可以通過在每邊填充一個矩形來完成一個六邊形，並添加一個圓到中心，但這將是太低效率和long.I'd感謝任何幫助：）（順便說一句，我使用p5.js框架）。

Answer 1

beginShape()和vertex()函數允許您繪製任意形狀，包括六邊形。

這裏有一個小例子：

function setup(){ 
 
    createCanvas(200, 200); 
 
} 
 

 
function draw(){ 
 
    background(64); 
 
    fill(255); 
 
    
 
    beginShape(); 
 

 
    vertex(200, 100); 
 
    vertex(150, 186); 
 
    vertex(50, 186); 
 
    vertex(0, 100); 
 
    vertex(50, 13); 
 
    vertex(150, 13); 
 
    vertex(200, 100); 
 
    
 
    endShape(); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>

更多信息可在the reference找到。