简明现代魔法 -> web设计理念 -> 数学与代码结合的美丽

数学与代码结合的美丽

2010-12-15

工作一段时间之后,即使做的还是编码的工作,但是几乎已经不和数学打交道了,基本都是和dom在打交道。所以基本不再有可能发现数学的美丽之处了。。(其实说这句话心里也是虚虚的。当时上学的时候高数也是烂的一沓糊涂,唉,往事不堪回首)。

再加上前一段时间一位同仁说:js玩3D能玩出什么呢?不过浪费时间而已...是的,我是同意这句话的,客户端的js的表现基本只能通过操作dom元素来实现。在document文档里面,你怎么去制造视井深度,哪怕是伪造也会有一堆困难,不攻自破。

所以,除了html5支持的canvas画布外,几乎是不可能通过一两个元素就构建出我们所想的视井深度的。哪怕是我们想建一个最简单的基于球体的模型,都不得不通过像素模拟的思想来实现。可是如果是像素模拟,可能吗?等于说需要成千上万个元素才能模拟一个稍微像样的球体模型。。。浏览器表示鸭梨很大很大,浏览器说如果要这样,你还是杀了我吧。

所以,js玩3d,或许真的是浪费时间。。。

可是,请允许我去稍微的浪费时间,因为我还是放不下数学的美丽。哪怕是简单的三角函数,二次函数,三次函数。。。

注:以下所有例子都较为耗资源。


其实这也只是自己闲暇时做的一点自娱自乐。基本没有任何实用性,因为仅仅是上面的那点图案,浏览器已经要承担每次变换500个元素的负担。IE8以下的js引擎就已经显得相当吃力了。

可是我依然把它放上来的原因是我不得不感叹数学的美丽,因为在我它没运行之前,我自己都完全想不到会如此美丽。因为我最开始只是想基于一个最简单的球模型玩一玩的。


变化的效果大家可以自定义,修改调用的接口参数就好了。如:

	BeautifullMath.init(500, function(r){
        return r*r;
    });

第一个参数为生成的dom元素的个数,第二个参数为一个function,可以自定义一些函数曲线。比如上面的二次函数会表现为下面的样子:


感兴趣的同学可以自行修改参数来看看不同的效果:

	BeautifullMath.init(500, function(r){
        return Math.cos(r)*r;
    });

比如:

	BeautifullMath.init(500, function(r){
        return Math.sin(r)-r+r*Math.cos(r*r)+.1
    });

最后可以留下源码:

var BeautifullMath = function () {
    var obj = [], xm = 0, ym = 0, axe = 0, aye = 0, parts = 500, scr, txe, tye, nw, nh;
    var addEvent = function (o, e, f) {
        window.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(e)})
    }
    var resize = function () {
        nw = scr.offsetWidth * .5;
        nh = scr.offsetHeight * .5;
    }
    var init = 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 (var i=0; i<parts; i++) {
            var o = {};
            o.p = document.createElement('span');
            scr.appendChild(o.p);
            
            var r = 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;
            
            var sbr = 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 () {
                var ax = .02 * txe,
                    ay = .02 * tye,
                    cx = Math.cos(ax),
                    sx = Math.sin(ax),
                    cy = Math.cos(ay),
                    sy = Math.sin(ay);
                //rotation
                var  z = 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
                var scale = 1 / (1 + this.z),
                    x = this.x * scale * nh + nw - scale * 2,
                    y = this.y * scale * nh + nh - scale * 2;
                //set style
                var p = this.p.style;
                if (x >= 0 && y >=0 && x < nw * 2 && y < nh * 2) {
                    var c = 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);
                } else p.width = "0px";
            }
        }
    }
    //run function 
    var run = function () {
        var se = 1 / nh;
        txe = (ym - axe) * se;
        tye = (xm - aye) * se;
        axe += txe;
        aye += tye;
        /* ---- anim particles ---- */
        for (var i = 0, o; o = obj[i]; i++) o.transform();    
    }
    return {init:init}
}();
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们