数学与程序交汇出的美丽

JS也能绘出漂亮的动画
服务器君一共花费了1113.182 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

工作一段时间之后,即使做的还是编码的工作,但是几乎已经不和数学打交道了,基本都是和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))/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}
}();

本文地址:http://www.nowamagic.net/librarys/veda/detail/816,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/816

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《JavaScript DOM编程艺术(第2版)》 基思(Jeremy Keith) (作者), 桑布尔斯(Jeffrey Sambells) (作者), 魏忠 (合著者), 杨涛 (译者), 王建桥 (译者), 杨晓云 (译者), 等 (译者)

《JavaScript DOM编程艺术(第2版)》内容简介:JavaScript是Web开发中最重要的一门语言,它强大而优美。无论是桌面开发,还是移动应用。JavaScript都是必须掌握的技术。W3C的DOM标准是开发Web应用的基石。已经得到所有现代浏览器的支持,这使得跨平台Web开发成了一件轻松惬意的事。《JavaScript DOM编程艺术(第2版)》是超级畅销书的升级版,由倡导Web标准的领军人物执笔,揭示了前端开发的真谛,是学习JavaScript和DOM开发的必读之作。

更多计算机宝库...