|
a=0;
spd=0.001;
z_depth=0;
function ani(){
cosa=Math.cos(a);
sina=Math.sin(a);
a+=spd;
if(a<60){
for(o=1;o<64;o++){
t=(o%20)/20;
x=eval(scodeX.value);
y=eval(scodeY.value);
z=eval(rYcode.value);
eval('bn'+o).style.left=(x*cosa+y*sina+z)+401;
eval('bn'+o).style.top=(x*sina-y*cosa+z)+280;
// Give shape some 3D volume
z = Math.sin((x + y) * 0.5) * z_depth + (t - 0.5) * z_depth * 0.5;
}
}else{a=359;}
requestAnimationFrame(ani);
}ani();
a = 0;
spd = 0.001;
z_depth = 80;
function ani(){
const cosa = Math.cos(a);
const sina = Math.sin(a);
a += spd;
for(let o=0;o<64;o++){
let x = cube[o*3];
let y = cube[o*3+1];
let z = cube[o*3+2];
// rotate around Y
let rx = x*cosa - z*sina;
let rz = x*sina + z*cosa;
// extra depth ripple
rz += Math.sin((x+y)*0.03)*z_depth;
// perspective
let scale = 500/(500+rz);
let sx = rx*scale + 400;
let sy = y*scale + 300;
let p = document.getElementById("bn"+o);
if(p){
p.style.left = sx+"px";
p.style.top = sy+"px";
p.style.transform = `scale(${scale})`;
}
}
requestAnimationFrame(ani);
}
ani();
// -------------------------------------
// Funebra Sphere Engine
// Mathematical Point Cloud
// -------------------------------------
const rows = 8;
const cols = 8;
const radius = 60;
let a = 0;
const spd = 0.01;
function ani(){
a += spd;
let p = 0;
for(let i=0;i<rows;i++){
// latitude
let theta = i/(rows-1)*Math.PI;
for(let j=0;j<cols;j++){
// longitude
let phi = j/cols*Math.PI*2;
//-----------------------------------
// Generate sphere mathematically
//-----------------------------------
let x = radius*Math.sin(theta)*Math.cos(phi);
let y = radius*Math.cos(theta);
let z = radius*Math.sin(theta)*Math.sin(phi);
//-----------------------------------
// Funebra deformation
//-----------------------------------
let wave =
Math.sin(theta*8+a)
* Math.cos(phi*6+a);
let r = radius;// + wave*20;
x = r*Math.sin(theta)*Math.cos(phi);
y = r*Math.cos(theta);
z = r*Math.sin(theta)*Math.sin(phi);
//-----------------------------------
// Rotate Y
//-----------------------------------
let rx = x*Math.cos(a)-z*Math.sin(a);
let rz = x*Math.sin(a)+z*Math.cos(a);
//-----------------------------------
// Rotate X
//-----------------------------------
let ry = y*Math.cos(a*0.6)-rz*Math.sin(a*0.6);
rz = y*Math.sin(a*0.6)+rz*Math.cos(a*0.6);
//-----------------------------------
// Perspective
//-----------------------------------
let depth = 500;
let scale = depth/(depth+rz);
let sx = 400 + rx*scale;
let sy = 300 + ry*scale;
//-----------------------------------
// Draw point
//-----------------------------------
let dot = document.getElementById("ringa"+p);
if(dot){
dot.style.left = sx+"px";
dot.style.top = sy+"px";
dot.style.transform =
"translate(-50%,-50%) scale("+scale+")";
dot.style.color="rgb("+((phi+p)*a%32)/32*255+", 255, 0 )";
dot.style.opacity = scale;
}
p++;
}
}
requestAnimationFrame(ani);
}
ani();
// -------------------------------------
// Funebra Sphere Engine
// Mathematical Point Cloud
// -------------------------------------
const rows = 8;
const cols = 8;
const radius = 60;
let a = 0;
const spd = 0.01;
function ani(){
a += spd;
let p = 0;
for(let i=0;i<rows;i++){
// latitude
let theta = i/(rows-1)*Math.PI;
for(let j=0;j<cols;j++){
// longitude
let phi = j/cols*Math.PI*2;
//-----------------------------------
// Generate sphere mathematically
//-----------------------------------
let x = radius*Math.sin(theta)*Math.cos(phi);
let y = radius*Math.cos(theta);
let z = radius*Math.sin(theta)*Math.sin(phi);
//-----------------------------------
// Funebra deformation
//-----------------------------------
let wave =
Math.sin(theta*8+a)
* Math.cos(phi*6+a);
let r = radius;// + wave*20;
x = r*Math.sin(theta)*Math.cos(phi);
y = r*Math.cos(theta);
z = r*Math.sin(theta)*Math.sin(phi);
//-----------------------------------
// Rotate Y
//-----------------------------------
let rx = x*Math.cos(a)-z*Math.sin(a);
let rz = x*Math.sin(a)+z*Math.cos(a);
//-----------------------------------
// Rotate X
//-----------------------------------
let ry = y*Math.cos(a*0.6)-rz*Math.sin(a*0.6);
rz = y*Math.sin(a*0.6)+rz*Math.cos(a*0.6);
//-----------------------------------
// Perspective
//-----------------------------------
let depth = 500;
let scale = depth/(depth+rz);
let sx = 400 + rx*scale;
let sy = 300 + ry*scale;
//-----------------------------------
// Draw point
//-----------------------------------
//-----------------------------------
// Light
//-----------------------------------
// Surface normal (sphere)
let nx = rx;
let ny = ry;
let nz = rz;
let len = Math.sqrt(nx*nx + ny*ny + nz*nz);
nx /= len;
ny /= len;
nz /= len;
// Light direction
let lx = -0.4;
let ly = -0.6;
let lz = 1;
let llen = Math.sqrt(lx*lx+ly*ly+lz*lz);
lx /= llen;
ly /= llen;
lz /= llen;
// Lambert lighting
let light = nx*lx + ny*ly + nz*lz;
light = Math.max(0, light);
// Ambient light
light = 0.25 + light*0.75;
let red = (((phi+p)*a)%32)/32*255*light;
let green = 255*light;
let blue = 80*light;
let dot = document.getElementById("ringa"+p);
if(dot){
dot.style.left = sx+"px";
dot.style.top = sy+"px";
dot.style.transform =
"translate(-50%,-50%) scale("+scale+")";
dot.style.color =
`rgb(${red},${green},${blue})`;
dot.style.opacity = 0.2 + scale*0.8;
}
p++;
}
}
requestAnimationFrame(ani);
}
ani();
| 
