<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>
VML的图片变换功能:
</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>

//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>