代码之家  ›  专栏  ›  技术社区  ›  Eric

Google的buckyball doodle是如何实现的?

  •  10
  • Eric  · 技术社区  · 14 年前

    atom 原子的图像,以及 big background image ,这是非常奇怪地用来创造债券。

    1. javascript在哪里
    2. 为什么原子也有键背景

    doodle

    2 回复  |  直到 8 年前
        1
  •  14
  •   Chris Laplante    14 年前

    如果你看一下标记,它只是一堆带有位置属性的图像和div,将它们形成一种网格。此文件: http://www.google.com/logos/2010/buckyball10-hp-bond.png 是一个精灵,包含着每一个键,在每一个方向。这张图是原子: http://www.google.com/logos/2010/buckyball10-hp-atom.png

    JavaScript位于Google徽标和doodle标记后面的脚本元素中。后面的债券显得更窄,因为他们的不透明性被改变为略微透明。最后,看起来原子没有键背景。他们有自己的精灵(如上所述)

        2
  •  10
  •   Eric    14 年前

    好的,这是javascript,在运行完它之后 jsBeautifier

    (function () {
        var a = true,
            c = false;
        try {
            if (!google.doodle) google.doodle = {};
            var aa = -1 / 14,
                ba = Math.PI / 180,
                d = (1 + Math.sqrt(5)) / 2,
                e = 1 / 3,
                k = 2 / 3,
                l = d / 3,
                n = 2 * l,
                o = [
                    [-k, -e - n, -l],
                    [-e, -k - l, -n],
                    [e, -k - l, -n],
                    [k, -e - n, -l],
                    [e, -d, 0],
                    [-e, -d, 0],
                    [-l, -k, -e - n],
                    [-n, -e, -k - l],
                    [-e - n, -l, -k],
                    [-k - l, -n, -e],
                    [-k, -e - n, l],
                    [-e, -k - l, n],
                    [e, -k - l, n],
                    [k, -e - n, l],
                    [-l, -k, e + n],
                    [-n, -e, k + l],
                    [-e - n, -l, k],
                    [-k - l, -n, e],
                    [-d, 0, -e],
                    [-d, 0, e],
                    [-k, e + n, -l],
                    [-e, k + l, -n],
                    [e, k + l, -n],
                    [k, e + n, -l],
                    [e, d, 0],
                    [-e, d, 0],
                    [-l, k, -e - n],
                    [-n, e, -k - l],
                    [-e - n, l, -k],
                    [-k - l, n, -e],
                    [-k, e + n, l],
                    [-e, k + l, n],
                    [e, k + l, n],
                    [k, e + n, l],
                    [-l, k, e + n],
                    [-n, e, k + l],
                    [-e - n, l, k],
                    [-k - l, n, e],
                    [0, -e, -d],
                    [0, e, -d],
                    [l, k, -e - n],
                    [n, e, -k - l],
                    [n, -e, -k - l],
                    [l, -k, -e - n],
                    [k + l, -n, -e],
                    [e + n, -l, -k],
                    [0, -e, d],
                    [0, e, d],
                    [l, k, e + n],
                    [n, e, k + l],
                    [n, -e, k + l],
                    [l, -k, e + n],
                    [k + l, -n, e],
                    [e + n, -l, k],
                    [k + l, n, -e],
                    [e + n, l, -k],
                    [k + l, n, e],
                    [e + n, l, k],
                    [d, 0, -e],
                    [d, 0, e]
                ],
                q = [
                    [0, 1],
                    [0, 5],
                    [0, 9],
                    [1, 2],
                    [1, 6],
                    [2, 3],
                    [2, 43],
                    [3, 4],
                    [3, 44],
                    [4, 5],
                    [4, 13],
                    [5, 10],
                    [6, 7],
                    [6, 38],
                    [7, 8],
                    [7, 27],
                    [8, 9],
                    [8, 18],
                    [9, 17],
                    [10, 11],
                    [10, 17],
                    [11, 12],
                    [11, 14],
                    [12, 13],
                    [12, 51],
                    [13, 52],
                    [14, 15],
                    [14, 46],
                    [15, 16],
                    [15, 35],
                    [16, 17],
                    [16, 19],
                    [18, 19],
                    [18, 28],
                    [19, 36],
                    [20, 21],
                    [20, 25],
                    [20, 29],
                    [21, 22],
                    [21, 26],
                    [22, 23],
                    [22, 40],
                    [23, 24],
                    [23, 54],
                    [24, 25],
                    [24, 33],
                    [25, 30],
                    [26, 27],
                    [26, 39],
                    [27, 28],
                    [28, 29],
                    [29, 37],
                    [30, 31],
                    [30, 37],
                    [31, 32],
                    [31, 34],
                    [32, 33],
                    [32, 48],
                    [33, 56],
                    [34, 35],
                    [34, 47],
                    [35, 36],
                    [36, 37],
                    [38, 39],
                    [38, 43],
                    [39, 40],
                    [40, 41],
                    [41, 42],
                    [41, 55],
                    [42, 43],
                    [42, 45],
                    [44, 45],
                    [44, 52],
                    [45, 58],
                    [46, 47],
                    [46, 51],
                    [47, 48],
                    [48, 49],
                    [49, 50],
                    [49, 57],
                    [50, 51],
                    [50, 53],
                    [52, 53],
                    [53, 59],
                    [54, 55],
                    [54, 56],
                    [55, 58],
                    [56, 57],
                    [57, 59],
                    [58, 59]
                ],
                r, s, t, u, v, z, A, B, da = 0,
                C = 0,
                D = [],
                E = [],
                F = [],
                G = 0,
                H = 0,
                I, J = 0,
                K = 0,
                L = 0,
                M = 0,
                N = 0,
                O = 0,
                P = 0,
                Q = 0,
                R, S = c,
                T = c,
                U = a,
                V, W, ea, fa, ha = function () {
                    if (S) {
                        var b = C - 20;
                        if (Math.abs(b) > 0.01) {
                            H += -0.5 * b;
                            H *= 0.6;
                            C += H;
                            if (C < 0) C = 0
                        } else C = 20;
                        var f = J - L,
                            g = K - M;
                        if (b = I && Math.sqrt(J * J + K * K) < 35) {
                            N += f;
                            O += g
                        } else {
                            if (R) {
                                Q = Math.min(20, Math.sqrt(f * f + g * g));
                                P = Math.atan2(g, f)
                            }
                            N += Math.cos(P) * Q;
                            O += Math.sin(P) * Q;
                            Q = Math.max(1, Q * 0.97)
                        }
                        var h = N * 0.4;
                        g = O * 0.4;
                        N -= h;
                        O -= g;
                        f = o;
                        var i = Math.sqrt(h * h + g * g);
                        if (i == 0) o = f;
                        else {
                            g = g / i;
                            h = -h / i;
                            i = i * ba;
                            var w = 1 - Math.cos(i),
                                x = Math.sin(i),
                                j = g * h;
                            i = 1 + w * (g * g - 1);
                            j = w * j;
                            var m = h * x,
                                y = j,
                                ka = 1 + w * (h * h - 1),
                                la = -g * x,
                                ma = -h * x;
                            x = g * x;
                            w = 1 + w * -1;
                            for (var ca = [], na = 0, p; p = f[na++];) {
                                g = p[0];
                                h = p[1];
                                p = p[2];
                                ca.push([i * g + j * h + m * p, y * g + ka * h + la * p, ma * g + x * h + w * p])
                            }
                            o = ca
                        }
                        L = J;
                        M = K;
                        R = b;
                        b = o;
                        f = [];
                        for (g = 0; h = b[g++];) {
                            i = 3.8 / (3.8 + h[2]);
                            f.push([h[0] * i, h[1] * i, i])
                        }
                        b = f;
                        for (f = 0; i = b[f]; ++f) {
                            g = i[0] * C;
                            h = i[1] * C;
                            j = i[2] * 4;
                            m = D[f];
                            m.width = j;
                            m.height = j;
                            m.style.left = 143 + g - j / 2 + "px";
                            m.style.top = 70 + h - j / 2 + "px";
                            m.style.zIndex = i[2] > 1 ? "4" : "1";
                            ga(m, i[2]);
                            T && r.appendChild(m)
                        }
                        T = c;
                        for (f = 0; g = q[f]; ++f) {
                            i = b[g[0]];
                            j = b[g[1]];
                            if (i && j) {
                                g = (i[0] + j[0]) / 2 * C;
                                h = (i[1] + j[1]) / 2 * C;
                                m = (i[2] + j[2]) / 2;
                                y = E[f];
                                y.l((i[0] - j[0]) * C, (i[1] - j[1]) * C);
                                y.position(g, h);
                                y.a.style.zIndex = m > 1 ? "3" : "0";
                                ga(y.a, m)
                            }
                        }
                    } else {
                        f = da++ * aa;
                        b = 143 + Math.sin(f) * 20;
                        f = 70 + Math.cos(f) * 20;
                        B.style.left = b + "px";
                        B.style.top = f + "px";
                        if (U && A) {
                            r.appendChild(B);
                            U = c
                        }
                        F[G].m(b + Math.random() * 2, f + Math.random() * 2);
                        G = modulo(++G, F.length);
                        for (b = 0; f = F[b++];) f.i()
                    }
                },
                X = function () {
                    if (!S) {
                        T = S = a;
                        google.dom.remove(B);
                        for (var b = 0, f; f = F[b++];) f.h();
                        Q = Math.random() * 20;
                        P = Math.random() * Math.PI
                    }
                },
                Y = function () {
                    this.d = this.e = 35;
                    this.c = c;
                    this.a = document.createElement("div");
                    this.a.className = "logo-bond";
                    this.a.style.background = "url(" + s.src + ")"
                };
            Y.prototype.position = function (b, f) {
                this.a.style.left = 143 + b - this.e / 2 + "px";
                this.a.style.top = 70 + f - this.d / 2 + "px";
                if (!this.c) {
                    r.appendChild(this.a);
                    this.c = a
                }
            };
            Y.prototype.l = function (b, f) {
                var g = modulo(-Math.atan2(f, b), Math.PI),
                    h = Math.PI / 90;
                h = Math.round(g / h) * 35;
                g = 0 - (35 - this.e) / 2;
                h = h - (35 - this.d) / 2;
                this.a.style.backgroundPosition = g + "px " + h + "px";
                this.e = Math.max(5, Math.abs(b));
                this.d = Math.max(5, Math.abs(f));
                this.a.style.width = this.e + "px";
                this.a.style.height = this.d + "px"
            };
            var Z = function () {
                this.c = this.g = c;
                this.a = document.createElement("div");
                this.a.className = "logo-dust"
            };
            Z.prototype.m = function (b, f) {
                this.g = a;
                this.a.style.top = f + "px";
                this.a.style.left = b + "px";
                this.opacity = 1;
                if (!this.c) {
                    r.appendChild(this.a);
                    this.c = a
                }
            };
            Z.prototype.i = function () {
                if (this.g) {
                    this.opacity -= 0.02;
                    this.opacity <= 0 ? this.h() : ia(this.a, this.opacity, c)
                }
            };
            Z.prototype.h = function () {
                this.a.style.display = "none";
                google.dom.remove(this.a);
                this.g = c
            };
            var ja = function (b) {
                I = a;
                J = (b.clientX || b.pageX || 0) - r.offsetLeft - 143;
                K = (b.clientY || b.pageY || 0) - r.offsetTop - 70;
                t && I && Math.sqrt(J * J + K * K) < 30 && X()
            };
            eval("function modulo(a,n){return a" + "%%".charAt(0) + "n;}");
            var oa = function () {
                var b = document.createElement("img");
                b.src = z.src;
                b.border = 0;
                b.style.position = "absolute";
                return b
            },
                ia = function (b, f, g) {
                    b.style.opacity = f;
                    if (W) if (f < 0.6) {
                        b.style.filter = "alpha(opacity=" + f * 100 + ")";
                        if (g) b.style.backgroundImage = "url(" + u.src + ")"
                    } else {
                        b.style.filter = "";
                        if (g) b.style.backgroundImage = "url(" + s.src + ")"
                    }
                },
                ga = function (b, f) {
                    var g = f > 1 ? 1 : Math.pow(f, 4);
                    ia(b, g, a)
                };
            google.doodle.init = function () {
                if (window.location.href.indexOf("#") == -1) if (r = document.getElementById("hplogo")) if (!fa) {
                    fa = a;
                    google.j && google.j.en && $(100, pa, function () {
                        return google.rein && google.dstr
                    });
                    $(100, qa, function () {
                        return google.listen && google.browser && google.dom
                    })
                }
            };
            var $ = function (b, f, g) {
                if (g()) f();
                else b < 200 && window.setTimeout(function () {
                    $(b + 1, f, g)
                }, b)
            },
                pa = function () {
                    if (!google.doodle.k) {
                        google.doodle.k = a;
                        google.rein.push(google.doodle.init);
                        google.dstr.push(ra)
                    }
                },
                qa = function () {
                    W = google.browser.engine.IE;
                    sa();
                    google.listen(document, "mousemove", ja);
                    for (var b = 0; o[b++];) D.push(oa());
                    for (b = 0; q[b++];) E.push(new Y);
                    for (; F.length < 40;) F.push(new Z);
                    B = oa();
                    B.width = B.height = 7;
                    V = window.setInterval(ha, 30);
                    ea = window.setTimeout(ta, 5E3)
                },
                ta = function () {
                    if (t) X();
                    else v = a
                },
                sa = function () {
                    z = new Image;
                    z.onload = function () {
                        A = a
                    };
                    z.src = "/logos/2010/buckyball10-hp-atom.png";
                    if (W) {
                        u = new Image;
                        u.onload = function () {};
                        u.src = "/logos/2010/buckyball10-hp-bond-ie.png"
                    }
                    s = new Image;
                    s.onload = function () {
                        t = a;
                        v && X()
                    };
                    s.src = "/logos/2010/buckyball10-hp-bond.png"
                },
                ra = function () {
                    google.unlisten(document, "mousemove", ja);
                    window.clearInterval(V);
                    window.clearTimeout(ea)
                }
        } catch (ua) {
            google.ml(ua, c, {
                _sn: "BKY"
            })
        };
    })();
    google.doodle.init()
    

    推荐文章