数学之美，您能分享感受吗？
- 内容介绍
- 文章标签
- 相关推荐
本文共计3818个文字，预计阅读时间需要16分钟。
工作一段时间后，即做的还是编码的工作，但几乎已经不再和数学打交道了。基本都和DOM在打交道。所以基本不再有可能发现数学的美丽之处了。（其实说这句话心里也是虚虚的）
工作一段时间之后，即使做的还是编码的工作，但是几乎已经不和数学打交道了，基本都是和dom在打交道。所以基本不再有可能发现数学的美丽之处了。。（其实说这句话心里也是虚虚的。当时上学的时候高数也是烂的一沓糊涂，唉，往事不堪回首）。再加上前一段时间一位同仁说：js玩3D能玩出什么呢？不过浪费时间而已...是的，我是同意这句话的，客户端的js的表现基本只能通过操作dom元素来实现。在document文档里面，你怎么去制造视井深度，哪怕是伪造也会有一堆困难，不攻自破。
所以，除了html5支持的canvas画布外，几乎是不可能通过一两个元素就构建出我们所想的视井深度的。哪怕是我们想建一个最简单的基于球体的模型，都不得不通过像素模拟的思想来实现。可是如果是像素模拟，可能吗？等于说需要成千上万个元素才能模拟一个稍微像样的球体模型。。。浏览器表示鸭梨很大很大，浏览器说如果要这样，你还是杀了我吧。
所以，js玩3d，或许真的是浪费时间。。。
可是，请允许我去稍微的浪费时间，因为我还是放不下数学的美丽。哪怕是简单的三角函数，二次函数，三次函数。。。
注：以下所有例子都较为耗资源。
其实这也只是自己闲暇时做的一点自娱自乐。基本没有任何实用性，因为仅仅是上面的那点图案，浏览器已经要承担每次变换500个元素的负担。IE8以下的js引擎就已经显得相当吃力了。
可是我依然把它放上来的原因是我不得不感叹数学的美丽，因为在我它没运行之前，我自己都完全想不到会如此美丽。因为我最开始只是想基于一个最简单的球模型玩一玩的。
变化的效果大家可以自定义，修改调用的接口参数就好了。如：
returnr*r;
}); 第一个参数为生成的dom元素的个数，第二个参数为一个function，可以自定义一些函数曲线。比如上面的二次函数会表现为下面的样子：
感兴趣的同学可以自行修改参数来看看不同的效果：比如：
BeautifullMath.init(500,function(r){
returnMath.cos(r)*r;
}); 会是下面的样子：
比如：
returnMath.sin(r)-r+r*Math.cos(r*r)+.1
});
最后可以留下源码：
varobj=[],xm=0,ym=0,axe=0,aye=0,parts=500,scr,txe,tye,nw,nh;
varaddEvent=function(o,e,f){
window.addEventListener?o.addEventListener(e,f,false):o.attachEvent('on'+e,function(){f.call(e)})
}
varresize=function(){
nw=scr.offsetWidth*.5;
nh=scr.offsetHeight*.5;
}
varinit=function(n,f){
if(!!n)parts=n;
scr=document.getElementById('screen');
addEvent(document,'mousemove',function(e){
e=e||window.event;
xm=e.clientX;
ym=e.clientY;
});
resize();
addEvent(window,'resize',resize);
__init(f);
setInterval(run,16);
}
var__init=function(f){
for(vari=0;i<parts;i++){
varo={};
o.p=document.createElement('span');
scr.appendChild(o.p);
varr=i/parts,j,a,b;
j=i%(parts*.5);
a=Math.floor(j)/200+(Math.floor(j/2)%10)/5*Math.PI*2;
b=Math.acos(-0.9+(j%4)*0.6);
r=!!f?f(r):r-r*r+.5;
varsbr=Math.sin(b)*r;
o.x=Math.sin(a)*sbr;
o.y=Math.cos(a)*sbr;
o.z=Math.cos(b)*r;
obj.push(o);
o.transform=function(){
varax=.02*txe,
ay=.02*tye,
cx=Math.cos(ax),
sx=Math.sin(ax),
cy=Math.cos(ay),
sy=Math.sin(ay);
//rotation
varz=this.y*sx+this.z*cx;
this.y=this.y*cx+this.z*-sx;
this.z=this.x*-sy+z*cy;
this.x=this.x*cy+z*sy;
//3d
varscale=1/(1+this.z),
x=this.x*scale*nh+nw-scale*2,
y=this.y*scale*nh+nh-scale*2;
//setstyle
varp=this.p.style;
if(x>=0&&y>=0&&x<nw*2&&y<nh*2){
varc=Math.round(256+(-this.z*256));
p.left=Math.round(x)+'px';
p.top=Math.round(y)+'px';
p.width=Math.round(scale*2)+'px';
p.height=Math.round(scale*2)+'px';
p.background='rgb('.concat((c),',',(c),',',(1024-c),')');
p.zIndex=200+Math.floor(-this.z*100);
}elsep.width="0px";
}
}
}
//runfunction
varrun=function(){
varse=1/nh;
txe=(ym-axe)*se;
tye=(xm-aye)*se;
axe+=txe;
aye+=tye;
/*----animparticles----*/
for(vari=0,o;o=obj[i];i++)o.transform();
}
return{init:init}
}();
本文共计3818个文字，预计阅读时间需要16分钟。
工作一段时间后，即做的还是编码的工作，但几乎已经不再和数学打交道了。基本都和DOM在打交道。所以基本不再有可能发现数学的美丽之处了。（其实说这句话心里也是虚虚的）
工作一段时间之后，即使做的还是编码的工作，但是几乎已经不和数学打交道了，基本都是和dom在打交道。所以基本不再有可能发现数学的美丽之处了。。（其实说这句话心里也是虚虚的。当时上学的时候高数也是烂的一沓糊涂，唉，往事不堪回首）。再加上前一段时间一位同仁说：js玩3D能玩出什么呢？不过浪费时间而已...是的，我是同意这句话的，客户端的js的表现基本只能通过操作dom元素来实现。在document文档里面，你怎么去制造视井深度，哪怕是伪造也会有一堆困难，不攻自破。
所以，除了html5支持的canvas画布外，几乎是不可能通过一两个元素就构建出我们所想的视井深度的。哪怕是我们想建一个最简单的基于球体的模型，都不得不通过像素模拟的思想来实现。可是如果是像素模拟，可能吗？等于说需要成千上万个元素才能模拟一个稍微像样的球体模型。。。浏览器表示鸭梨很大很大，浏览器说如果要这样，你还是杀了我吧。
所以，js玩3d，或许真的是浪费时间。。。
可是，请允许我去稍微的浪费时间，因为我还是放不下数学的美丽。哪怕是简单的三角函数，二次函数，三次函数。。。
注：以下所有例子都较为耗资源。
其实这也只是自己闲暇时做的一点自娱自乐。基本没有任何实用性，因为仅仅是上面的那点图案，浏览器已经要承担每次变换500个元素的负担。IE8以下的js引擎就已经显得相当吃力了。
可是我依然把它放上来的原因是我不得不感叹数学的美丽，因为在我它没运行之前，我自己都完全想不到会如此美丽。因为我最开始只是想基于一个最简单的球模型玩一玩的。
变化的效果大家可以自定义，修改调用的接口参数就好了。如：
returnr*r;
}); 第一个参数为生成的dom元素的个数，第二个参数为一个function，可以自定义一些函数曲线。比如上面的二次函数会表现为下面的样子：
感兴趣的同学可以自行修改参数来看看不同的效果：比如：
BeautifullMath.init(500,function(r){
returnMath.cos(r)*r;
}); 会是下面的样子：
比如：
returnMath.sin(r)-r+r*Math.cos(r*r)+.1
});
最后可以留下源码：
varobj=[],xm=0,ym=0,axe=0,aye=0,parts=500,scr,txe,tye,nw,nh;
varaddEvent=function(o,e,f){
window.addEventListener?o.addEventListener(e,f,false):o.attachEvent('on'+e,function(){f.call(e)})
}
varresize=function(){
nw=scr.offsetWidth*.5;
nh=scr.offsetHeight*.5;
}
varinit=function(n,f){
if(!!n)parts=n;
scr=document.getElementById('screen');
addEvent(document,'mousemove',function(e){
e=e||window.event;
xm=e.clientX;
ym=e.clientY;
});
resize();
addEvent(window,'resize',resize);
__init(f);
setInterval(run,16);
}
var__init=function(f){
for(vari=0;i<parts;i++){
varo={};
o.p=document.createElement('span');
scr.appendChild(o.p);
varr=i/parts,j,a,b;
j=i%(parts*.5);
a=Math.floor(j)/200+(Math.floor(j/2)%10)/5*Math.PI*2;
b=Math.acos(-0.9+(j%4)*0.6);
r=!!f?f(r):r-r*r+.5;
varsbr=Math.sin(b)*r;
o.x=Math.sin(a)*sbr;
o.y=Math.cos(a)*sbr;
o.z=Math.cos(b)*r;
obj.push(o);
o.transform=function(){
varax=.02*txe,
ay=.02*tye,
cx=Math.cos(ax),
sx=Math.sin(ax),
cy=Math.cos(ay),
sy=Math.sin(ay);
//rotation
varz=this.y*sx+this.z*cx;
this.y=this.y*cx+this.z*-sx;
this.z=this.x*-sy+z*cy;
this.x=this.x*cy+z*sy;
//3d
varscale=1/(1+this.z),
x=this.x*scale*nh+nw-scale*2,
y=this.y*scale*nh+nh-scale*2;
//setstyle
varp=this.p.style;
if(x>=0&&y>=0&&x<nw*2&&y<nh*2){
varc=Math.round(256+(-this.z*256));
p.left=Math.round(x)+'px';
p.top=Math.round(y)+'px';
p.width=Math.round(scale*2)+'px';
p.height=Math.round(scale*2)+'px';
p.background='rgb('.concat((c),',',(c),',',(1024-c),')');
p.zIndex=200+Math.floor(-this.z*100);
}elsep.width="0px";
}
}
}
//runfunction
varrun=function(){
varse=1/nh;
txe=(ym-axe)*se;
tye=(xm-aye)*se;
axe+=txe;
aye+=tye;
/*----animparticles----*/
for(vari=0,o;o=obj[i];i++)o.transform();
}
return{init:init}
}();