diff --git a/geo.js b/geo.js
index db20035..77c2ccd 100644
--- a/geo.js
+++ b/geo.js
@@ -1,89 +1,81 @@
//================= Canvas elements
-let canvas = document.getElementById('floor');
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
+let staticLayer = document.getElementById('static');
+staticLayer.width = window.innerWidth;
+staticLayer.height = window.innerHeight;
+
+let beamLineLayer = document.getElementById('beamLine');
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{
+function translate(xy, t){
+ return [xy[0] + t[0], xy[1] + t[1]];
+}
+
+function distance(xy1, xy2){
+ return Math.sqrt( Math.pow(xy1[0]-xy2[0],2) + Math.pow(xy1[1]-xy2[1],2));
+}
+
+class basicShape{
+ constructor(layer){
+ this.layer = layer;
+ this.shape = new Path2D();
+ this.entracePos = [0,0];
+ this.exitPos = [0,0];
+ }
+ clear(){
+ let ctx = this.layer.getContext('2d');
+ ctx.save();
+ ctx.globalCompositeOperation = 'destination-out';
+ ctx.fill(this.shape);
+ ctx.stroke(this.shape);
+ ctx.restore();
+ }
+}
+
+class tandemClass extends basicShape{
constructor(xy, l, w){
- this.l = l;
- this.w = w;
+ super(staticLayer);
+ this.exitPos = [ xy[0], xy[1] - w - l];
- 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);
+ this.shape.rect(xy[0] - w/2, xy[1] - l - w/2, w, l);
+ this.shape.arc(xy[0], xy[1]-w/2, w/2, 0, Math.PI);
+ this.shape.arc(xy[0], xy[1]-w/2 - l, w/2, Math.PI, 2* Math.PI);
}
draw(color){
- this.clear();
-
- let ctx = canvas.getContext('2d');
+ let ctx = this.layer.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{
+class beamLine extends basicShape{
constructor(xy, rad, l){
- this.x = xy[0];
- this.y = xy[1];
- this.len = l;
- this.rad = rad;
-
- this.shape = null;
+ super(beamLineLayer);
this.offset = 0;
-
this.lineWidth = 10;
- this.lineEnd = [xy[0] + this.len, xy[1]];
- this.lineEnd = rotate(this.lineEnd, xy, rad);
+ this.exitPos = [xy[0] + l, xy[1]];
+ this.exitPos = rotate(this.exitPos, xy, rad);
- this.shape = new Path2D();
- this.shape.moveTo(this.x, this.y);
- this.shape.lineTo(this.lineEnd[0], this.lineEnd[1]);
+ this.shape.moveTo(xy[0], xy[1]);
+ this.shape.lineTo(this.exitPos[0], this.exitPos[1]);
}
- exitPos() {return this.lineEnd;}
-
draw(color){
this.clear();
-
- let ctx = canvas.getContext('2d');
+ let ctx = this.layer.getContext('2d');
ctx.setLineDash([10,6]);
ctx.lineDashOffset = -this.offset;
ctx.lineWidth = 10;
@@ -95,120 +87,137 @@ class beamLine{
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();
-
+ //setTimeout(this.march.bind(this), 20);
}
}
-class beamRectElement{
+class beamRectElement extends basicShape{
constructor(xy, rad, l, w){
- this.x = xy[0];
- this.y = xy[1];
- this.l = l;
- this.w = w;
- this.theta = rad;
+ super(staticLayer);
+
+ let A = [xy[0]-w/2, xy[1]];
+ let B = [xy[0]+w/2, xy[1]];
+ let C = [xy[0]+w/2, xy[1] - l];
+ let D = [xy[0]-w/2, xy[1] - l];
+
+ A = rotate(A, xy, rad);
+ B = rotate(B, xy, rad);
+ C = rotate(C, xy, rad);
+ D = rotate(D, xy, rad);
+
+ this.shape.moveTo(A[0], A[1]);
+ this.shape.lineTo(B[0], B[1]);
+ this.shape.lineTo(C[0], C[1]);
+ this.shape.lineTo(D[0], D[1]);
+ this.shape.closePath();
+
+ this.exitPos = [xy[0], xy[1] - l]
}
draw(color){
- delete this.shape;
- this.shape = new Path2D();
+ let ctx = this.layer.getContext('2d');
+ ctx.fillStyle = color;
+ ctx.fill(this.shape);
+ }
+
+}
+
+class beamCircleElement extends basicShape{
+ constructor(xy, r, rad0, rad1){
+ super(staticLayer);
+
+ this.shape.moveTo(xy[0], xy[1]);
+ this.shape.arc(xy[0], xy[1], r, rad0, rad1);
+ let rad = (rad0 + rad1)/2;
+ let l = [r*Math.cos(rad), r*Math.sin(rad)];
+ this.exitPos = [xy[0] + l[0], xy[1] + l[1]]; // the middle of the arc
+ }
+
+ GetExitPos(frac){
+ let rad = rad0 + Math.abs(rad0 - rad1) * frac;
+ let l = [r*Math.cos(rad), r*Math.sin(rad)];
+ return [xy[0] + l[0], xy[1] + l[1]];
+ }
+
+ draw(color){
+ let ctx = this.layer.getContext('2d');
+ ctx.fillStyle = color;
+ ctx.fill(this.shape);
}
}
-let tandem = new tandemClass([500, 500], 200, 100);
+class BeamSpilter extends basicShape{
+ constructor(xy, r, rad){
+ super(staticLayer);
-tandem.draw('green');
+ this.entracePos = xy;
+ this.r = r;
-let b1 = new beamLine(tandem.exitPos(), Math.PI*3/2, 100);
+ let w = r;
+ let l = r/2;
-b1.march('blue');
+ let A = [xy[0]+w/2, xy[1] - l];
+ let B = [xy[0]+w/2, xy[1]];
+ let C = [xy[0]-w/2, xy[1]];
+ let D = [xy[0]-w/2, xy[1] - l];
-//let l1 = new beamRectElement(tandem.exitPos(), 90, 100, 10);
-//l1.draw('red');
+ A = rotate(A, xy, rad);
+ B = rotate(B, xy, rad);
+ C = rotate(C, xy, rad);
+ D = rotate(D, xy, rad);
+
+ this.shape.moveTo(A[0], A[1]);
+ this.shape.lineTo(B[0], B[1]);
+ this.shape.lineTo(C[0], C[1]);
+ this.shape.lineTo(D[0], D[1]);
+
+ this.rad0 = rad - Math.PI*3/4;
+ this.rad1 = rad - Math.PI/4;
+ this.shape.arc(xy[0], xy[1], r, this.rad0 , this.rad1);
+ }
+
+ GetExitPos(frac){
+ let rad = this.rad0 + Math.abs(this.rad0 - this.rad1) * frac;
+ let l = [this.r*Math.cos(rad), this.r*Math.sin(rad)];
+ return translate(this.entracePos, l);
+ }
+
+ draw(color){
+ let ctx = this.layer.getContext('2d');
+ ctx.fillStyle = color;
+ ctx.fill(this.shape);
+ }
-/*
-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;
+///========================= Sand Box;
+
+let windowSize = [staticLayer.width, staticLayer.height];
+
+let RFSource1 = new beamRectElement([windowSize[0]*0.9, windowSize[1]*0.8], 0, 40, 100);
+let RFSource2 = new beamRectElement(RFSource1.exitPos, 0, 40, 20);
+
+let s1 = new BeamSpilter(translate(RFSource2.exitPos, [0, -100]), 50, Math.PI);
+
+let b1S = new beamLine(RFSource2.exitPos, Math.PI *3/2, 200);
+
+let tandem = new tandemClass(b1S.exitPos, 100, 100);
+let b10 = new beamLine(tandem.exitPos, Math.PI *3/2, 100); b10.offset = 8;
+
+
+RFSource1.draw('Olivedrab');
+RFSource2.draw('Olivedrab');
+b1S.draw('red');
+s1.draw('gold');
+tandem.draw('#782F40');
+b10.draw('red');
+
+
+function lineMotion(){
+ b1S.march('red');
+ b10.march('red');
+ setTimeout(lineMotion, 20);
}
-
-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;
-}
-
-*/
\ No newline at end of file
+lineMotion();
diff --git a/testing.html b/testing.html
index a96f464..e7c1dbc 100644
--- a/testing.html
+++ b/testing.html
@@ -7,19 +7,18 @@
-
+
-
-
+
-
+
+