home *** CD-ROM | disk | FTP | other *** search
/ com!online 2002 May / comcd0502.iso / homepage / special / javascript / 01_01 / Java / pinwheel / pinwheel.js < prev    next >
Encoding:
JavaScript  |  2000-11-12  |  3.5 KB  |  190 lines
  1. /*******************************************************************
  2. *
  3. * File    : pinwheel.js
  4. *
  5. * Created : 2000/06/17
  6. *
  7. * Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com
  8. *
  9. * Purpose : To create a pinwheel firework that follows the cursor.
  10. *
  11. * Requires    : xLayer.js - for layer creation, movement
  12. *        : xMouse.js - to track the mouse x,y coordinates
  13. *
  14. * History
  15. * Date         Version        Description
  16. *
  17. * 2000-06-17    1.0        Initial version
  18. * 2000-10-15    1.1        Used xMouse for mouse tracking
  19. ***********************************************************************/
  20. var m = new xMouse();
  21.  
  22. var oneDeg=(2*Math.PI)/360;
  23.  
  24. /*** Pinwheel type 1 ***/
  25. var Radius = 5;
  26. var NumStars=32;
  27. var NumSteps=16;
  28. var StepAngle=(25)*oneDeg;
  29.  
  30. /*** Pinwheel type 2 ***/
  31. //var Radius = 10;
  32. //var NumStars=16;
  33. //var NumSteps=8;
  34. //var StepAngle=(22.5)*oneDeg;
  35.  
  36. /*** Pinwheel type 3 ***/
  37. //var Radius = 5;
  38. //var NumStars=16;
  39. //var NumSteps=16;
  40. //var StepAngle=(22.5)*oneDeg;
  41.  
  42. /*** Pinwheel type 4 ***/
  43. //var Radius = 10;
  44. //var NumStars=32;
  45. //var NumSteps=16;
  46. //var StepAngle=(11.25)*oneDeg;
  47.  
  48. var StarObject=new Array();
  49.  
  50. var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
  51. function dec2hex(dec)
  52. {
  53.     return(hexDigit[dec>>4]+hexDigit[dec&15]);
  54. }
  55. function hex2dec(hex)
  56. {
  57.     return(parseInt(hex,16))
  58. }
  59.  
  60. function CreateStar()
  61. {
  62.  
  63.     this.layer         = new xLayer("X", 100, 100, 10);
  64.     this.currAngle     = 0;
  65.     this.step        = 0;
  66.     this.x        = 100;
  67.     this.y        = 100;
  68.     return (this);
  69. }
  70.  
  71. /*** Choose a random pinwheel configuration ***/
  72. function restart()
  73. {
  74.     var num=Math.floor(Math.random()*4);
  75.     
  76.     for(i=0;i<NumStars;i++)
  77.         StarObject[i].layer.hide();
  78.  
  79.     if(num==0){
  80.         Radius = 5;
  81.         NumStars=32;
  82.         NumSteps=16;
  83.         StepAngle=(25)*oneDeg;
  84.     }
  85.     else
  86.     if(num==1){
  87.         Radius = 10;
  88.         NumStars=16;
  89.         NumSteps=8;
  90.         StepAngle=(22.5)*oneDeg;
  91.     }
  92.     else
  93.     if(num==2){
  94.         Radius = 5;
  95.         NumStars=16;
  96.         NumSteps=16;
  97.         StepAngle=(22.5)*oneDeg;
  98.     }
  99.     else{
  100.         Radius = 10;
  101.         NumStars=32;
  102.         NumSteps=16;
  103.         StepAngle=(11.25)*oneDeg;
  104.     }
  105.  
  106.  
  107.     for(i=0 ; i<NumStars; i++)
  108.     {
  109.         var s=StarObject[i];
  110.         s.currAngle = (StepAngle*i);
  111.         s.step = (i%NumSteps);
  112.         s.x=m.X;
  113.         s.y=m.Y;
  114.     }
  115.  
  116.     for(i=0;i<NumStars;i++)
  117.         StarObject[i].layer.show();
  118.  
  119.     setTimeout("restart()", 10000);
  120. }
  121. function start()
  122. {
  123.  
  124.     for(i=0 ; i<NumStars; i++)
  125.     {
  126.         StarObject[i]=new CreateStar();
  127.         StarObject[i].currAngle = (StepAngle*i);
  128.         StarObject[i].step = (i%NumSteps);
  129.         StarObject[i].layer.clip(0,0,2,2);
  130.         StarObject[i].layer.setBgColor("red");
  131.     }
  132.  
  133.     for(i=0 ; i<NumStars ; i++)
  134.         StarObject[i].layer.show();
  135.  
  136.     /*** Remove this if you only 1 type of pinwheel ***/
  137.     setTimeout("restart()", 10000);
  138.  
  139.     Rotate();
  140. }
  141.  
  142. function changeColour(s)
  143. {
  144.     var colour="";
  145.  
  146.     r2= Math.floor(Math.random()*2)*255;
  147.     g2= Math.floor(Math.random()*2)*255;
  148.     b2= Math.floor(Math.random()*2)*255;
  149.  
  150.     if(r2==0 && g2==0 && b2==0)
  151.         r2=255;
  152.  
  153.     colour = "#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2);
  154.     s.layer.setBgColor(colour);
  155.  
  156.     s.x=m.X;
  157.     s.y=m.Y;
  158. }
  159. function Rotate() 
  160. {
  161.     var x;
  162.     var y;
  163.     for (i = 0 ; i < NumStars ; i++ ) {
  164.         var s=StarObject[i];
  165.         
  166.         if(s.step==0)
  167.             changeColour(s);
  168.  
  169.         var angle = s.currAngle;
  170.         var rad   = s.step*Radius + 10;
  171.         x = s.x + rad*Math.cos(angle);
  172.         y = s.y + rad*Math.sin(angle);
  173.  
  174.         s.layer.moveTo(x,y);
  175.  
  176.         s.step = (s.step+1)%NumSteps;
  177.     }
  178.  
  179.     setTimeout("Rotate()", 30);
  180. }
  181.  
  182. function handle_resize()
  183. {
  184.     if(document.layers)
  185.         start();
  186. }
  187.  
  188. window.onresize=handle_resize;
  189. window.onload=start;
  190.