<HTML xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD> <META NAME="Description" CONTENT="VML Animation - Kaleidoscope"> <META NAME="Keywords" CONTENT="kaleidoscope,dhtml, vml, javascript, jscript, animation"> <OBJECT classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E id=VMLRender></OBJECT> <STYLE>v\:* {BEHAVIOR: url(#VMLRender)}</STYLE> <BODY bgColor=#ffffff onresize=resize() scroll=no> <div> <v:rect id=bg style="HEIGHT:400pt;LEFT:0pt;POSITION:absolute;TOP:0pt;WIDTH:880pt;Z-INDEX:-1" coordsize = "21600,21600" fillcolor = "#c797e2"> <v:fill type = "gradient" color2 = "#971647" angle = "45" focus = "100%" focusposition = ".5,.5" focussize = "0,0" method = "linear sigma"> </v:fill> </v:rect> </div> <DIV id=kal style='position:absolute;left:0;top:0;'></DIV> <DIV ID=frm style="position:absolute;top:0;"> <FORM name="myform"> <TABLE> <TR> <TD> XML的强大功能 </TD> </TR> <TR> <TD> Number of Points allowed: </TD> </TR> <TR> <TD> <INPUT TYPE=CHECKBOX name=spointse CHECKED>Even numbers<BR> </TD> </TR> <TR> <TD> <INPUT TYPE=CHECKBOX name=spointso CHECKED>Odd numbers<BR> </TD> </TR> <TR><TD>Number of Stars</TD></TR> <TR> <TD> <OBJECT ID="scrnumstars" STYLE="position:relative; left:0;top:0;width:196;height:10" STYLE="border:2px solid #696969;" codeBase="http://activex.microsoft.com/controls/mspert10.cab" CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D"> <PARAM NAME="Max" VALUE="12"> <PARAM NAME="Min" VALUE="1"> <PARAM NAME="Position" VALUE="5"> <PARAM NAME="LargeChange" VALUE="2"> <PARAM NAME="Orientation" VALUE="1"> </OBJECT> </TD> </TR> <TR><TD>Minimum Points</TD></TR> <TR> <TD> <OBJECT ID="scrminpts" STYLE="position:relative; left:0;top:0;width:196;height:10" STYLE="border:2px solid #696969;" codeBase="http://activex.microsoft.com/controls/mspert10.cab" CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D"> <PARAM NAME="Max" VALUE="20"> <PARAM NAME="Min" VALUE="3"> <PARAM NAME="Position" VALUE="3"> <PARAM NAME="LargeChange" VALUE="2"> <PARAM NAME="Orientation" VALUE="1"> </OBJECT> </TD> </TR> <TR><TD>Maximum Points</TD></TR> <TR> <TD> <OBJECT ID="scrmaxpts" STYLE="position:relative; left:0;top:0;width:196;height:10" STYLE="border:2px solid #696969;" codeBase="http://activex.microsoft.com/controls/mspert10.cab" CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D"> <PARAM NAME="Max" VALUE="20"> <PARAM NAME="Min" VALUE="3"> <PARAM NAME="Position" VALUE="8"> <PARAM NAME="LargeChange" VALUE="2"> <PARAM NAME="Orientation" VALUE="1"> </OBJECT> </TD> </TR> <TR><TD>Max Rotation Speed</TD></TR> <TR> <TD> <OBJECT ID="scrrotspd" STYLE="position:relative; left:0;top:0;width:196;height:10" STYLE="border:2px solid #696969;" codeBase="http://activex.microsoft.com/controls/mspert10.cab" CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D"> <PARAM NAME="Max" VALUE="100"> <PARAM NAME="Min" VALUE="0"> <PARAM NAME="Position" VALUE="50"> <PARAM NAME="LargeChange" VALUE="5"> <PARAM NAME="Orientation" VALUE="1"> </OBJECT> </TD> </TR> <TR><TD>Max Expansion Speed</TD></TR> <TR> <TD> <OBJECT ID="screxpspd" STYLE="position:relative; left:0;top:0;width:196;height:10" STYLE="border:2px solid #696969;" codeBase="http://activex.microsoft.com/controls/mspert10.cab" CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D"> <PARAM NAME="Max" VALUE="100"> <PARAM NAME="Min" VALUE="0"> <PARAM NAME="Position" VALUE="50"> <PARAM NAME="LargeChange" VALUE="5"> <PARAM NAME="Orientation" VALUE="1"> </OBJECT> </TD> </TR> <TR><TD>Max Colour Speed</TD></TR> <TR> <TD> <OBJECT ID="scrcolspd" STYLE="position:relative; left:0;top:0;width:196;height:10" STYLE="border:2px solid #696969;" codeBase="http://activex.microsoft.com/controls/mspert10.cab" CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D"> <PARAM NAME="Max" VALUE="100"> <PARAM NAME="Min" VALUE="0"> <PARAM NAME="Position" VALUE="50"> <PARAM NAME="LargeChange" VALUE="5"> <PARAM NAME="Orientation" VALUE="1"> </OBJECT> </TD> </TR> </TABLE> </FORM> </DIV> <script> //globals for HSV to RGB conversion irpnt=new Array(2,1,0,0,3,2); igpnt=new Array(3,2,2,1,0,0); ibpnt=new Array(0,0,3,2,2,1); v_spointse=true; v_spointso=true; v_scrnumstars=1; v_scrminpts=3; v_scrmaxpts=3; v_scrrotspd=50; v_screxpspd=50; v_scrcolspd=50; //alert(document.myform.spointse.value) w=0; h=0; kx=0; ky=0; np=0; maxpoints=30; maxstars=12; ss=new Array(500,490,480,470,460,450,440,430); numstars=5; scol=new colour(57,.81,.89); resize(); initkaleidoscope(); window.setInterval("frame();",20); function initkaleidoscope(){ var ok=false; v_spointse=document.myform.spointse.checked; v_spointso=document.myform.spointso.checked; v_scrnumstars=document.myform.scrnumstars.value; v_scrminpts=document.myform.scrminpts.value; v_scrmaxpts=document.myform.scrmaxpts.value; v_scrrotspd=document.myform.scrrotspd.value; v_screxpspd=document.myform.screxpspd.value; v_scrcolspd=document.myform.scrcolspd.value; if(v_scrminpts>v_scrmaxpts){ v_scrmaxpts=v_scrminpts; document.myform.scrmaxpts.value=v_scrmaxpts; } kal.innerHTML=""; vs=""; for(j=0;j<v_scrnumstars;j++){ if(v_scrminpts==v_scrmaxpts){ np=v_scrminpts; } else{ np=v_scrminpts+rnd(v_scrmaxpts-v_scrminpts+1); if(v_spointse!=true)while(np%2!=1)np=v_scrminpts+rnd(v_scrmaxpts-v_scrminpts+1); if(v_spointso!=true)while(np%2!=0)np=v_scrminpts+rnd(v_scrmaxpts-v_scrminpts+1); } hue=rnd(360); dhue=rnd(v_scrcolspd/6); theta=0; dtheta=Math.random()*v_screxpspd/100; dr=Math.random()*v_scrrotspd/10;if(rnd(2)==0)dr=-dr; sp=makestarpath(np,500,250*(Math.sin(theta)-1)); vs+="<v:shape id='V"+j+"' np="+np+" hue="+hue+" dhue="+dhue+" dr="+dr+" theta="+theta+" dtheta="+dtheta+" style='position:absolute;left:0px;top:0px;height:500;width:500;rotation:0;opacity:0.5;' fill='true' stroke='true' coordsize='2500,2500' coordorigin '-1250,-1250' fillcolor='#a8f4f7' strokecolor='#a8f4f7' path='"+sp+"'></v:shape>" } kal.innerHTML=vs; } function frame(){ if(v_spointse!=document.myform.spointse.checked || v_spointso!=document.myform.spointso.checked || v_scrnumstars!=document.myform.scrnumstars.value || v_scrminpts!=document.myform.scrminpts.value || v_scrmaxpts!=document.myform.scrmaxpts.value || v_scrrotspd!=document.myform.scrrotspd.value || v_screxpspd!=document.myform.screxpspd.value || v_scrcolspd!=document.myform.scrcolspd.value){ initkaleidoscope(); } else{ for(j=0;j<v_scrnumstars;j++){ S=document.all["V"+j]; //animate colour hue=parseInt(S.hue); dhue=parseInt(S.dhue); hue+=dhue; if(hue>=360)hue-=360; S.hue=hue; scol.h=hue; scol.hsv2rgb(); S.fillcolor=scol.rgb; S.strokecolor=scol.rgb; //animate rotation r=parseFloat(S.style.rotation); dr=parseFloat(S.dr); r+=dr;if(r>=360)r-=360;if(r<0)r+=360; S.style.rotation=r; //animate geometry np=parseInt(S.np); theta=parseFloat(S.theta); dtheta=parseFloat(S.dtheta); theta+=dtheta;if(theta>Math.PI)theta-=2*Math.PI; sp=makestarpath(np,500,250*(Math.sin(theta)-1)); S.path=sp; S.theta=theta; } } } //n=number of points //r1=outer diameter //r2=inner diameter function makestarpath(n,r1,r2){ s=""; pa=2*Math.PI/n; ss1=Math.PI/2; ss2=ss1-pa/2; x1=Math.floor(r1*Math.cos(ss1)); y1=Math.floor(-r1*Math.sin(ss1)); x2=Math.floor(r2*Math.cos(ss2)); y2=Math.floor(-r2*Math.sin(ss2)); s="m "+(x2+1250)+","+(y2+1250)+" l "; for (i=1;i<=n;i++){ if(i>1)s+="," s+=(x1+1250)+","+(y1+1250)+","; s1=ss1+i*pa; s2=ss2+i*pa; x1=Math.floor(r1*Math.cos(s1)); y1=Math.floor(-r1*Math.sin(s1)); x2=Math.floor(r2*Math.cos(s2)); y2=Math.floor(-r2*Math.sin(s2)); s+=(x2+1250)+","+(y2+1250); } s+=" e" return(s); } function rnd(n){ return(Math.floor(n*Math.random())); } function resize(){ w=document.body.clientWidth; h=document.body.clientHeight; bg.style.width=w-206; frm.style.left=w-206; bg.style.height=h; kx=w/2-250-103; ky=h/2-250; kal.style.left=kx; kal.style.top=ky; } //utility object for HSV to RGB conversion function hsv2rgb(){ pqvt=new Array(4); with(this){ if(s==0){ r=Math.floor(255*v); g=r; b=r; return; } if(h>=360)h=0; nh=h/60; i=Math.floor(nh); f=nh-i; pqvt[2]=255*v; pqvt[0]=pqvt[2]*(1-s) pqvt[1]=pqvt[2]*(1-s*f) pqvt[3]=pqvt[2]*(1-s*(1-f)) r=Math.floor(pqvt[irpnt[i]]); g=Math.floor(pqvt[igpnt[i]]); b=Math.floor(pqvt[ibpnt[i]]); rgb="#"+(65536*r+256*g+b).toString(16); } } function colour(h,s,v){ this.h=h;//0-359 this.s=s;//0-1 this.v=v;//0-1 this.r=0;//0-255 this.g=0;//0-255 this.b=0;//0-255 this.rgb=""; this.hsv2rgb=hsv2rgb; //convert on construction this.hsv2rgb(); } setInterval("dis();",50); function dis(){ window.status=document.myform.spointse.checked; } </script>
