Path Planning Workshop

by tomerwei

JavaScript

let step = 40;
var grid = undefined;
var planner = undefined; 
const epsilon = 0.001;

// taken from https://codereview.stackexchange.com/questions/114702/drawing-a-grid-on-canvas
var drawGrid = function(ctx, w, h, step) {
    ctx.beginPath(); 
        for (var x=0;x<=w;x+=step) {
                ctx.moveTo(x, 0);
                ctx.lineTo(x, h);
        }
        // set the color of the line
        ctx.strokeStyle = 'rgb(255,0,0)';
        ctx.lineWidth = 1;
        // the stroke will actually paint the current path 
        ctx.stroke(); 
        // for the sake of the example 2nd path
        ctx.beginPath(); 
        for (var y=0;y<=h;y+=step) {
                ctx.moveTo(0, y);
                ctx.lineTo(w, y);
        }
        // set the color of the line
        ctx.strokeStyle = 'rgb(20,20,20)';
        // just for fun
        ctx.lineWidth = 1;
        // for your original question - you need to stroke only once
        ctx.stroke();
    if(grid != undefined)
    {
        ctx.font = '8px serif';    
        for (var x=step/2;x<=grid.w;x+=step) {
            for (var y=step/2;y<=grid.h;y+=step) {
                var node = grid.getNodeFromPos({ x:x, y:y});
                if(node != undefined && node.distance != undefined)
                {
                    ctx.fillText(node.distance, x, y);    
                }
            }
        }
    } 
};

var Node = function (opt) {
    var opt = opt || {};
    this.x = opt.x;
    this.y = opt.y;
    this.idx = opt.idx;
    this.distance = undefined;
    this.walkable = opt.walkable === undefined ? true : opt.walkable;
    this.flow = undefined;
};

var Grid = function (opt) {
    opt = opt || {};
    this.w = opt.w || 8;
    this.h = opt.h || 6;
    this.nodes = [];
    this.step = undefined;
    this.w_cells = undefined;
    this.h_cells = undefined;
    this.cells_per_row = undefined;

};

var Planner = function (grid) { 
    this.grid = grid; 
}
Planner.prototype.getVelocity = function (agent) {
   ...