This is a piece of javascript I wrote that is intended to be ran on idlethumbs.net. The term "Fuck Nick Breckon" is a term of endearment of sorts for Nick Breckon of the Idle Thumbs podcast. The wrapping IIFE takes two parameters: initialSelector: A jquery selector that will be pre-pended to a big list of selectors (if you just want to change th…

breckon.js

(function(initialSelector, otherMessage) {
        //this is a terrible little javascript loading function I wrote a while ago, it works so I use it.
        var loadScript = function(url, callback){
            var _loadScript = function(urlToLoad, internalCallback) {
                var script = document.createElement("script")
                script.type = "text/javascript";
            
                if (script.readyState){  //IE
                    script.onreadystatechange = function() {
                        if (script.readyState == "loaded" ||
                                script.readyState == "complete") {
                            script.onreadystatechange = null;
                            internalCallback();
                        }
                    };
                } else {  //Others
                    script.onload = function(){
                        internalCallback();
                    };
                }
            
                script.src = urlToLoad;
                //document.getElementsByTagName("head")[0].appendChild(script);
                document.documentElement.insertBefore(script, document.documentElement.firstChild);
            };
        
            if (typeof url === 'string') {
                _loadScript(url, callback);
            } else if (typeof url === 'object') {
                url.reverse();
                var scriptToLoad = url.pop();
                var kick = function() {
                    if (url.length === 0) {
                        _loadScript(scriptToLoad, callback);
                    } else {
                        _loadScript(scriptToLoad, function() {
                            scriptToLoad = url.pop();
                            kick();
                        });
                    }
                };
                
                kick();
            }
        }
        
        //Please note, I like Nick Breckon quite a bit, if you have just stumbled upon this gist, "Fuck Nick Breckon"
        //  is a term of endearment of sorts for the podcast "Idle Thumbs".
        var breckon = function() {
            (function($) {
                $(function() {
                    console.log("breckon initialized");
                    //basically I want to fill the canvas with white and draw black text on it. Then for each point that's black, I need to
                    //  push that point into an array. I will then take those points and expand them to 
                    //scaledPoints.push({ x: point.x * (widthOfText / widthOfWindow), y: point.y * (heightOfText / heightOfWindow) });
                    //then once i have an array of points that are relative to the size of the window, i'll
                    /*
                          var zIndex = 0;
                          var eachCallback = function() {
                            var point = scaledPoints.pop();
                            $(this).css({"position": "absolute", "left": point.x + "px", "top": point.y + "px", "z-index": zIndex}); 
                            zIndex += 0.1; 
                          };
                          
                          $("div").each(eachCallback);
                          $("a").each(eachCallback);
                        */
                    //If there are not enough divs on the page, I can either do the same with all the a's etc, but w/e
                
                    var canvas = document.createElement('canvas');
                    document.body.appendChild(canvas);
                    canvas.width = 800;
                    canvas.height = 600;
                    $("body").css("background", "gray");
                
                    var canvasContext = canvas.getContext("2d");
                
                    var windowHeight = $(document).height();
                    var windowWidth = $(document).width();
                    var imageWidth = canvas.width;
                    var imageHeight = canvas.height;
                    var message = "Fuck Nick Breckon";
                    
                    if (otherMessage) {
                        message = otherMessage;
                    }
                    
                    var textSizePX = 40;
                    //fill it with white
                    canvasContext.fillStyle = "white";
                    canvasContext.fillRect(0,0,800,600);
                
                    //draw some black text on it
                    canvasContext.fillStyle = "black";
                    canvasContext.font = textSizePX + "px Calibri";
                
                    // The width of the text will vary with font size. The width is in pixels and is returned as a textMetrics object.
                    var textDimensions = canvasContext.measureText(message);
                    textDimensions.height = canvasContext.measureText("M").width; //this is a hack! and it's only a close approximation (but it actually works pretty well...)
                    
                    var textHeight = textDimensions.height;
                    var textWidth = textDimensions.width;
                
                    // You don't have to draw the text on canvas to measure its width. This is only for reference
                    canvasContext.fillText(message, 0, textHeight);
                
                    var scaleRatio = (windowWidth / textWidth);
                    var imageData = canvasContext.getImageData(0, 0, 800, 600);
                    var pixels = imageData.data;
                    var points = [];
                    var firstPoint = null;
                    
                    for (var x = 0; x < imageWidth; x++) {
                        for (var y = 0; y < imageHeight; y++) {
                            var offset = (y * imageWidth + x) * 4;
                            //pixels[offset] += 10; //red
                            //pixels[offset + 1]; //green
                            //pixels[offset + 2]; //blue
                            //pixels[offset + 3]; //alpha
                            if (pixels[offset] === 0 && pixels[offset + 1] === 0 && pixels[offset + 2] === 0) {
                                if (!firstPoint) {
                                    firstPoint = {
                                        x: (x * scaleRatio),
                                        y: (y * scaleRatio)
                                    };
                                }
                                
                                points.push({
                                    x: (x * scaleRatio) - firstPoint.x,
                                    y: (y * scaleRatio) - firstPoint.y,
                                });
                            }
                        }
                    }
                    
                    if (points.length > 0) {
                        console.log("breckon obtained points");
                    }
                    
                    var zIndex = 0;
                    var currentPointIndex = 0;
                    
                    var selector = 'h4, h3, h2, h1, span, p, pre, li, a, img, div';
                    
                    if (initialSelector) {
                        selector = initialSelector + selector;
                    }
                    
                    var selected = $(selector);
                    var elems = [];
                    var callbackLoop = function() {
                        //if we've run through each of the points, we're done!
                        if (points.length === 0) {
                            console.log("breckon incomplete! No more points!");
                            return;
                        }
                        if (currentPointIndex >= points.length) {
                            currentPointIndex = 0;
                        }
                        
                        //if the list of elements we're working with is empty, then we need to grab it again for our selector.
                        if (elems.length === 0) {
                            elems = selected.toArray();
                            console.log("breckon selected " + elems.length + " elems!");
                        }
                        
                        var $currentElem = $(elems.pop());
                        
                        var point = points[currentPointIndex];
                        currentPointIndex++;
                        
                        var left = $currentElem.offset().left;
                        var top = $currentElem.offset().top;
                        
                        $currentElem.detach();
                        
                        $("body").append($currentElem);
                        
                        $currentElem.css({
                            "position": "absolute",
                            "display": "inline-block",
                            "left": left + "px",
                            "top": top + "px",
                            "z-index": 100000,
                            "overflow": "hidden",
                            "padding": "0px",
                            "margin": "0px",
                            "list-style-type": "none"
                        });
                        
                        //console.log("breckon elem: " + $currentElem.text());
                        //console.log("breckon elem type: " + $currentElem.get(0).tagName);
                
                        $currentElem.animate({
                            "left": point.x + "px",
                            "top": point.y + "px",
                            "height": "10px",
                            "width": "10px"
                        }, {
                            duration: 50,
                            always: callbackLoop
                        });
                        zIndex += 0.1;
                    };
                
                    //kick it off!
                    callbackLoop();
                    
                    $(canvas).remove();
                });
            })(jQuery);
        };
        
        loadScript("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", breckon);
    })();