Logo de Federez - www.federez.net

animated-logo.js

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


function FederezLogo(c)
{
    this.c = c;
    this.points = [{x: 52.0, y: 27.4},
                   {x: 76.8, y: 15.4},
                   {x: 75.2, y: 35.4},
                   {x: 80.0, y: 48.2},
                   {x: 69.6, y: 60.2},
                   {x: 55.2, y: 58.6},
                   {x: 40.8, y: 53.8},
                   {x: 36.0, y: 37.0}]

    for(var i = 0; i < this.points.length; i++)
    {
        var p = this.points[i];
        var dx = p.x - this.r_center.x;
        var dy = p.y - this.r_center.y;
        p.len = Math.sqrt(dx*dx + dy*dy);
        p.vx = Math.random() * 0.5 - 0.25;
        p.vy = Math.random() * 0.5 - 0.25;
    }

    var vis = this;
    c.addEventListener("mousemove", function(e){vis.mouseMove(e)}, false);
    c.addEventListener("mouseout", function(e){vis.mouseLeave(e)}, false);
}
FederezLogo.prototype = {
    d_center: {x: 60.0, y: 44.0},
    r_center: {x: 60.0, y: 37.0},
    colors: ["rgb(99, 195, 211)",
             "rgb(255, 222, 0)",
             "rgb(204, 75, 149)",
             "rgb(246, 162, 18)",
             "rgb(70, 88, 150)",
             "rgb(149, 200, 134)",
             "rgb(234, 92, 33)",
             "rgb(123, 185, 41)"],
    mouseMove: function(event) {
        var pos = this.c.getBoundingClientRect();
        this.mx = event.pageX - pos.left - document.body.scrollLeft;
        this.my = event.pageY - pos.top - document.body.scrollTop;
    },
    mouseLeave: function(event) {
        this.mx = undefined;
        this.my = undefined;
    },
    update: function() {
        var ctx = this.c.getContext("2d");
        ctx.clearRect(0, 0, this.c.width, this.c.height);
        ctx.strokeStyle = "rgb(230, 20, 20)";
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.arc(60, 35, 33, 0, 2*Math.PI, true);
        ctx.stroke();
        for(var i = 0; i < this.points.length; i++)
        {
            var p = this.points[i];

            ctx.beginPath();
            ctx.moveTo(this.d_center.x, this.d_center.y);
            ctx.lineTo(p.x, p.y);
            ctx.stroke();

            ctx.fillStyle = "#FFFFFF";
            ctx.beginPath();
            ctx.arc(p.x, p.y, 7, 0, 2*Math.PI, true);
            ctx.fill();

            ctx.fillStyle = this.colors[i];
            ctx.beginPath();
            ctx.arc(p.x, p.y, 5, 0, 2*Math.PI, true);
            ctx.fill();

            // Ressort
            var dx = p.x - this.r_center.x;
            var dy = p.y - this.r_center.y;
            var len = Math.sqrt(dx*dx + dy*dy);
            var k = -0.002 * (len - p.len)/len;
            var fx = k * dx;
            var fy = k * dy;

            // Répulsion
            for(var j = 0; j < this.points.length; j++)
            {
                if(j == i)
                    continue;
                var pp = this.points[j];
                var pdx = p.x - pp.x;
                var pdy = p.y - pp.y;
                var dist = Math.sqrt(pdx*pdx + pdy*pdy);
                var a = 0.2/(dist*dist*dist);
                fx += a*pdx;
                fy += a*pdy;
            }

            // Répulsion de la souris
            if(this.mx)
            {
                var mdx = p.x - this.mx;
                var mdy = p.y - this.my;
                var dist = Math.sqrt(mdx*mdx + mdy*mdy);
                dist = Math.max(dist, 8);
                var a = 10.0/(dist*dist*dist);
                fx += a*mdx;
                fy += a*mdy;
            }

            // Intégration
            p.vx += fx;
            p.vy += fy;
            p.x += p.vx;
            p.y += p.vy;
        }
        ctx.fillStyle = "#FFFFFF";
        ctx.beginPath();
        ctx.arc(this.d_center.x, this.d_center.y, 5, 0, 2*Math.PI, true);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(this.d_center.x, this.d_center.y, 5, 0, 2*Math.PI, true);
        ctx.stroke();

        var nrg = 0.0;
        for(var i = 0; i < this.points.length; i++)
        {
            var p = this.points[i];
            nrg += p.vx*p.vx + p.vy*p.vy;
        }
        if(nrg > 0.2)
        {
            for(var i = 0; i < this.points.length; i++)
            {
                this.points[i].vx *= 0.98;
                this.points[i].vy *= 0.98;
            }
        }
    }
};

(function(){
    var logos = [];

    function setup_static_logo(c)
    {
        var i = document.createElement("img");
        i.setAttribute("src", "federez-logo.png");
        c.parentNode.replaceChild(i, c);
    }

    function setup_federez_logo(c)
    {
        logos[logos.length] = new FederezLogo(c);
    }

    var elems = document.getElementsByTagName("canvas");
    for(var i = 0; i < elems.length; i++)
    {
        var e = elems[i];
        if(e.className.indexOf("jslogo") != -1)
        {
            if(!e.getContext)
                setup_static_logo(e);
            else
                setup_federez_logo(e);
        }
    }

    if(logos.length > 0)
    {
        function render()
        {
            for(var i = 0; i < logos.length; i++)
                logos[i].update();
            requestAnimFrame(render);
        }
        requestAnimFrame(render);
    }
})();

federez-logo.png

federez-text.png

test.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Test</title>
  </head>
  <body>
    <p><canvas class="jslogo" width="120" height="74"><img src="federez-logo.png"/></canvas></br>
    <img src="federez-text.png"/></p>

    <p><a href="https://gist.github.com/remram44/6330404">Sources sur Github</a></p>

    <script type="text/javascript" src="animated-logo.js"></script>
  </body>
</html>