在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找到。