Gravity effect

[gbalkam]

I'm very new to javascript, but from what I understand, it operates in the local browser, not on the web or from a server or database. So what i am looking for, is sort of a reverse "mouse trailer" effect.
Instead of following the mouse, I want the trailer to move away from the mouse toward a set cordinate. Such as toward the center of a "black hole" see gbalkam.com/index2.html for an idea (under construction). Ideally, the effect would seem to pull the mouse toward the "event horizon" either as a steady line or "particles" breaking free of the mouse pointer. Any suggestions?

[rohypnol]

Here's an example I just wrote for you and tested in FF3 and IE7 :o) I accept credit cards, wire transfers and thanks (pick one).


The image URL is something I picked by searching for something completely random on Google Images. If you need any help with this, let me know.

<script type="text/javascript">
 
var mouse_pos = null;
var particle_list = [];
 
function getMousePos(e)
{
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    mouse_pos = {x: posx, y: posy};
}
 
function Particle(start, target)
{
    this.mul = 5; // speed multiplication factor
    // initialize position
    this.pos = {x: start.x, y: start.y}
    this.target = {x: target.x, y: target.y};
    // compute speed
    if ((target.x == start.x) && (target.y == start.y))
    {
        var speed_x = 0;
        var speed_y = 0;
    }
    else
    {
        if (Math.abs(target.x - start.x) > Math.abs(target.y - start.y))
        {
            var speed_x = ((target.x > start.x) ? 1 : -1);
            var speed_y = (0.0 + target.y - start.y) / Math.abs(target.x - start.x);
        }
        else
        {
            var speed_x = (0.0 + target.x - start.x) / Math.abs(target.y - start.y);
            var speed_y = ((target.y > start.y) ? 1 : -1);
        }
        // just to make sure...
        if (speed_x > 1) speed_x = 1;
        if (speed_x < -1) speed_x = -1;
        if (speed_y > 1) speed_y = 1;
        if (speed_y < -1) speed_y = -1;
    }
    this.speed = {x: speed_x * this.mul, y: speed_y * this.mul};
    // create img element
    var img = this.img = document.createElement('img');
    img.src = 'http://www.pbcgov.com/publicaffairs/_images/dot.jpg';
    img.style.display = 'block';
    img.style.position = 'absolute';
    this.move(); // update img position
}
 
Particle.prototype.move = function ()
{
    // if one of the axis has been reached, we need to make sure that we don't reach and endless loop
    if (Math.abs(this.pos.x - this.target.x) <= this.mul)
    {
        this.speed.x = 0;
    }
    if (Math.abs(this.pos.y - this.target.y) <= this.mul)
    {
        this.speed.y = 0;
    }
    // move the particle
    this.pos.x += this.speed.x;
    this.pos.y += this.speed.y;
    // move the img element to the newly computed position
    this.img.style.left = Math.round(this.pos.x) + 'px';
    this.img.style.top = Math.round(this.pos.y) + 'px';
}
 
Particle.prototype.isDone = function ()
{
    return ((this.speed.x == 0) && (this.speed.y == 0));
}
 
function ParticleManager(container)
{
    this.container = container;
    this.act();
}
 
ParticleManager.prototype.act = function ()
{
    // loop through particles and move/remove them
    var i = 0;
    while (i < particle_list.length)
    {
        p = particle_list[i];
        // move particle
        p.move();
        // if particle reached target, remove it
        if (p.isDone())
        {
            this.container.removeChild(p.img);
            particle_list.splice(i, 1);
        }
        else
        {
            ++i;
        }
    }
 
    // create new particle, if possible
    if (mouse_pos !== null)
    {
        var p = new Particle(mouse_pos, {x: this.container.scrollWidth / 2, y: this.container.scrollHeight / 2} );
        particle_list[particle_list.length] = p;
        this.container.appendChild(p.img);
    }
 
    var that = this;
    //setTimeout(function () {that.act}, 100);
    setTimeout(function () { that.act() }, 50);
}
 
$=function(id){return document.getElementById(id)};
 
</script>
 
<body onload="new ParticleManager($('container'))">
    <div id="container" style="width: 100%; height: 100%; background-color: #DDDDDD; position: absolute; top: 0px; left: 0px" onmousemove="getMousePos(event)">
    </div>
</body>

Regards,
Tom