create 2 convas layer, 1 for beam line, 1 for others
This commit is contained in:
Ryan Tang
parent
7089c58254
commit
bbe7d118be
297
geo.js
297
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);
|
||||
|
||||
/*
|
||||
function drawTandem(x, y, l, w, color){
|
||||
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]);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y-w/2, w/2, 0, Math.PI);
|
||||
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();
|
||||
|
||||
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];
|
||||
ctx.fill(this.shape);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function rotation(coor, rad){
|
||||
let deg = Math.PI / 180;
|
||||
///========================= Sand Box;
|
||||
|
||||
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]);
|
||||
let windowSize = [staticLayer.width, staticLayer.height];
|
||||
|
||||
return xy;
|
||||
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;
|
||||
}
|
||||
|
||||
*/
|
||||
lineMotion();
|
||||
|
|
|
|||
32
testing.html
32
testing.html
|
|
@ -8,18 +8,17 @@
|
|||
</head>
|
||||
<style>
|
||||
body{
|
||||
//color : white;
|
||||
background-color : black;
|
||||
}
|
||||
canvas{
|
||||
display:block;
|
||||
//width: 100%;
|
||||
//height: 50%;
|
||||
border : 1px solid;
|
||||
}
|
||||
|
||||
#CanvasArea{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#iframe{
|
||||
|
|
@ -32,17 +31,36 @@
|
|||
border: 1px solid green;
|
||||
}
|
||||
|
||||
#beamLine{
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#static{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#clock{
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body style="background-color:white">
|
||||
<body>
|
||||
|
||||
<span id='clock' style="font-size:30px"></span>
|
||||
<p></p>
|
||||
<div id='clock'></div>
|
||||
|
||||
<iframe src='https://fsunuc.physics.fsu.edu/grafana/' frameborder='2' id="iframe"></iframe>
|
||||
|
||||
<div id="CanvasArea">
|
||||
<canvas id='floor' witdh = "2048" height = "1024" > Your browser doe snot support HTML canvas</canvas>
|
||||
<canvas id='beamLine' width="3840", height="2160" > Your browser doe snot support HTML canvas</canvas>
|
||||
<canvas id='static' width="3840", height="2160" > Your browser doe snot support HTML canvas</canvas>
|
||||
</div>
|
||||
|
||||
<p id='text'></p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user