2010-09-08 1st

canvastag

2010-09-08 15:28:32

License: MIT License

Fork: 24

Fav: 13

View: 3934

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 2 lines
HTML 249 lines
CSS 2 lines

google balls

2010-09-08 1st

<!DOCTYPE HTML>
<html>
  
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>
      Google
    </title>
<style>
body{overflow:hidden}
#pdxlogo{position:relative;width:0;margin:0 auto;right:190px;height:160px}
.particle{position:absolute;z-index:10}
.circle{-moz-border-radius:160px;-webkit-border-radius:160px;-khtml-border-radius:160px;border-radius:160px}

</style>
    <script>
           window.pdx = {
             addEvent : function(a, b, c) {
                                        a.addEventListener ? a.addEventListener(b, c, 0) : a.attachEvent("on" + b, c)
                   }

}  
   </script>
  </head>
<body>
<div id="pdxlogo"></div>
<script>
                  (function() {
                                 if (!pdx.doodle) pdx.doodle = {};
        
var animationTimer = 50,    // longer count more particles move
                                    
animationStep = 1,    //smaller number greater amplitude and more particles

animationAmplitude=30,
                                  mouseX = mouseY = 0,
                                        n = o = p = 0,
                                                q = 35, isIE=null;
        pdx.doodle.init = function(){
this.container = document.getElementById("pdxlogo");

window_(0, AddMouseM, function() { return pdx.addEvent });

window_(0, z, function() { return pdx })

};
        
var window_ = function(b, c, d) {
          d() ? c() : b < 20 && setTimeout( function() { window_(b + 1, c, d ) }, b)
        },
AddMouseM = function() { pdx.addEvent(document, "mousemove", GetMpos)
                },

GetMpos = function(ev){ev = !ev ? window.event : ev
            animationTimer  = 50;
            mouseX = ev.clientX - pdx.doodle.container.offsetLeft;
            mouseY = ev.clientY - pdx.doodle.container.offsetTop
           },
            
C = function() {
isIE = (window.target) ? true : false

return [isIE ? window.screenLeft : window.screenX, isIE ? window.screenTop : window.screenY, document.body.clientWidth]
            },
            
z = function() {

shape = [
 
D(202, 78, 9, "ed9d33"), 
D(348, 83, 9, "d44d61"), 
D(256, 69, 9, "4f7af2"), 
D(214, 59, 9, "ef9a1e"), 
D(265, 36, 9, "4976f3"), 
D(300, 78, 9, "269230"), 
D(294, 59, 9, "1f9e2c"), 
D(45,  88, 9, "1c48dd"), 
D(268, 52, 9, "2a56ea"), 
D(73,  83, 9, "3355d8"), 
D(294,  6, 9, "36b641"), 
D(235, 62, 9, "2e5def"), 
D(353, 42, 8, "d53747"), 
D(336, 52, 8, "eb676f"), 
D(208, 41, 8, "f9b125"), 
D(321, 70, 8, "de3646"),
D(8,   60, 8, "2a59f0"),
D(180, 81, 8, "eb9c31"),
D(146, 65, 8, "c41731"),
D(145, 49, 8, "d82038"),
D(246, 34, 8, "5f8af8"),
D(169, 69, 8, "efa11e"),
D(273, 99, 8, "2e55e2"),
D(248,120, 8, "4167e4"),
D(294, 41, 8, "0b991a"),
D(267,114, 8, "4869e3"), 
D(78,  67, 8, "3059e3"),
D(294, 23, 8, "10a11d"),
D(117, 83, 8, "cf4055"),
D(137, 80, 8, "cd4359"), 
D(14,  71, 8, "2855ea"), 
D(331, 80, 8, "ca273c"), 
D(25,  82, 8, "2650e1"), 
D(233, 46, 8, "4a7bf9"), 
D(73,  13, 8, "3d65e7"), 
D(327, 35, 6, "f47875"), 
D(319, 46, 6, "f36764"), 
D(256, 81, 6, "1d4eeb"),
D(244, 88, 6, "698bf1"),
D(194, 32, 6, "fac652"),
D(97,  56, 6, "ee5257"), 
D(105, 75, 6, "cf2a3f"), 
D(42,   4, 6, "5681f5"), 
D(10,  27, 6, "4577f6"),
D(166, 55, 6, "f7b326"),
D(266, 88, 6, "2b58e8"),
D(178, 34, 6, "facb5e"),
D(100, 65, 6, "e02e3d"),
D(343, 32, 6, "f16d6f"),
D(59,   5, 6, "507bf2"), 
D(27,   9, 6, "5683f7"), 
D(233,116, 6, "3158e2"),
D(123, 32, 6, "f0696c"),
D(6,   38, 6, "3769f6"), 
D(63,  62, 6, "6084ef"), 
D(6,   49, 6, "2a5cf4"), 
D(108, 36, 6, "f4716e"), 
D(169, 43, 6, "f8c247"), 
D(137, 37, 6, "e74653"), 
D(318, 58, 6, "ec4147"), 
D(226,100, 5, "4876f1"),
D(101, 46, 5, "ef5c5c"),
D(226,108, 5, "2552ea"),
D(17,  17, 5, "4779f7"), 
D(232, 93, 5, "4b78f1")
];
            
var b = C();
            k = b[0];
            l = b[1];
            m = b[2];
            E()
},

E = function() {
            var b = C(),
                c = b[0],
                d = b[1];
            b = b[2];
            n = c - k;
            o = d - l;
            p = b - m;
            k = c;
            l = d;
            m = b;
            
animationTimer  = Math.max( 0 , animationTimer - animationStep);

c = true;
            for (d = 0; b = shape[d++];) {
              b.update();
              if (c) c = b.i
            }
            q = c ? 250 : 35;
            r = window.setTimeout(E, q)
            },
            
D = function(b, c, d, h) {
            return new F(b, c, d, h)
            },
            
F = function(b, c, d, h) {
this.parent=pdx.doodle.container
            this.x = this.o = b;
            this.y = this.p = c;
            this.k = this.h = d;
            b = animationAmplitude;
            this.a = b * (Math.random() - 0.5);
            this.c = b * (Math.random() - 0.5);
            this.l = 3 + Math.random() * 98;
            this.r = 0.1 + Math.random() * 0.4;
            this.e = 0;
            this.g = 1;
            this.i = false;
            this.d = document.createElement("div");
            this.d.className = "particle  circle";
            this.style = this.d.style;
            this.style.backgroundColor = "#" + h;
            this.parent.appendChild(this.d);

//this.d.onmouseout=function(){return this.parentNode.getElementsByTagName("div").length > 1 ? pdx.doodle.container.removeChild(this) : alert("winner") }

this.update = function() {
              this.x += this.a;
              this.y += this.c;
              this.a = Math.min(50, Math.max(-50, (this.a + (n + p) / this.h) * 0.92));
              this.c = Math.min(50, Math.max(-50, (this.c + o / this.h) * 0.92));
              var e = mouseX - this.x,
                  f = mouseY - this.y,
                  i = Math.sqrt(e * e + f * f);
              e /= i;
              f /= i;
              if (i < animationTimer ) {
                this.a -= e * this.l;
                this.c -= f * this.l;
                this.e += (0.005 - this.e) * 0.4;
                this.g = Math.max(0, this.g * 0.9 - 0.01);
                this.a *= 1 - this.g;
                this.c *= 1 - this.g
              } else {
                this.e += (this.r - this.e) * 0.005;
                this.g = Math.min(1, this.g + 0.03)
              }
              e = this.o - this.x;
              f = this.p - this.y;
              i = Math.sqrt(e * e + f * f);
              this.a += e * this.e;
              this.c += f * this.e;
              this.k = this.h + i / 8;
              this.i = i < 0.3 && this.a < 0.3 && this.c < 0.3;
if (!this.i) {
this.style.width = this.style.height = this.k * 2 + "px";
this.style.left = this.x  + "px";
this.style.top = this.y + "px"

}
       }
}
            
            
            
            
            
            
            
      })();
      pdx.doodle.init()
    </script>
    </div>
    </span>
  </body>

</html>

2010-09-08 1st

google balls <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> Google </title> <style> body{overflow:hidden} #pdxlogo{position:relative;width:0;margin:0 auto;right:190px;height:160px} .particle{position:absolute;z-index:10} .circle{-moz-border-radius:160px;-webkit-border-radius:160px;-khtml-border-radius:160px;border-radius:160px} </style> <script> window.pdx = { addEvent : function(a, b, c) { a.addEventListener ? a.addEventListener(b, c, 0) : a.attachEvent("on" + b, c) } } </script> </head> <body> <div id="pdxlogo"></div> <script> (function() { if (!pdx.doodle) pdx.doodle = {}; var animationTimer = 50, // longer count more particles move animationStep = 1, //smaller number greater amplitude and more particles animationAmplitude=30, mouseX = mouseY = 0, n = o = p = 0, q = 35, isIE=null; pdx.doodle.init = function(){ this.container = document.getElementById("pdxlogo"); window_(0, AddMouseM, function() { return pdx.addEvent }); window_(0, z, function() { return pdx }) }; var window_ = function(b, c, d) { d() ? c() : b < 20 && setTimeout( function() { window_(b + 1, c, d ) }, b) }, AddMouseM = function() { pdx.addEvent(document, "mousemove", GetMpos) }, GetMpos = function(ev){ev = !ev ? window.event : ev animationTimer = 50; mouseX = ev.clientX - pdx.doodle.container.offsetLeft; mouseY = ev.clientY - pdx.doodle.container.offsetTop }, C = function() { isIE = (window.target) ? true : false return [isIE ? window.screenLeft : window.screenX, isIE ? window.screenTop : window.screenY, document.body.clientWidth] }, z = function() { shape = [ D(202, 78, 9, "ed9d33"), D(348, 83, 9, "d44d61"), D(256, 69, 9, "4f7af2"), D(214, 59, 9, "ef9a1e"), D(265, 36, 9, "4976f3"), D(300, 78, 9, "269230"), D(294, 59, 9, "1f9e2c"), D(45, 88, 9, "1c48dd"), D(268, 52, 9, "2a56ea"), D(73, 83, 9, "3355d8"), D(294, 6, 9, "36b641"), D(235, 62, 9, "2e5def"), D(353, 42, 8, "d53747"), D(336, 52, 8, "eb676f"), D(208, 41, 8, "f9b125"), D(321, 70, 8, "de3646"), D(8, 60, 8, "2a59f0"), D(180, 81, 8, "eb9c31"), D(146, 65, 8, "c41731"), D(145, 49, 8, "d82038"), D(246, 34, 8, "5f8af8"), D(169, 69, 8, "efa11e"), D(273, 99, 8, "2e55e2"), D(248,120, 8, "4167e4"), D(294, 41, 8, "0b991a"), D(267,114, 8, "4869e3"), D(78, 67, 8, "3059e3"), D(294, 23, 8, "10a11d"), D(117, 83, 8, "cf4055"), D(137, 80, 8, "cd4359"), D(14, 71, 8, "2855ea"), D(331, 80, 8, "ca273c"), D(25, 82, 8, "2650e1"), D(233, 46, 8, "4a7bf9"), D(73, 13, 8, "3d65e7"), D(327, 35, 6, "f47875"), D(319, 46, 6, "f36764"), D(256, 81, 6, "1d4eeb"), D(244, 88, 6, "698bf1"), D(194, 32, 6, "fac652"), D(97, 56, 6, "ee5257"), D(105, 75, 6, "cf2a3f"), D(42, 4, 6, "5681f5"), D(10, 27, 6, "4577f6"), D(166, 55, 6, "f7b326"), D(266, 88, 6, "2b58e8"), D(178, 34, 6, "facb5e"), D(100, 65, 6, "e02e3d"), D(343, 32, 6, "f16d6f"), D(59, 5, 6, "507bf2"), D(27, 9, 6, "5683f7"), D(233,116, 6, "3158e2"), D(123, 32, 6, "f0696c"), D(6, 38, 6, "3769f6"), D(63, 62, 6, "6084ef"), D(6, 49, 6, "2a5cf4"), D(108, 36, 6, "f4716e"), D(169, 43, 6, "f8c247"), D(137, 37, 6, "e74653"), D(318, 58, 6, "ec4147"), D(226,100, 5, "4876f1"), D(101, 46, 5, "ef5c5c"), D(226,108, 5, "2552ea"), D(17, 17, 5, "4779f7"), D(232, 93, 5, "4b78f1") ]; var b = C(); k = b[0]; l = b[1]; m = b[2]; E() }, E = function() { var b = C(), c = b[0], d = b[1]; b = b[2]; n = c - k; o = d - l; p = b - m; k = c; l = d; m = b; animationTimer = Math.max( 0 , animationTimer - animationStep); c = true; for (d = 0; b = shape[d++];) { b.update(); if (c) c = b.i } q = c ? 250 : 35; r = window.setTimeout(E, q) }, D = function(b, c, d, h) { return new F(b, c, d, h) }, F = function(b, c, d, h) { this.parent=pdx.doodle.container this.x = this.o = b; this.y = this.p = c; this.k = this.h = d; b = animationAmplitude; this.a = b * (Math.random() - 0.5); this.c = b * (Math.random() - 0.5); this.l = 3 + Math.random() * 98; this.r = 0.1 + Math.random() * 0.4; this.e = 0; this.g = 1; this.i = false; this.d = document.createElement("div"); this.d.className = "particle circle"; this.style = this.d.style; this.style.backgroundColor = "#" + h; this.parent.appendChild(this.d); //this.d.onmouseout=function(){return this.parentNode.getElementsByTagName("div").length > 1 ? pdx.doodle.container.removeChild(this) : alert("winner") } this.update = function() { this.x += this.a; this.y += this.c; this.a = Math.min(50, Math.max(-50, (this.a + (n + p) / this.h) * 0.92)); this.c = Math.min(50, Math.max(-50, (this.c + o / this.h) * 0.92)); var e = mouseX - this.x, f = mouseY - this.y, i = Math.sqrt(e * e + f * f); e /= i; f /= i; if (i < animationTimer ) { this.a -= e * this.l; this.c -= f * this.l; this.e += (0.005 - this.e) * 0.4; this.g = Math.max(0, this.g * 0.9 - 0.01); this.a *= 1 - this.g; this.c *= 1 - this.g } else { this.e += (this.r - this.e) * 0.005; this.g = Math.min(1, this.g + 0.03) } e = this.o - this.x; f = this.p - this.y; i = Math.sqrt(e * e + f * f); this.a += e * this.e; this.c += f * this.e; this.k = this.h + i / 8; this.i = i < 0.3 && this.a < 0.3 && this.c < 0.3; if (!this.i) { this.style.width = this.style.height = this.k * 2 + "px"; this.style.left = this.x + "px"; this.style.top = this.y + "px" } } } })(); pdx.doodle.init() </script> </div> </span> </body> </html>

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/seGB/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/canvastag/seGB" title="2010-09-08 1st">2010-09-08 1st - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip