By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,480 Members | 1,766 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,480 IT Pros & Developers. It's quick & easy.

Gravity effect

P: 1
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?
Aug 2 '08 #1
Share this Question
Share on Google+
1 Reply


rohypnol
P: 54
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.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. var mouse_pos = null;
  4. var particle_list = [];
  5.  
  6. function getMousePos(e)
  7. {
  8.     var posx = 0;
  9.     var posy = 0;
  10.     if (!e) var e = window.event;
  11.     if (e.pageX || e.pageY)
  12.     {
  13.         posx = e.pageX;
  14.         posy = e.pageY;
  15.     }
  16.     else if (e.clientX || e.clientY)
  17.     {
  18.         posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  19.         posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  20.     }
  21.     mouse_pos = {x: posx, y: posy};
  22. }
  23.  
  24. function Particle(start, target)
  25. {
  26.     this.mul = 5; // speed multiplication factor
  27.     // initialize position
  28.     this.pos = {x: start.x, y: start.y}
  29.     this.target = {x: target.x, y: target.y};
  30.     // compute speed
  31.     if ((target.x == start.x) && (target.y == start.y))
  32.     {
  33.         var speed_x = 0;
  34.         var speed_y = 0;
  35.     }
  36.     else
  37.     {
  38.         if (Math.abs(target.x - start.x) > Math.abs(target.y - start.y))
  39.         {
  40.             var speed_x = ((target.x > start.x) ? 1 : -1);
  41.             var speed_y = (0.0 + target.y - start.y) / Math.abs(target.x - start.x);
  42.         }
  43.         else
  44.         {
  45.             var speed_x = (0.0 + target.x - start.x) / Math.abs(target.y - start.y);
  46.             var speed_y = ((target.y > start.y) ? 1 : -1);
  47.         }
  48.         // just to make sure...
  49.         if (speed_x > 1) speed_x = 1;
  50.         if (speed_x < -1) speed_x = -1;
  51.         if (speed_y > 1) speed_y = 1;
  52.         if (speed_y < -1) speed_y = -1;
  53.     }
  54.     this.speed = {x: speed_x * this.mul, y: speed_y * this.mul};
  55.     // create img element
  56.     var img = this.img = document.createElement('img');
  57.     img.src = 'http://www.pbcgov.com/publicaffairs/_images/dot.jpg';
  58.     img.style.display = 'block';
  59.     img.style.position = 'absolute';
  60.     this.move(); // update img position
  61. }
  62.  
  63. Particle.prototype.move = function ()
  64. {
  65.     // if one of the axis has been reached, we need to make sure that we don't reach and endless loop
  66.     if (Math.abs(this.pos.x - this.target.x) <= this.mul)
  67.     {
  68.         this.speed.x = 0;
  69.     }
  70.     if (Math.abs(this.pos.y - this.target.y) <= this.mul)
  71.     {
  72.         this.speed.y = 0;
  73.     }
  74.     // move the particle
  75.     this.pos.x += this.speed.x;
  76.     this.pos.y += this.speed.y;
  77.     // move the img element to the newly computed position
  78.     this.img.style.left = Math.round(this.pos.x) + 'px';
  79.     this.img.style.top = Math.round(this.pos.y) + 'px';
  80. }
  81.  
  82. Particle.prototype.isDone = function ()
  83. {
  84.     return ((this.speed.x == 0) && (this.speed.y == 0));
  85. }
  86.  
  87. function ParticleManager(container)
  88. {
  89.     this.container = container;
  90.     this.act();
  91. }
  92.  
  93. ParticleManager.prototype.act = function ()
  94. {
  95.     // loop through particles and move/remove them
  96.     var i = 0;
  97.     while (i < particle_list.length)
  98.     {
  99.         p = particle_list[i];
  100.         // move particle
  101.         p.move();
  102.         // if particle reached target, remove it
  103.         if (p.isDone())
  104.         {
  105.             this.container.removeChild(p.img);
  106.             particle_list.splice(i, 1);
  107.         }
  108.         else
  109.         {
  110.             ++i;
  111.         }
  112.     }
  113.  
  114.     // create new particle, if possible
  115.     if (mouse_pos !== null)
  116.     {
  117.         var p = new Particle(mouse_pos, {x: this.container.scrollWidth / 2, y: this.container.scrollHeight / 2} );
  118.         particle_list[particle_list.length] = p;
  119.         this.container.appendChild(p.img);
  120.     }
  121.  
  122.     var that = this;
  123.     //setTimeout(function () {that.act}, 100);
  124.     setTimeout(function () { that.act() }, 50);
  125. }
  126.  
  127. $=function(id){return document.getElementById(id)};
  128.  
  129. </script>
  130.  
  131. <body onload="new ParticleManager($('container'))">
  132.     <div id="container" style="width: 100%; height: 100%; background-color: #DDDDDD; position: absolute; top: 0px; left: 0px" onmousemove="getMousePos(event)">
  133.     </div>
  134. </body>
Regards,
Tom
Attached Files
File Type: txt 1.txt (3.4 KB, 237 views)
Aug 2 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.