Narcissus Background Application: This is port of Narcissus to the web built for HTML5 and dependent on mouse interaction, Processing.js and jQuery. 09 / 2010 Paste this right after the body tag in your html document to Narcissusify your page.

narcissus.html

    <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type = "text/javascript" src = "http://processingjs.org/content/download/processing-js-1.0.0/processing-1.0.0.min.js"></script>
    <script type = "text/javascript" id  = "narcissus_source">
        function initNarcissus() {
            if(!(window.jQuery && window.jQuery.fn.jquery == '1.3.2')) {
                if(!document.getElementById('narcissus_jquery')) {
                 
                    var jquery = document.createElement('script');
                    jquery.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');
                    jquery.setAttribute('type', 'text/javascript');
                    jquery.setAttribute('id', 'narcissus_jquery');

                    document.getElementsByTagName('head')[0].appendChild(jquery);
                }
                
                if(!document.getElementById('narcissus_processing')) {
                    
                    var pjs = document.createElement('script');
                    pjs.setAttribute('src', 'http://processingjs.org/content/download/processing-js-1.0.0/processing-1.0.0.min.js');
                    pjs.setAttribute('type', 'text/javascript');
                    pjs.setAttribute('id', 'narcissus_processing');
                    
                    document.getElementsByTagName('head')[0].appendChild(pjs);               
                }
                
                if(!document.getElementById('narcissus_background')) {
                    
                    var div = document.createElement('div');
                    div.setAttribute('id', 'narcissus_background');
                
                    var ctx = document.createElement('canvas');
                    ctx.setAttribute('id', 'narcissus_app');
                    ctx.setAttribute('datasrc', 'https://gist.github.com/714217.js?file=Narcissus.pjs');
                
                    div.appendChild(ctx);
                    document.getElementsByTagName('body')[0].appendChild(div);
                }

                setTimeout("initNarcissus()", 50);
            } else {
                setInterval("checkNarcissus()", 500);
            }
        }
        
        function checkNarcissus() {
            console.log("Should be loaded");
        }
        
        initNarcissus();
    </script>
    <style type = "text/css">
        #narcissus_background {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            top:  0;
            left: 0;
            overflow: hidden;
        }

        #narcissus_background canvas {
            width: 100%;
            height: 100%;
        }
    </style>
    <div id = "narcissus_background"><canvas id = "narcissus_app"></canvas></div>