robotron.js

var movemargin = 40;

var rainbowColors = [ "#FF0000", "#FF4000", "#FF8000", "#FFB000", "#FFFF00",
"#B0FF00", "#80FF00", "#40FF00", "#00FF00", "#00FF40", "#00FF80", "#00FFB0",
"#00FFFF", "#00B0FF", "#0080FF", "#0040FF", "#0000FF", "#4000FF", "#8000FF",
"#B000FF", "#FF00FF", "#FF00B0", "#FF0080", "#FF0040" ];

var cursorX = 0;
var cursorY = 0;


function getCursor(e)
{
    cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}

function mod(x, y)
{
    var ret = x - (Math.floor(x / y) * y);
    if (ret < 0) { ret = y + ret; }
    return ret;
}

function moveText(text, speed, direction, mass)
{
    if (text == null) { return; }

    speed = Math.min(50, speed);
    mass = (mass == 0) ? 1 : mass;

    var parent = text.parentNode;

    var tstyle = window.getComputedStyle(text, null);
    var pstyle = window.getComputedStyle(parent, null);

    var curTop  = parseInt(tstyle.getPropertyValue('top'));
    var curLeft = parseInt(tstyle.getPropertyValue('left'));

    var twidth  = text.offsetWidth;
    var theight = text.offsetHeight;

    direction = mod(direction, 360);

    if (((curTop < movemargin) && (direction >= 0 && direction <= 180))
     || ((curTop + movemargin + theight > parent.offsetHeight) && (direction > 180 && direction < 360)))
    {
        direction = 360 - direction;
    }

    if (((curLeft < movemargin) && (direction > 90 && direction < 270))
     || ((curLeft + movemargin + twidth > parent.offsetWidth) && (direction < 90 || direction > 270)))
    {
        if (direction <= 180)
        {
            direction = 180 - direction;
        }
        else
        {
            direction = 540 - direction;
        }

        text.attributes['flipimage'] = curLeft < movemargin ? 1 : -1;
    }

    direction = mod(direction, 360);
    direction *= (Math.PI / 180);

    var xvel = speed *  Math.cos(direction);
    var yvel = speed * -Math.sin(direction);

    var pushx = cursorX - (curLeft + (twidth / 2));
    var pushy = cursorY - (curTop +  (theight / 2));

    var pushdist = Math.sqrt(Math.pow(pushx, 2) + Math.pow(pushy, 2));

    var pushstrength = Math.pow(300, 2) / Math.pow(pushdist, 1.5);
    pushstrength += Math.pow(50, 4) / Math.pow(pushdist, 3);

    pushstrength /= mass;

    pushx /= pushdist;
    pushy /= pushdist;

    xvel -= (pushx * pushstrength);
    yvel -= (pushy * pushstrength);

    xvel = Math.round(xvel);
    yvel = Math.round(yvel);

    curTop  += yvel;
    curLeft += xvel;

    var leftmin = movemargin - 1;
    var leftmax = parent.offsetWidth - twidth - movemargin + 1;

    var topmin  = movemargin - 1;
    var topmax  = parent.offsetHeight - theight - movemargin + 1;

    if (curTop < topmin)    { curTop  = topmin; }
    if (curTop > topmax)    { curTop  = topmax; }
    if (curLeft < leftmin)  { curLeft = leftmin; }
    if (curLeft > leftmax)  { curLeft = leftmax; }


    text.style.top  = curTop  + "px";
    text.style.left = curLeft + "px";

    var sizemult = Math.pow(mass, 0.275);
    var intext = text.children;
    var i;
    var isimg = 0;

    for (i = 0; i < intext.length; i++)
    {
        var child = intext[i];

        if (child.tagName.toLowerCase() == "img")
        {
            isimg = 1;
            child.style.width = Math.round(50 * sizemult) + "%";
            break;
        }
    }

    if (!isimg) { text.style.fontSize = Math.round(36 * sizemult) + "px"; }



    var randsign = Math.random() >= 0.5 ? 1 : -1;

    speed = Math.sqrt(Math.pow(xvel, 2) + Math.pow(yvel, 2));
    speed += ((Math.random() * 8) - 4) / Math.pow(mass, 0.5);

    if (speed > 2)
    {
        direction = Math.atan2(-yvel / speed, xvel / speed);
    }

    direction = mod(direction, Math.PI * 2);

    direction *= (180 / Math.PI);
    direction = Math.round(direction);

    direction += ((Math.random() * 60) - 30) / Math.pow(mass, 0.5);

    if (speed < 0)
    {
        direction = direction - 180;
        speed = -speed;
    }

    setTimeout(function() { moveText(text, speed, direction, mass); }, 25);
}

function rainbowMode(text, index)
{
    var index = mod(index, rainbowColors.length);

    text.style.color = rainbowColors[index];

    setTimeout(function() { rainbowMode(text, index+1); }, 25);
}

function igorFlipping(mover)
{
    var i, children;
    var igor = null;
    children = mover.children;

    for (i = 0; i < children.length; i++)
    {
        var child = children[i];

        if (child.tagName.toLowerCase() == "img")
        {
            if (child.src.indexOf("igor") != -1)
            {
                igor   = child;
                break;
            }
        }
    }

    if (igor === null) { return; }

    if (mover.attributes['flipimage'])
    {
        var imgname = (mover.attributes['flipimage'] == 1) ? "igorchatter_right.gif" : "igorchatter.gif";
        var imgpath = "http://ijontichy.lostsig.com/img/" + imgname;

        mover.attributes['flipimage'] = 0;
        igor.src = imgpath;
    }

    setTimeout(function() { igorFlipping(mover); }, 25);
}

function randPos(text, isFixed)
{
    if (text == null) { return; }

    var parent = text.parentNode;

    var tstyle = window.getComputedStyle(text, null);
    var pstyle = window.getComputedStyle(parent, null);

    var pwidth, pheight;

    if (isFixed)
    {
        pwidth  = window.innerWidth;
        pheight = window.innerHeight;

    }
    else
    {
        pwidth  = parent.offsetWidth;
        pheight = parent.offsetHeight;
    }

    var twidth  = text.offsetWidth;
    var theight = text.offsetHeight;

    text.style.top  = Math.round(Math.random() * (pheight - theight)) + "px";
    text.style.left = Math.round(Math.random() * (pwidth  - twidth)) + "px";
}


function fillMover(mover)
{
    /*var insideText = document.createTextNode("Heh");
    mover.appendChild(insideText);*/

    var insideImg = document.createElement("img");

    if (Math.random() < 0.5)
    {
        insideImg.src = "http://ijontichy.lostsig.com/img/igorchatter.gif";
    }
    else
    {
        insideImg.src = "http://ijontichy.lostsig.com/img/igorchatter_right.gif";
    }

    mover.appendChild(insideImg);

    for (rule in moverCSS)
    {
        mover.style[rule] = moverCSS[rule];
    }
}


var moverTemplate = "robotron_mover<#>";
var moverClass    = "robotron_mover";

var moverCSS = {
    "position": "absolute",
    "fontSize": "72px",
    "textShadow": "1px 1px 2px black, 1px -1px 2px black, -1px 1px 2px black, -1px -1px 2px black",
    "fontFamily": "monospace",
    "pointerEvents": "none",
    "minWidth": "50px",
    "minHeight": "50px",
};

function init()
{
    var i;
    var toplevel = document.body;
    if (toplevel == null) { return; }

    if (window.Event) { document.captureEvents(Event.MOUSEMOVE); }
    document.onmousemove = getCursor;

    var pheight = toplevel.offsetHeight;

    for (i = 0; i < Math.max(6, Math.round(pheight / 300)); i++)
    {
        var moverName = moverTemplate.replace("<#>", i);
        var mover = document.createElement("span");

        mover.id = moverName;
        mover.className = moverClass;

        fillMover(mover);
        toplevel.appendChild(mover);

        randPos(mover, false);
        moveText(mover, 5, Math.round(Math.random() * 360), 9 + (Math.random() * 91));
        igorFlipping(mover);
    }
}

window.onload = init;
window.init = init;