FoxLabDashBoard/geo.js

//================= Canvas elements
let canvas = document.getElementById('floor');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
let colorIndex = 0;

function rotate(xy, center, rad){

  let haha = [xy[0]-center[0], xy[1]-center[1]];

  let kaka = [ haha[0]*Math.cos(rad) - haha[1]*Math.sin(rad),
               haha[0]*Math.sin(rad) + haha[1]*Math.cos(rad)];

  return [ kaka[0] + center[0],
           kaka[1] + center[1]];
}

class tandemClass{
  
  constructor(xy, l, w){
    this.l = l;
    this.w = w;

    this.setPos(xy);
  }

  setPos(xy){
    this.x = xy[0];
    this.y = xy[1];
    delete this.shape;
    this.shape = new Path2D();    
    this.shape.rect(this.x - this.w/2, this.y - this.l - this.w/2, this.w, this.l);
    this.shape.arc(this.x, this.y-this.w/2, this.w/2, 0, Math.PI);
    this.shape.arc(this.x, this.y-this.w/2 - this.l, this.w/2, Math.PI, 2* Math.PI);
  }
  
  draw(color){
    this.clear();
    
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = color;    
    ctx.fill(this.shape);
  }
  
  exitPos(){ return [ this.x, this.y - this.w -this.l];}

  clear(){
    let ctx = canvas.getContext('2d');

    ctx.save();
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fill(this.shape);
    ctx.restore();
    //ctx.clearRect(this.x - this.w/2, this.y - this.l - this.w, this.w, this.l + this.w);
  }
}


class beamLine{
  constructor(xy, rad, l){
    this.x = xy[0];
    this.y = xy[1];
    this.len = l;
    this.rad = rad;

    this.shape = null;
    this.offset = 0;

    this.lineWidth = 10;
    
    this.lineEnd = [xy[0] + this.len, xy[1]]; 
    this.lineEnd = rotate(this.lineEnd, xy, rad);

    this.shape = new Path2D();
    this.shape.moveTo(this.x, this.y);
    this.shape.lineTo(this.lineEnd[0], this.lineEnd[1]);
  }

  exitPos() {return this.lineEnd;}

  draw(color){
    this.clear();

    let ctx = canvas.getContext('2d');
    ctx.setLineDash([10,6]);
    ctx.lineDashOffset = -this.offset;
    ctx.lineWidth = 10;
    ctx.strokeStyle = color;
    ctx.stroke(this.shape);
  }

  march(color){
    this.offset++;
    if( this.offset > 16) this.offset = 0;
    this.draw(color);
    setTimeout(this.march.bind(this), 20);
  }

  clear(){
    let ctx = canvas.getContext('2d');
    ctx.save();
    ctx.globalCompositeOperation = 'destination-out';
    ctx.stroke(this.shape);
    ctx.restore();

  }

}

class beamRectElement{
  constructor(xy, rad, l, w){
    this.x = xy[0];
    this.y = xy[1];
    this.l = l;
    this.w = w;
    this.theta = rad;
  }

  draw(color){
    delete this.shape;
    this.shape = new Path2D();
    
  }
}

let tandem = new tandemClass([500, 500], 200, 100);

tandem.draw('green');

let b1 = new beamLine(tandem.exitPos(), Math.PI*3/2, 100);

b1.march('blue');

//let l1 = new beamRectElement(tandem.exitPos(), 90, 100, 10);
//l1.draw('red');

/*
function drawTandem(x, y, l, w, color){
  
  ctx.beginPath();
  ctx.arc(x, y-w/2, w/2, 0, Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
  
  ctx.beginPath();
  ctx.moveTo(x + w/2, y - w/2 );
  ctx.lineTo(x + w/2, y - w/2 -l);
  ctx.lineTo(x - w/2, y - w/2 -l);
  ctx.lineTo(x - w/2, y - w/2 );
  ctx.closePath();
  ctx.strokeStyle = color;
  ctx.stroke();
  ctx.fillStyle = color;
  ctx.fill();
  
  ctx.beginPath();
  ctx.arc(x, y-w/2 - l, w/2, Math.PI, 2* Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
  
  return [ x, y - w -l];
  
}

function rotation(coor, rad){
  let deg = Math.PI / 180;
  
  let xy = [];
  xy.push(Math.cos( rad * deg ) * coor[0] - Math.sin rad * deg ) * coor[1]);
  xy.push(Math.sin( rad * deg ) * coor[0] + Math.cos rad * deg ) * coor[1]);
  
  return xy;
}

function drawBeamLine(x, y, l, w, rad, color){
  ctx.beginPath();
  let a = rotation([+ w/2, 0], rad);
  let b = rotation([+ w/2, l], rad);
  let c = rotation([- w/2, l], rad);
  let d = rotation([- w/2, 0], rad);
  
  ctx.moveTo(x + a[0], y + a[1]);
  ctx.lineTo(x + b[0], y + b[1]);
  ctx.lineTo(x + c[0], y + c[1]);
  ctx.lineTo(x + d[0], y + d[1]);
  ctx.closePath();
  ctx.strokeStyle = color;
  ctx.stroke();
  ctx.fillStyle = color;
  ctx.fill();
}


let tandemExit = drawTandem(1000, 500, 100, 100, 'red');

drawBeamLine( tandemExit[0], tandemExit[1], 100, 10, 180, 'black');



function drawCircle() {
  // clear the canvas
  // ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(100, 75, 50, 0, 2 * Math.PI);
  ctx.fillStyle = colors[colorIndex];
  ctx.fill();

  colorIndex = (colorIndex + 1) % colors.length;
}

*/