Fórum / Tudomány, technika és gazdaság | |
Témaindító: Pontius |
A time crystal
Time crystals sound like talismans from a fantasy novel, but they're actually real quantum objects, generated for the first time in 2017. A time crystal is a unique state of matter, a group of ions lashed together with quantum links such that they shake, or oscillate, together at a repeating period. As long as the conditions they need to exist remain, time crystals become locked into a single moment in time; no matter how much energy gets pumped into them, they don't heat up or increase in entropy — effectively suspending the laws of thermodynamics as they're typically understood.
<!doctype html>
<html>
<body>
<canvas width = "570" height = "570" id = "my_Canvas"></canvas>
<script>
/*============= Creating a canvas ======================*/
var canvas = document.getElementById('my_Canvas');
gl = canvas.getContext('experimental-webgl');
/*========== Defining and storing the geometry ==========*/
var scl=10;
var vertices=new Array(32*32*32*2*3),i=0,j=0;
var colors=new Array(32*32*32*2*3);
for(z=0;z<32;z++)
for(y=0;y<32;y++)
for(x=0;x<32;x++)
if(x==0 || y==0 || z==0)
{
vertices[i++]=x/scl;
vertices[i++]=y/scl;
vertices[i++]=z/scl;
vertices[i++]=x/scl;
vertices[i++]=y/scl;
vertices[i++]=z/scl;
colors[j++]=0;
colors[j++]=0;
colors[j++]=0;
colors[j++]=1;
colors[j++]=1;
colors[j++]=1;
}
// Create and store data into vertex buffer
var vertex_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Create and store data into color buffer
var color_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
/*=================== SHADERS =================== */
var vertCode = 'attribute vec3 position;'+
'uniform mat4 Pmatrix;'+
'uniform mat4 Vmatrix;'+
'uniform mat4 Mmatrix;'+
'uniform float Mtime2;'+
'uniform int Mmode;'+
'uniform vec3 Mpencolor;'+
'attribute vec3 color;'+
'varying vec3 vColor;'+
'float fncFI(float x,float y,float z){'+
' vec3 Pos=vec3(x,0.0,0.0);'+
' float dist=length(Pos);'+
' float k=3.1415926/2.0;'+
' float phase=dist*k - Mtime2;'+
' float fi=-cos(phase);'+
' return fi*0.5;'+
'}'+
'vec3 fncA(float x,float y,float z,float delta){'+
' vec3 Pos=vec3(x,0.0,0.0);'+
' float dist=length(Pos);'+
' float k=3.1415926/2.0;'+
' float phase=(dist + delta)*k -Mtime2;'+
' vec3 Tdir=normalize(Pos);'+
' vec3 Xdir=cross(Tdir,Tdir.yzx);'+
' vec3 Ydir=normalize(cross(Xdir,Tdir));'+
' Xdir =normalize(cross(Tdir,Ydir));'+
' float rotang=acos(0.5/0.866);'+
' vec3 A=Xdir*sin(phase);'+
' A+=Tdir*cos(phase)*cos(rotang);'+
' A+=Ydir*cos(phase)*sin(rotang);'+
' return A*0.866;'+
'}'+
'vec3 fncEgrad(float x,float y,float z){'+
' float dx=0.0001;'+
' float A=fncFI(x,y,z);'+
' float Adx=fncFI(x+dx,y,z);'+
' float Ady=fncFI(x,y+dx,z);'+
' float Adz=fncFI(x,y,z+dx);'+
' vec3 dA=(fncA(x,y,z,0.0)-fncA(x,y,z,-dx))/dx;'+
' vec3 gradFI=vec3((Adx-A)/dx,(Ady-A)/dx,(Adz-A)/dx);'+
' return -gradFI -dA;'+
'}'+
'vec3 curlA(float x,float y,float z){'+
' float dx=0.0001;'+
' vec3 dAx=(fncA(x+dx,y,z,0.0) - fncA(x-dx,y,z,0.0))/(2.0*dx);'+
' vec3 dAy=(fncA(x,y+dx,z,0.0) - fncA(x,y-dx,z,0.0))/(2.0*dx);'+
' vec3 dAz=(fncA(x,y,z+dx,0.0) - fncA(x,y,z-dx,0.0))/(2.0*dx);'+
' vec3 curl=-vec3((dAz.y)-(dAy.z),'+
' (dAx.z)-(dAz.x),'+
' (dAy.x)-(dAx.y));'+
' return curl;'+
'}'+
'void main(void) { '+
' float scalef=0.22;'+
' float x=position.x;'+
' float y=position.y;'+
' float z=position.z;'+
' vec3 dir;'+
' if(Mmode==1) dir=color*fncEgrad(x,y,z);'+
' if(Mmode==2) dir=color*curlA(x,y,z);'+
' if(Mmode==3) dir=color*fncA(x,y,z,0.0);'+
// ' vec3 tang=normalize(vec3(x,0.0,0.0));'+
// ' dir=tang*dot(tang,dir);'+
' gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position+dir*scalef, 1.0);'+
' vColor=Mpencolor;'+
'}';
var fragCode = 'precision mediump float;'+
'varying vec3 vColor;'+
'void main(void) {'+
' gl_FragColor = vec4(vColor, 1.0);'+
'}';
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
var shaderprogram = gl.createProgram();
gl.attachShader(shaderprogram, vertShader);
gl.attachShader(shaderprogram, fragShader);
gl.linkProgram(shaderprogram);
/*======== Associating attributes to vertex shader =====*/
var _Pmatrix = gl.getUniformLocation(shaderprogram, "Pmatrix");
var _Vmatrix = gl.getUniformLocation(shaderprogram, "Vmatrix");
var _Mmatrix = gl.getUniformLocation(shaderprogram, "Mmatrix");
var _Mtime2 = gl.getUniformLocation(shaderprogram, "Mtime2");
var _Mpencolor = gl.getUniformLocation(shaderprogram, "Mpencolor");
var _Mmode = gl.getUniformLocation(shaderprogram, "Mmode");
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
var _position = gl.getAttribLocation(shaderprogram, "position");
gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0);
gl.enableVertexAttribArray(_position);
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
var _color = gl.getAttribLocation(shaderprogram, "color");
gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
gl.enableVertexAttribArray(_color);
gl.useProgram(shaderprogram);
/*==================== MATRIX ====================== */
function get_projection(angle, a, zMin, zMax) {
var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
return [
0.5/ang, 0 , 0, 0,
0, 0.5*a/ang, 0, 0,
0, 0, -(zMax+zMin)/(zMax-zMin), -1,
0, 0, (-2*zMax*zMin)/(zMax-zMin), 0
];
}
var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100);
var mo_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];
var view_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];
view_matrix[14] = view_matrix[14]-6;
/*================= Mouse events ======================*/
var AMORTIZATION = 0.95;
var drag = false;
var old_x, old_y;
var dX = 0, dY = 0;
var mouseDown = function(e) {
drag = true;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
return false;
};
var mouseUp = function(e){
drag = false;
};
var mouseMove = function(e) {
if (!drag) return false;
dX = (e.pageX-old_x)*2*Math.PI/canvas.width,
dY = (e.pageY-old_y)*2*Math.PI/canvas.height;
THETA+= dX;
PHI+=dY;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
};
canvas.addEventListener("mousedown", mouseDown, false);
canvas.addEventListener("mouseup", mouseUp, false);
canvas.addEventListener("mouseout", mouseUp, false);
canvas.addEventListener("mousemove", mouseMove, false);
/*=========================rotation================*/
function rotateX(m, angle) {
var c = Math.cos(angle);
var s = Math.sin(angle);
var mv1 = m[1], mv5 = m[5], mv9 = m[9];
m[1] = m[1]*c-m[2]*s;
m[5] = m[5]*c-m[6]*s;
m[9] = m[9]*c-m[10]*s;
m[2] = m[2]*c+mv1*s;
m[6] = m[6]*c+mv5*s;
m[10] = m[10]*c+mv9*s;
}
function rotateY(m, angle) {
var c = Math.cos(angle);
var s = Math.sin(angle);
var mv0 = m[0], mv4 = m[4], mv8 = m[8];
m[0] = c*m[0]+s*m[2];
m[4] = c*m[4]+s*m[6];
m[8] = c*m[8]+s*m[10];
m[2] = c*m[2]-s*mv0;
m[6] = c*m[6]-s*mv4;
m[10] = c*m[10]-s*mv8;
}
/*=================== Drawing =================== */
var THETA = 0,
PHI = 0;
var time_old = 0;
var animate = function(time) {
var dt = time-time_old;
if (!drag) {
dX *= AMORTIZATION, dY*=AMORTIZATION;
THETA+=dX, PHI+=dY;
}
//set model matrix to I4
mo_matrix[0] = 1, mo_matrix[1] = 0, mo_matrix[2] = 0, mo_matrix[3] = 0,
mo_matrix[4] = 0, mo_matrix[5] = 1, mo_matrix[6] = 0, mo_matrix[7] = 0,
mo_matrix[8] = 0, mo_matrix[9] = 0, mo_matrix[10] = 1, mo_matrix[11] = 0,
mo_matrix[12] = 0, mo_matrix[13] = 0, mo_matrix[14] = 0, mo_matrix[15] = 1;
rotateY(mo_matrix, THETA);
rotateX(mo_matrix, PHI);
time_old = time;
gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.LEQUAL);
gl.clearColor(0.0, 0.0, 0.0, 0.9);
gl.clearDepth(1.0);
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniformMatrix4fv(_Pmatrix, false, proj_matrix);
gl.uniformMatrix4fv(_Vmatrix, false, view_matrix);
gl.uniformMatrix4fv(_Mmatrix, false, mo_matrix);
gl.uniform1f(_Mtime2, time*1e-3);
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
if( 1)// 1 vs 0
{
gl.uniform3f(_Mpencolor, 0.0,0.0,1.0);//blue fncEgrad = E field
gl.uniform1i(_Mmode, 1);
gl.drawArrays(gl.LINES, 0, 32*32*2*3);
gl.uniform3f(_Mpencolor, 1.0,0.0,0.0);//red curlA = B field
gl.uniform1i(_Mmode, 2);
gl.drawArrays(gl.LINES, 0, 32*32*2*3);
}else{
gl.uniform3f(_Mpencolor, 1.0,1.0,0.0);//yellow fncA = vector potential
gl.uniform1i(_Mmode, 2);
gl.drawArrays(gl.LINES, 0, 32*32*2*3);
}
window.requestAnimationFrame(animate);
}
animate(0);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<canvas width = "570" height = "570" id = "my_Canvas"></canvas>
<script>
/*============= Creating a canvas ======================*/
var canvas = document.getElementById('my_Canvas');
gl = canvas.getContext('experimental-webgl');
/*========== Defining and storing the geometry ==========*/
var scl=10;
var vertices=new Array(32*32*32*2*3),i=0,j=0;
var colors=new Array(32*32*32*2*3);
for(z=0;z<32;z++)
for(y=0;y<32;y++)
for(x=0;x<32;x++)
if(x==0 || y==0 || z==0)
{
vertices[i++]=x/scl;
vertices[i++]=y/scl;
vertices[i++]=z/scl;
vertices[i++]=x/scl;
vertices[i++]=y/scl;
vertices[i++]=z/scl;
colors[j++]=0;
colors[j++]=0;
colors[j++]=0;
colors[j++]=1;
colors[j++]=1;
colors[j++]=1;
}
// Create and store data into vertex buffer
var vertex_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Create and store data into color buffer
var color_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
/*=================== SHADERS =================== */
var vertCode = 'attribute vec3 position;'+
'uniform mat4 Pmatrix;'+
'uniform mat4 Vmatrix;'+
'uniform mat4 Mmatrix;'+
'uniform float Mtime2;'+
'uniform int Mmode;'+
'uniform vec3 Mpencolor;'+
'attribute vec3 color;'+
'varying vec3 vColor;'+
'float fncFI(float x,float y,float z){'+
' vec3 Pos=vec3(x,y,z);'+
' float dist=length(Pos);'+
' float k=3.1415926/1.0;'+
' float phase=dist*k - Mtime2;'+
' float fi=-cos(phase);'+
' return fi*0.5;'+
'}'+
'vec3 fncA(float x,float y,float z,float delta){'+
' vec3 Pos=vec3(x,y,z);'+
' float dist=length(Pos);'+
' float k=3.1415926/1.0;'+
' float phase=(dist + delta)*k -Mtime2;'+
' vec3 Tdir=normalize(Pos);'+
' vec3 Xdir=cross(Tdir,vec3(0.0,1.0,0.0));'+
' vec3 Ydir=normalize(cross(Xdir,Tdir));'+
' Xdir =normalize(cross(Tdir,Ydir));'+
' float rotang=acos(0.5/0.866);'+
' vec3 A=Xdir*sin(phase);'+
' A+=Tdir*cos(phase)*cos(rotang);'+
' A+=Ydir*cos(phase)*sin(rotang);'+
' return A*0.866;'+
'}'+
'vec3 fncEgrad(float x,float y,float z){'+
' float dx=0.001;'+
' float A=fncFI(x,y,z);'+
' float Adx=fncFI(x+dx,y,z);'+
' float Ady=fncFI(x,y+dx,z);'+
' float Adz=fncFI(x,y,z+dx);'+
' vec3 dA=(fncA(x,y,z,0.0)-fncA(x,y,z,-dx))/dx;'+
' vec3 gradFI=vec3((Adx-A)/dx,(Ady-A)/dx,(Adz-A)/dx);'+
' return -gradFI -dA;'+
'}'+
'vec3 curlA(float x,float y,float z){'+
' float dx=0.001;'+
' vec3 dAx=(fncA(x+dx,y,z,0.0) - fncA(x-dx,y,z,0.0))/(2.0*dx);'+
' vec3 dAy=(fncA(x,y+dx,z,0.0) - fncA(x,y-dx,z,0.0))/(2.0*dx);'+
' vec3 dAz=(fncA(x,y,z+dx,0.0) - fncA(x,y,z-dx,0.0))/(2.0*dx);'+
' vec3 curl=-vec3((dAz.y)-(dAy.z),'+
' (dAx.z)-(dAz.x),'+
' (dAy.x)-(dAx.y));'+
' return curl;'+
'}'+
'void main(void) { '+
' float scalef=0.07;'+
' float x=position.x;'+
' float y=position.y;'+
' float z=position.z;'+
' vec3 dir;'+
' if(Mmode==1) dir=color*fncEgrad(x,y,z);'+
' if(Mmode==2) dir=color*curlA(x,y,z);'+
' if(Mmode==3) dir=color*fncA(x,y,z,0.0);'+
' gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position+dir*scalef, 1.0);'+
' vColor=Mpencolor;'+
'}';
var fragCode = 'precision mediump float;'+
'varying vec3 vColor;'+
'void main(void) {'+
' gl_FragColor = vec4(vColor, 1.0);'+
'}';
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
var shaderprogram = gl.createProgram();
gl.attachShader(shaderprogram, vertShader);
gl.attachShader(shaderprogram, fragShader);
gl.linkProgram(shaderprogram);
/*======== Associating attributes to vertex shader =====*/
var _Pmatrix = gl.getUniformLocation(shaderprogram, "Pmatrix");
var _Vmatrix = gl.getUniformLocation(shaderprogram, "Vmatrix");
var _Mmatrix = gl.getUniformLocation(shaderprogram, "Mmatrix");
var _Mtime2 = gl.getUniformLocation(shaderprogram, "Mtime2");
var _Mpencolor = gl.getUniformLocation(shaderprogram, "Mpencolor");
var _Mmode = gl.getUniformLocation(shaderprogram, "Mmode");
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
var _position = gl.getAttribLocation(shaderprogram, "position");
gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0);
gl.enableVertexAttribArray(_position);
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
var _color = gl.getAttribLocation(shaderprogram, "color");
gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
gl.enableVertexAttribArray(_color);
gl.useProgram(shaderprogram);
/*==================== MATRIX ====================== */
function get_projection(angle, a, zMin, zMax) {
var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
return [
0.5/ang, 0 , 0, 0,
0, 0.5*a/ang, 0, 0,
0, 0, -(zMax+zMin)/(zMax-zMin), -1,
0, 0, (-2*zMax*zMin)/(zMax-zMin), 0
];
}
var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100);
var mo_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];
var view_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];
view_matrix[14] = view_matrix[14]-6;
/*================= Mouse events ======================*/
var AMORTIZATION = 0.95;
var drag = false;
var old_x, old_y;
var dX = 0, dY = 0;
var mouseDown = function(e) {
drag = true;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
return false;
};
var mouseUp = function(e){
drag = false;
};
var mouseMove = function(e) {
if (!drag) return false;
dX = (e.pageX-old_x)*2*Math.PI/canvas.width,
dY = (e.pageY-old_y)*2*Math.PI/canvas.height;
THETA+= dX;
PHI+=dY;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
};
canvas.addEventListener("mousedown", mouseDown, false);
canvas.addEventListener("mouseup", mouseUp, false);
canvas.addEventListener("mouseout", mouseUp, false);
canvas.addEventListener("mousemove", mouseMove, false);
/*=========================rotation================*/
function rotateX(m, angle) {
var c = Math.cos(angle);
var s = Math.sin(angle);
var mv1 = m[1], mv5 = m[5], mv9 = m[9];
m[1] = m[1]*c-m[2]*s;
m[5] = m[5]*c-m[6]*s;
m[9] = m[9]*c-m[10]*s;
m[2] = m[2]*c+mv1*s;
m[6] = m[6]*c+mv5*s;
m[10] = m[10]*c+mv9*s;
}
function rotateY(m, angle) {
var c = Math.cos(angle);
var s = Math.sin(angle);
var mv0 = m[0], mv4 = m[4], mv8 = m[8];
m[0] = c*m[0]+s*m[2];
m[4] = c*m[4]+s*m[6];
m[8] = c*m[8]+s*m[10];
m[2] = c*m[2]-s*mv0;
m[6] = c*m[6]-s*mv4;
m[10] = c*m[10]-s*mv8;
}
/*=================== Drawing =================== */
var THETA = 0,
PHI = 0;
var time_old = 0;
var animate = function(time) {
var dt = time-time_old;
if (!drag) {
dX *= AMORTIZATION, dY*=AMORTIZATION;
THETA+=dX, PHI+=dY;
}
//set model matrix to I4
mo_matrix[0] = 1, mo_matrix[1] = 0, mo_matrix[2] = 0, mo_matrix[3] = 0,
mo_matrix[4] = 0, mo_matrix[5] = 1, mo_matrix[6] = 0, mo_matrix[7] = 0,
mo_matrix[8] = 0, mo_matrix[9] = 0, mo_matrix[10] = 1, mo_matrix[11] = 0,
mo_matrix[12] = 0, mo_matrix[13] = 0, mo_matrix[14] = 0, mo_matrix[15] = 1;
rotateY(mo_matrix, THETA);
rotateX(mo_matrix, PHI);
time_old = time;
gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.LEQUAL);
gl.clearColor(0.0, 0.0, 0.0, 0.9);
gl.clearDepth(1.0);
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniformMatrix4fv(_Pmatrix, false, proj_matrix);
gl.uniformMatrix4fv(_Vmatrix, false, view_matrix);
gl.uniformMatrix4fv(_Mmatrix, false, mo_matrix);
gl.uniform1f(_Mtime2, time*1e-3);
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
if( 1)// 1 vs 0
{
gl.uniform3f(_Mpencolor, 0.0,0.0,1.0);//blue fncEgrad = E field
gl.uniform1i(_Mmode, 1);
gl.drawArrays(gl.LINES, 0, 32*32*2*3);
gl.uniform3f(_Mpencolor, 1.0,0.0,0.0);//red curlA = B field
gl.uniform1i(_Mmode, 2);
gl.drawArrays(gl.LINES, 0, 32*32*2*3);
}else{
gl.uniform3f(_Mpencolor, 1.0,1.0,0.0);//yellow fncA = vector potential
gl.uniform1i(_Mmode, 2);
gl.drawArrays(gl.LINES, 0, 32*32*2*3);
}
window.requestAnimationFrame(animate);
}
animate(0);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<canvas width = "570" height = "570" id = "my_Canvas"></canvas>
<script>
/*============= Creating a canvas ======================*/
var canvas = document.getElementById('my_Canvas');
gl = canvas.getContext('experimental-webgl');
/*========== Defining and storing the geometry ==========*/
var scl=10;
var vertices=new Array(32*32*32*2*3),i=0,j=0;
var colors=new Array(32*32*32*2*3);
for(z=0;z<32;z++)
for(y=0;y<32;y++)
for(x=0;x<32;x++)
if(x==0 || y==0 || z==0)
{
vertices[i++]=x/scl;
vertices[i++]=y/scl;
vertices[i++]=z/scl;
vertices[i++]=x/scl;
vertices[i++]=y/scl;
vertices[i++]=z/scl;
colors[j++]=0;
colors[j++]=0;
colors[j++]=0;
colors[j++]=1;
colors[j++]=1;
colors[j++]=1;
}
// Create and store data into vertex buffer
var vertex_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Create and store data into color buffer
var color_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
/*=================== SHADERS =================== */
var vertCode = 'attribute vec3 position;'+
'uniform mat4 Pmatrix;'+
'uniform mat4 Vmatrix;'+
'uniform mat4 Mmatrix;'+
'uniform float Mtime2;'+
'uniform int Mmode;'+
'uniform vec3 Mpencolor;'+
'attribute vec3 color;'+
'varying vec3 vColor;'+
'float fncFI(float x,float y,float z){'+
' vec3 Pos=vec3(x,y,z);'+
' float dist=length(Pos);'+
' float k=3.1415926/1.0;'+
' float phase=dist*k - Mtime2;'+
' float fi=-cos(phase);'+
' return fi;'+
'}'+
'vec3 fncA(float x,float y,float z,float delta){'+
' vec3 Pos=vec3(x,y,z);'+
' float dist=length(Pos);'+
' float k=3.1415926/1.0;'+
' float phase=(dist + delta)*k -Mtime2;'+
' vec3 Tdir=normalize(Pos);'+
' vec3 Xdir=cross(Tdir,vec3(0.0,1.0,0.0));'+
' vec3 Ydir=normalize(cross(Xdir,Tdir));'+
' Xdir =normalize(cross(Tdir,Ydir));'+
' vec3 A=Xdir*sin(phase);'+
' A+=Tdir*cos(phase);'+
' return A;'+
'}'+
'vec3 fncEgrad(float x,float y,float z){'+
' float dx=0.001;'+
' float A=fncFI(x,y,z);'+
' float Adx=fncFI(x+dx,y,z);'+
' float Ady=fncFI(x,y+dx,z);'+
' float Adz=fncFI(x,y,z+dx);'+
' vec3 dA=(fncA(x,y,z,0.0)-fncA(x,y,z,-dx))/dx;'+
' vec3 gradFI=vec3((Adx-A)/dx,(Ady-A)/dx,(Adz-A)/dx);'+
' return -gradFI -dA;'+
'}'+
'vec3 curlA(float x,float y,float z){'+
' float dx=0.001;'+
' vec3 dAx=(fncA(x+dx,y,z,0.0) - fncA(x-dx,y,z,0.0))/(2.0*dx);'+
' vec3 dAy=(fncA(x,y+dx,z,0.0) - fncA(x,y-dx,z,0.0))/(2.0*dx);'+
' vec3 dAz=(fncA(x,y,z+dx,0.0) - fncA(x,y,z-dx,0.0))/(2.0*dx);'+
' vec3 curl=-vec3((dAz.y)-(dAy.z),'+
' (dAx.z)-(dAz.x),'+
' (dAy.x)-(dAx.y));'+
' return curl;'+
'}'+
'void main(void) { '+
' float scalef=0.07;'+
' float x=position.x;'+
' float y=position.y;'+
' float z=position.z;'+
' vec3 dir;'+
' if(Mmode==1) dir=color*fncEgrad(x,y,z);'+
' if(Mmode==2) dir=color*curlA(x,y,z);'+
' if(Mmode==3) dir=color*fncA(x,y,z,0.0);'+
' gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position+dir*scalef, 1.0);'+
' vColor=Mpencolor;'+
'}';
var fragCode = 'precision mediump float;'+
'varying vec3 vColor;'+
'void main(void) {'+
' gl_FragColor = vec4(vColor, 1.0);'+
'}';
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
var shaderprogram = gl.createProgram();
gl.attachShader(shaderprogram, vertShader);
gl.attachShader(shaderprogram, fragShader);
gl.linkProgram(shaderprogram);
/*======== Associating attributes to vertex shader =====*/
var _Pmatrix = gl.getUniformLocation(shaderprogram, "Pmatrix");
var _Vmatrix = gl.getUniformLocation(shaderprogram, "Vmatrix");
var _Mmatrix = gl.getUniformLocation(shaderprogram, "Mmatrix");
var _Mtime2 = gl.getUniformLocation(shaderprogram, "Mtime2");
var _Mpencolor = gl.getUniformLocation(shaderprogram, "Mpencolor");
var _Mmode = gl.getUniformLocation(shaderprogram, "Mmode");
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
var _position = gl.getAttribLocation(shaderprogram, "position");
gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0);
gl.enableVertexAttribArray(_position);
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
var _color = gl.getAttribLocation(shaderprogram, "color");
gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
gl.enableVertexAttribArray(_color);
gl.useProgram(shaderprogram);
/*==================== MATRIX ====================== */
function get_projection(angle, a, zMin, zMax) {
var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
return [
0.5/ang, 0 , 0, 0,
0, 0.5*a/ang, 0, 0,
0, 0, -(zMax+zMin)/(zMax-zMin), -1,
0, 0, (-2*zMax*zMin)/(zMax-zMin), 0
];
}
var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100);
var mo_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];
var view_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];
view_matrix[14] = view_matrix[14]-6;
/*================= Mouse events ======================*/
var AMORTIZATION = 0.95;
var drag = false;
var old_x, old_y;
var dX = 0, dY = 0;
var mouseDown = function(e) {
drag = true;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
return false;
};
var mouseUp = function(e){
drag = false;
};
var mouseMove = function(e) {
if (!drag) return false;
dX = (e.pageX-old_x)*2*Math.PI/canvas.width,
dY = (e.pageY-old_y)*2*Math.PI/canvas.height;
THETA+= dX;
PHI+=dY;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
};
canvas.addEventListener("mousedown", mouseDown, false);
canvas.addEventListener("mouseup", mouseUp, false);
canvas.addEventListener("mouseout", mouseUp, false);
canvas.addEventListener("mousemove", mouseMove, false);
/*=========================rotation================*/
function rotateX(m, angle) {
var c = Math.cos(angle);
var s = Math.sin(angle);
var mv1 = m[1], mv5 = m[5], mv9 = m[9];
m[1] = m[1]*c-m[2]*s;
m[5] = m[5]*c-m[6]*s;
m[9] = m[9]*c-m[10]*s;
m[2] = m[2]*c+mv1*s;
m[6] = m[6]*c+mv5*s;
m[10] = m[10]*c+mv9*s;
}
function rotateY(m, angle) {
var c = Math.cos(angle);
var s = Math.sin(angle);
var mv0 = m[0], mv4 = m[4], mv8 = m[8];
m[0] = c*m[0]+s*m[2];
m[4] = c*m[4]+s*m[6];
m[8] = c*m[8]+s*m[10];
m[2] = c*m[2]-s*mv0;
m[6] = c*m[6]-s*mv4;
m[10] = c*m[10]-s*mv8;
}
/*=================== Drawing =================== */
var THETA = 0,
PHI = 0;
var time_old = 0;
var animate = function(time) {
var dt = time-time_old;
if (!drag) {
dX *= AMORTIZATION, dY*=AMORTIZATION;
THETA+=dX, PHI+=dY;
}
//set model matrix to I4
mo_matrix[0] = 1, mo_matrix[1] = 0, mo_matrix[2] = 0, mo_matrix[3] = 0,
mo_matrix[4] = 0, mo_matrix[5] = 1, mo_matrix[6] = 0, mo_matrix[7] = 0,
mo_matrix[8] = 0, mo_matrix[9] = 0, mo_matrix[10] = 1, mo_matrix[11] = 0,
mo_matrix[12] = 0, mo_matrix[13] = 0, mo_matrix[14] = 0, mo_matrix[15] = 1;
rotateY(mo_matrix, THETA);
rotateX(mo_matrix, PHI);
time_old = time;
gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.LEQUAL);
gl.clearColor(0.0, 0.0, 0.0, 0.9);
gl.clearDepth(1.0);
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniformMatrix4fv(_Pmatrix, false, proj_matrix);
gl.uniformMatrix4fv(_Vmatrix, false, view_matrix);
gl.uniformMatrix4fv(_Mmatrix, false, mo_matrix);
gl.uniform1f(_Mtime2, time*1e-3);
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
if( 1)// 1 vs 0
{
gl.uniform3f(_Mpencolor, 0.0,0.0,1.0);//blue fncEgrad = E field
gl.uniform1i(_Mmode, 1);
gl.drawArrays(gl.LINES, 0, 32*32*2*3);
gl.uniform3f(_Mpencolor, 1.0,0.0,0.0);//red curlA = B field
gl.uniform1i(_Mmode, 2);
gl.drawArrays(gl.LINES, 0, 32*32*2*3);
}else{
gl.uniform3f(_Mpencolor, 1.0,1.0,0.0);//yellow fncA = vector potential
gl.uniform1i(_Mmode, 2);
gl.drawArrays(gl.LINES, 0, 32*32*2*3);
}
window.requestAnimationFrame(animate);
}
animate(0);
</script>
</body>
</html>