式 (リサージュ曲線)
x=r1 * cos( m t )
y=r2 * sin( n t )

 r1:定数、x軸径(200)
 r2:定数、y軸径(150)
 m n:定数(可変)
 t:変数(0.05ずつ加算)







m ( 1 〜 10 )

n ( 1 〜 10 )


速度 ( 0 〜 10 )


その他、参考曲線



関数を動きで表現しています。
m、n、速度を変えるには『+』『-』ボタンで操作してください。
既定はリサージュ曲線を表現していますが、 m = n ですと、ご存知、楕円(円)になります。
リサージュの基本は円です。定数のズレによって軌跡が変わり、それによって、
動きも変化に富んでいますが、あくまでも、円運動の延長線、決して、宇宙の果てに
飛んで行ってしまう事はありません。
以下、ソースです(ちょっと不親切(面倒臭い?)ですが、解説は付けていません)
参考に、そのほかの曲線(コンボボックスに式)も選択できますが、ソースには不記載です。
定数を変えた場合も含め、動きの違いは勝手に解釈のほどを!

<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="black" text="white">
<font size=4><b>式</b> </font><br>
x=r1 * cos( m t )<br>
y=r2 * sin( n t )<br><br>
<font size="2">r1:定数、x軸径(200)<br>
r2:定数、y軸径(150)<br>
m n:定数(可変)<br>
t:変数(0.05ずつ加算)<br><br>
</font><input type="button" name="button1" value="START"
onClick="button1.disabled=true;button2.disabled=false;button3.disabled=false;RS()">
<br><br>
<input type="button" name="button2" disabled="true" value="STOP"
onClick="button2.disabled=true;button1.disabled=false;button3.disabled=false;Stop()">
<br><br>
<input type="button" name="button3" disabled="true" value="整列"
onClick="button2.disabled=true;button1.disabled=false;button3.disabled=true;Seiretsu()">
<br><br>
<b>m</b><br>
<input type="text" name="textX" value="3" size="2" disabled="true"
style="font-size: 12pt; text-align: center; background-color: #ff0000; font-weight: bold">
<input type="button" name="ADDx" value="+" onClick="adx()">
<input type="button" name="DEDx" value="-" onClick="ddx()"><br><br>
<b>n</b><br>
<input type="text" name="textY" value="5" size="2" disabled="true"
style="font-size: 12pt; text-align: center; background-color: #ff0000; font-weight: bold">
<input type="button" name="ADDy" value="+" onClick="ady()">
<input type="button" name="DEDy" value="-" onClick="ddy()"><br><br>
<b><font size="2">速度</font></b><br>
<input type="text" name="textSP" value="5" size="2" disabled="true"
style="font-size: 12pt; text-align: center; background-color: #ff0000; font-weight: bold">
<input type="button" name="ADDsp" value="+" onClick="adsp()">
<input type="button" name="DEDsp" value="-" onClick="ddsp()"><br><br>

<div id=MovePoint10 style="font-size:10; color:#ff6666;
position:absolute;top:250;left:210;width=10pt">●</div>
<div id=MovePoint9 style="font-size:10; color:#777777;
position:absolute;top:250;left:225;width=10pt">●</div>
<div id=MovePoint8 style="font-size:10; color:#888888;
position:absolute;top:250;left:240;width=10pt">●</div>
<div id=MovePoint7 style="font-size:10; color:#999999;
position:absolute;top:250;left:255;width=10pt">●</div>
<div id=MovePoint6 style="font-size:10; color:#aaaaaa;
position:absolute;top:250;left:270;width=10pt">●</div>
<div id=MovePoint5 style="font-size:10; color:#bbbbbb;
position:absolute;top:250;left:285;width=10pt">●</div>
<div id=MovePoint4 style="font-size:10; color:#cccccc;
position:absolute;top:250;left:300;width=10pt">●</div>
<div id=MovePoint3 style="font-size:10; color:#eeeeee;
position:absolute;top:250;left:315;width=10pt">●</div>
<div id=MovePoint2 style="font-size:10; color:#ffffff;
position:absolute;top:250;left:330;width=10pt">●</div>
<div id=MovePoint1 style="font-size:10; color:#ffff00;
position:absolute;top:250;left:345;width=10pt">●</div>

</BODY>
<SCRIPT LANGUAGE="javaScript">
<!--
var x=new Array(10);
var y=new Array(10);
var dif1=0;
function RS(){
cosVal=textX.value;
sinVal=textY.value;
sp=eval(textSP.value);
dif1=dif1+0.05;

for(i=1;i<11;i++){
x[i]=document.all("MovePoint"+i).style.left;
y[i]=document.all("MovePoint"+i).style.top;
}

document.all("MovePoint1").style.left =400+200*Math.cos(cosVal*dif1);
document.all("MovePoint1").style.top=250+150*Math.sin(sinVal*dif1);

for(i=2;i<11;i++){
document.all("MovePoint" + i).style.left =x[i-1];
document.all("MovePoint" + i).style.top=y[i-1];
}

sp=100-10*sp;
timeID=window.setTimeout("RS()",sp);
}

function Stop(){
clearTimeout(timeID);
}

function Seiretsu(){
clearTimeout(timeID);
for(i=1;i<11;i++){
document.all("MovePoint" + i).style.left =310-10*i;
document.all("MovePoint" + i).style.top=50;
}
}
function adx(){
if(textX.value<10){
textX.value=eval(textX.value)+1;
}
}

function ddx(){
if(textX.value>1){
textX.value=eval(textX.value)-1;
}
}

function ady(){
if(textY.value<10){
textY.value=eval(textY.value)+1;
}
}

function ddy(){
if(textY.value>1){
textY.value=eval(textY.value)-1;
}
}

function adsp(){

if(textSP.value<10){

textSP.value=eval(textSP.value)+1;

}

}

function ddsp(){
if(textSP.value>0){
textSP.value=eval(textSP.value)-1;
}
}
-->
</SCRIPT>
</HTML>