Posted By

jhonqwerty on 11/26/10


Tagged

trailing cursor


Versions (?)

Trailing Image for a Cursor


 / Published in: JavaScript
 

  1. <!--
  2. // image src
  3. var trailsrc = "images/Windows (Personalizada).png";
  4.  
  5. var nDots = 7;
  6. var Xbpos = 0;
  7. var Ybpos = 0;
  8.  
  9. // fixed time step, no relation to real time
  10. var DELTAT = .01;
  11. // size of one spring in pixels
  12. var SEGLEN = 10;
  13. // spring constant, stiffness of springs
  14. var SPRINGK = 10;
  15. // all the physics is bogus, just picked stuff to make it look okay
  16. var MASS = 1;
  17. // Positive XGRAVITY pulls right, negative pulls left
  18. // Positive YGRAVITY pulls down, negative up
  19. var XGRAVITY = 0;
  20. var YGRAVITY = 50;
  21. // RESISTANCE determines a slowing force proportional to velocity
  22. var RESISTANCE = 10;
  23. // stopping criterea to prevent endless jittering
  24. // doesn't work when sitting on bottom since floor
  25. // doesn't push back so acceleration always as big
  26. // as gravity
  27. var STOPVEL = 0.1;
  28. var STOPACC = 0.1;
  29. var DOTSIZE = 11;
  30. // BOUNCE is percent of velocity retained when
  31. // bouncing off a wall
  32. var BOUNCE = 0.75;
  33.  
  34. var ff=(document.getElementById&&!document.all);
  35. var ns=(document.layers);
  36. var ie=(document.all);
  37.  
  38. // always on for now, could be played with to
  39. // let dots fall to botton, get thrown, etc.
  40. var followmouse = true;
  41. var dots = new Array();
  42.  
  43. function init()
  44. {
  45. var i = 0;
  46. for (i = 0; i < nDots; i++) {
  47. dots[i] = new dot(i);
  48. }
  49.  
  50. // set their positions
  51. for (i = 0; i < nDots; i++) {
  52. dots[i].obj.left = dots[i].X;
  53. dots[i].obj.top = dots[i].Y;
  54. }
  55.  
  56. setTimeout("startanimate()", 10);
  57. }
  58.  
  59. function dot(i)
  60. {
  61. this.X = Xbpos;
  62. this.Y = Ybpos;
  63. this.dx = 0;
  64. this.dy = 0;
  65.  
  66. if (ns){
  67. document.write("<layer id=\"mtrail"+ i +"\" ><img src='"+trailsrc+"' border=\"0\"><\/layer>");
  68. } else if (ie||ff) {
  69. if (i == 0) {
  70. document.write("<div id=\"mtrail"+ i +"\" style=\"POSITION: absolute; VISIBILITY: hidden;\"><img src='"+trailsrc+"' border=\"0\"><\/div>");
  71. } else {
  72. document.write("<div id=\"mtrail"+ i +"\" style=\"POSITION: absolute; \"><img src='"+trailsrc+"' border=\"0\"><\/div>");
  73. }
  74. }
  75.  
  76. if (ie)
  77. {
  78. this.obj = eval("mtrail" + i + ".style");
  79. } else if (ff)
  80. {
  81. this.obj = document.getElementById("mtrail" + i).style;
  82. }
  83. else
  84. {
  85. this.obj = eval("document.mtrail" + i);
  86. }
  87. }
  88.  
  89. function startanimate() {
  90. setInterval("animate()", 20);
  91. }
  92.  
  93. // just save mouse position for animate() to use
  94. function MoveHandler(e)
  95. {
  96. if (ie) {
  97. Xbpos = window.event.x + document.body.scrollLeft;
  98. Ybpos = window.event.y + document.body.scrollTop;
  99. }
  100. else {
  101. Xbpos = e.pageX;
  102. Ybpos = e.pageY;
  103. }
  104. }
  105.  
  106. function vec(X, Y)
  107. {
  108. this.X = X;
  109. this.Y = Y;
  110. }
  111.  
  112. // adds force in X and Y to spring for dot[i] on dot[j]
  113. function springForce(i, j, spring)
  114. {
  115. var dx = (dots[i].X - dots[j].X);
  116. var dy = (dots[i].Y - dots[j].Y);
  117. var len = Math.sqrt(dx*dx + dy*dy);
  118. if (len > SEGLEN) {
  119. var springF = SPRINGK * (len - SEGLEN);
  120. spring.X += (dx / len) * springF;
  121. spring.Y += (dy / len) * springF;
  122. }
  123. }
  124.  
  125.  
  126. function animate() {
  127. // dots[0] follows the mouse,
  128. // though no dot is drawn there
  129. var start = 0;
  130. if (followmouse) {
  131. dots[0].X = Xbpos;
  132. dots[0].Y = Ybpos;
  133. start = 1;
  134. }
  135.  
  136. for (i = start ; i < nDots; i++ ) {
  137.  
  138. var spring = new vec(0, 0);
  139. if (i > 0) {
  140. springForce(i-1, i, spring);
  141. }
  142. if (i < (nDots - 1)) {
  143. springForce(i+1, i, spring);
  144. }
  145.  
  146. // air resisitance/friction
  147. var resist = new vec(-dots[i].dx * RESISTANCE,
  148. -dots[i].dy * RESISTANCE);
  149.  
  150. // compute new accel, including gravity
  151. var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,
  152. (spring.Y + resist.Y)/ MASS + YGRAVITY);
  153.  
  154. // compute new velocity
  155. dots[i].dx += (DELTAT * accel.X);
  156. dots[i].dy += (DELTAT * accel.Y);
  157.  
  158. // stop dead so it doesn't jitter when nearly still
  159. if (Math.abs(dots[i].dx) < STOPVEL &&
  160. Math.abs(dots[i].dy) < STOPVEL &&
  161. Math.abs(accel.X) < STOPACC &&
  162. Math.abs(accel.Y) < STOPACC) {
  163. dots[i].dx = 0;
  164. dots[i].dy = 0;
  165. }
  166.  
  167. // move to new position
  168. dots[i].X += dots[i].dx;
  169. dots[i].Y += dots[i].dy;
  170.  
  171. // get size of window
  172. var height, width;
  173. if (!ie) {
  174. height = window.innerHeight + window.pageYOffset;
  175. width = window.innerWidth + window.pageXOffset;
  176. } else {
  177. height = document.body.clientHeight + document.body.scrollTop;
  178. width = document.body.clientWidth + document.body.scrollLeft;
  179. }
  180.  
  181. // bounce off 3 walls (leave ceiling open)
  182. if (dots[i].Y >= height - DOTSIZE - 1) {
  183. if (dots[i].dy > 0) {
  184. dots[i].dy = BOUNCE * -dots[i].dy;
  185. }
  186. dots[i].Y = height - DOTSIZE - 1;
  187. }
  188. if (dots[i].X >= width - DOTSIZE) {
  189. if (dots[i].dx > 0) {
  190. dots[i].dx = BOUNCE * -dots[i].dx;
  191. }
  192. dots[i].X = width - DOTSIZE - 1;
  193. }
  194. if (dots[i].X < 0) {
  195. if (dots[i].dx < 0) {
  196. dots[i].dx = BOUNCE * -dots[i].dx;
  197. }
  198. dots[i].X = 0;
  199. }
  200.  
  201. // move img to new position
  202. dots[i].obj.left = dots[i].X;
  203. dots[i].obj.top = dots[i].Y;
  204. }
  205. }
  206.  
  207. init();
  208. if(ns)window.captureEvents(Event.MOUSEMOVE);
  209. document.onmousemove = MoveHandler;
  210. -->

Report this snippet  

You need to login to post a comment.