Gravity effect

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • gbalkam
    New Member
    • Aug 2008
    • 1
    #1

    Gravity effect

    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?
    Tags: None
    • rohypnol
      New Member
      • Dec 2007
      • 54
      #2
      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.

      Code:
      <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
      Attached Files

        Comment

        Previous template Next
        Working...