2010-09-04 11 views
10

Ho dato un'occhiata al markup che crea, ovvero un mucchio di atom immagini per gli atomi e uno big background image, che viene usato in modo piuttosto strano per creare i legami.Come viene implementato il doodle di buckyball di Google?

Ci sono alcune cose che non riesco a lavorare fuori:

  1. Qualora il JavaScript è
  2. Ciò che rende i legami nella parte posteriore più stretto
  3. Perché gli atomi hanno anche lo sfondo legame applicata

Ecco ciò che il doodle di google sembrava, per coloro che sono interessati:

doodle

+5

So solo che è pesante come l'inferno, almeno sul mio portatile –

risposta

14

Se si dà un'occhiata al markup, è solo un mucchio di immagini e div con posizione di attributi, formandoli in una sorta di griglia. Questo file: http://www.google.com/logos/2010/buckyball10-hp-bond.png è uno sprite contenente ogni legame, in ogni direzione. Questa immagine è l'atomo: http://www.google.com/logos/2010/buckyball10-hp-atom.png. Il JavaScript che usano anima questi elementi modificandone la posizione.

Il codice JavaScript si trova in un elemento Script subito dopo il logo di Google e il contrassegno Scarabocchio. I legami posteriori appaiono più stretti perché la loro opacità è cambiata per essere leggermente trasparente. Infine, non sembra che gli atomi abbiano lo sfondo del legame. Hanno la loro sprite (cit.)

+0

Bene in iE, Strumenti di sviluppo rivela che anche gli atomi usano lo sfondo del legame. A proposito di chrome, hai ragione. I tag img non hanno uno sfondo. – Eric

+0

Interessante. Sto usando Firefox e anche i tag 'img' non hanno uno sfondo. Però non ho controllato IE. –

10

Ok, ecco il javascript, dopo aver gestito attraverso 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() 

Non è che abbastanza?

Problemi correlati