波動のソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script type="text/javascript">
    var TimeId,k,c,t=0;
    var a=new Array(1001);
    for (k=0;k<=1000;k++) {
       a[k]=new Array(5);
       a[k][0]="dot"+k;
    }
    function stop(){
       clearTimeout(TimeId);
    }
    function draw(){
       var obj,x,y,aa,ll,i=0;
       aa=document.getElementById("fact1").value;
       ll=document.getElementById("fact2").value;
       for (x=-5;x<5;x+=0.01) {
          y=50*aa*Math.sin((2*x)/(ll));
          obj=document.getElementById("dot"+i);
          a[i][1]=(250+20)+x*50;
          a[i][2]=(250+50)-y;
          obj.style.left=a[i][1];
          obj.style.top=a[i][2];
          a[i][3]=a[i][1]-(250+20);
          i++;
       }
       c=0;
       t=0;
    }
    function move(){
       TimeId=setTimeout("move()",100);
       var obj,x,y,aa,ll,m,i;
       aa=document.getElementById("fact1").value;
       ll=document.getElementById("fact2").value;
       for (i=0;i<=1000;i++) {
          obj=document.getElementById("dot"+i);
          a[i][4]=(250+50)+50*aa*Math.sin(2*Math.PI*(t/20-a[i][3]/(ll*50*Math.PI)));
          a[i][2]=a[i][4];
          obj.style.top=a[i][2];
       }
       t++;
    }
</script>
</head>
<body>
<form>
振幅：<input id="fact1" type="text" size="4">
波長：<input id="fact2" type="text" size="4">π
<input type="button" value="Draw" onClick="draw()">
<input type="button" value="Start" onClick="move()">
<input type="button" value="Stop" onClick="stop()">
</form>
<img src="image/axis.png" style="position:absolute;left:20;top:50">
<script type="text/javascript">
    var j;
    for (j=0;j<=1000;j++){
       document.write("<img id='dot"+j+"' src='image/dot.png' style='position:absolute;top:300;left:270'>");
    }
</script>
</body>
</html>