home *** CD-ROM | disk | FTP | other *** search
/ com!online 2002 May / comcd0502.iso / homepage / special / javascript / 01_01 / Java / pinwheel2 / pinwheel2.js < prev    next >
Encoding:
JavaScript  |  2000-11-12  |  4.0 KB  |  201 lines
  1. /*******************************************************************
  2.  
  3. *
  4.  
  5. * File    : pinwheel.js
  6.  
  7. *
  8.  
  9. * Created : 2000/06/17
  10.  
  11. *
  12.  
  13. * Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com
  14.  
  15. *
  16.  
  17. * Purpose : To create a pinwheel firework that follows the cursor.
  18. *
  19. * Requires    : xLayer.js - for layer creation, movement
  20. *        : xMouse.js - to track the mouse x,y coordinates
  21.  
  22. *
  23.  
  24. * History
  25.  
  26. * Date         Version        Description
  27.  
  28. *
  29.  
  30. * 2000-06-17    1.0        Initial version
  31. * 2000-10-15    1.1        Used xMouse for mouse tracking
  32.  
  33. ***********************************************************************/
  34.  
  35. var theTimer=null;
  36.  
  37. var m = new xMouse();
  38.  
  39.  
  40. var oneDeg=(2*Math.PI)/360;
  41.  
  42.  
  43.  
  44. /*** Pinwheel type 1 ***/
  45.  
  46. var Radius = 5;
  47.  
  48. var NumStars=32;
  49.  
  50. var NumSteps=16;
  51.  
  52. var StepAngle=(25)*oneDeg;
  53.  
  54.  
  55.  
  56. /*** Pinwheel type 2 ***/
  57.  
  58. //var Radius = 10;
  59.  
  60. //var NumStars=16;
  61.  
  62. //var NumSteps=8;
  63.  
  64. //var StepAngle=(22.5)*oneDeg;
  65.  
  66.  
  67.  
  68. /*** Pinwheel type 3 ***/
  69.  
  70. //var Radius = 5;
  71.  
  72. //var NumStars=16;
  73.  
  74. //var NumSteps=16;
  75.  
  76. //var StepAngle=(22.5)*oneDeg;
  77.  
  78.  
  79.  
  80. /*** Pinwheel type 4 ***/
  81.  
  82. //var Radius = 10;
  83.  
  84. //var NumStars=32;
  85.  
  86. //var NumSteps=16;
  87.  
  88. //var StepAngle=(11.25)*oneDeg;
  89.  
  90.  
  91.  
  92. var StarObject=new Array();
  93.  
  94.  
  95.  
  96. var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
  97.  
  98. function dec2hex(dec)
  99.  
  100. {
  101.  
  102.     return(hexDigit[dec>>4]+hexDigit[dec&15]);
  103.  
  104. }
  105.  
  106. function hex2dec(hex)
  107.  
  108. {
  109.  
  110.     return(parseInt(hex,16))
  111.  
  112. }
  113.  
  114.  
  115.  
  116. function CreateStar()
  117.  
  118. {
  119.  
  120.  
  121.  
  122.     this.layer         = new xLayer("X", 100, 100, 10);
  123.  
  124.     this.currAngle     = 0;
  125.  
  126.     this.step        = 0;
  127.  
  128.     this.x        = 100;
  129.  
  130.     this.y        = 100;
  131.  
  132.     return (this);
  133.  
  134. }
  135.  
  136.  
  137.  
  138. function restart()
  139.  
  140. {
  141.  
  142.     for(i=0;i<NumStars;i++)
  143.  
  144.     {
  145.  
  146.         StarObject[i].currAngle = (StepAngle*i);
  147.  
  148.         StarObject[i].step = (i%NumSteps);
  149.  
  150.         StarObject[i].x = m.X;
  151.  
  152.         StarObject[i].y = m.Y;
  153.  
  154.         StarObject[i].layer.moveTo(m.X, m.Y);
  155.  
  156.         StarObject[i].layer.show();
  157.  
  158.     }
  159.  
  160. }
  161.  
  162. /*** Choose a random pinwheel configuration ***/
  163.  
  164. function next_random()
  165.  
  166. {
  167.  
  168.     var num=Math.floor(Math.random()*4);
  169.  
  170.     
  171.  
  172.     for(i=0;i<NumStars;i++)
  173.  
  174.         StarObject[i].layer.hide();
  175.  
  176.  
  177.  
  178.     if(num==0){
  179.  
  180.         Radius = 5;
  181.  
  182.         NumStars=32;
  183.  
  184.         NumSteps=16;
  185.  
  186.         StepAngle=(25)*oneDeg;
  187.  
  188.     }
  189.  
  190.     else
  191.  
  192.     if(num==1){
  193.  
  194.         Radius = 10;
  195.  
  196.         NumStars=16;
  197.  
  198.         NumSteps=8;
  199.  
  200.         StepAngle=(22.5)*oneDeg;
  201.  
  202.     }
  203.  
  204.     else
  205.  
  206.     if(num==2){
  207.  
  208.         Radius = 5;
  209.  
  210.         NumStars=16;
  211.  
  212.         NumSteps=16;
  213.  
  214.         StepAngle=(22.5)*oneDeg;
  215.  
  216.     }
  217.  
  218.     else{
  219.  
  220.         Radius = 10;
  221.  
  222.         NumStars=32;
  223.  
  224.         NumSteps=16;
  225.  
  226.         StepAngle=(11.25)*oneDeg;
  227.  
  228.     }
  229.  
  230.  
  231.  
  232.  
  233.  
  234.     for(i=0 ; i<NumStars; i++)
  235.  
  236.     {
  237.  
  238.         var s=StarObject[i];
  239.  
  240.         s.currAngle = (StepAngle*i);
  241.  
  242.         s.step = (i%NumSteps);
  243.  
  244.         s.x=m.X;
  245.  
  246.         s.y=m.Y;
  247.  
  248.     }
  249.  
  250.  
  251.  
  252.     restart();
  253.  
  254.  
  255.  
  256.     theTimer=setTimeout("next_random()", 10000);
  257.  
  258. }
  259.  
  260. function start()
  261.  
  262. {
  263.  
  264.     for(i=0 ; i<NumStars; i++)
  265.  
  266.     {
  267.  
  268.         StarObject[i]=new CreateStar();
  269.  
  270.         StarObject[i].currAngle = (StepAngle*i);
  271.  
  272.         StarObject[i].step = (i%NumSteps);
  273.  
  274.         StarObject[i].layer.clip(0,0,2,2);
  275.  
  276.         StarObject[i].layer.setBgColor("red");
  277.  
  278.     }
  279.  
  280.  
  281.  
  282.     for(i=0 ; i<NumStars ; i++)
  283.  
  284.         StarObject[i].layer.show();
  285.  
  286.  
  287.  
  288.     /*** Remove this if you only 1 type of pinwheel ***/
  289.  
  290.     theTimer=setTimeout("next_random()", 10000);
  291.  
  292.  
  293.  
  294.     Rotate();
  295.  
  296. }
  297.  
  298.  
  299.  
  300. function changeColour(s)
  301.  
  302. {
  303.  
  304.     var colour="";
  305.  
  306.  
  307.  
  308.     r2= Math.floor(Math.random()*2)*255;
  309.  
  310.     g2= Math.floor(Math.random()*2)*255;
  311.  
  312.     b2= Math.floor(Math.random()*2)*255;
  313.  
  314.  
  315.  
  316.     if(r2==0 && g2==0 && b2==0)
  317.  
  318.         r2=255;
  319.  
  320.  
  321.  
  322.     colour = "#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2);
  323.  
  324.     s.layer.setBgColor(colour);
  325.  
  326.  
  327.  
  328.     s.x=m.X;
  329.  
  330.     s.y=m.Y;
  331.  
  332. }
  333.  
  334. function Rotate() 
  335.  
  336. {
  337.  
  338.     var x;
  339.  
  340.     var y;
  341.  
  342.     for (i = 0 ; i < NumStars ; i++ ) {
  343.  
  344.         var s=StarObject[i];
  345.  
  346.         
  347.  
  348.         if(s.step==0)
  349.  
  350.             changeColour(s);
  351.  
  352.  
  353.  
  354.         var angle = s.currAngle;
  355.  
  356.         var rad   = s.step*Radius + 10;
  357.  
  358.         x = s.x + rad*Math.cos(angle);
  359.  
  360.         y = s.y + rad*Math.sin(angle);
  361.  
  362.  
  363.  
  364.         s.layer.moveTo(x,y);
  365.  
  366.  
  367.  
  368.         s.step = (s.step+1)%NumSteps;
  369.  
  370.     }
  371.  
  372.  
  373.  
  374.     setTimeout("Rotate()", 30);
  375.  
  376. }
  377.  
  378.  
  379.  
  380. function handle_resize()
  381.  
  382. {
  383.  
  384.     if(document.layers)
  385.  
  386.         start();
  387.  
  388. }
  389.  
  390.  
  391.  
  392. window.onresize=handle_resize;
  393.  
  394. window.onload=start;
  395.  
  396.