JavaScript

Klimat Robot Nevroni Zmenek Predstavitev Motor Izdelki

Osnove Napredno

Osnove Tekst Grafika Napredno

Osnove Json Podatki Napredno

Osnove Jedro Podatki Bool Programi Uvoz Napredno

Osnove Tcp Programi Uvoz Napredno

PhpMyAdmin Dokumenti Sistem Crontab Nadgradi

JavaScript Grafika Nov zavihek

<!JavaScript Grafika simulacija.htm>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <link rel=stylesheet href="../../css.css" type="text/css"/>
  <title>3D enačba</title>
 </head>
 <body onload="izbris();">
   <div style="position:absolute;top:95pt;left:5pt"><canvas id="diagram" width="750" height="401" style="border:1px solid #d3d3d3;">
   Brksalnik ne podpira HTML5 canvas značke.</canvas></div>
  <form name=form1>
    Izris parametrične enačbe
    p(<input type=text name=pmin value="0" size=1/>..<input type=text name=pmax value="749" size=1/>)
    t(<input type=text name=tmin value="0" size=1/>..<input type=text name=tmax value="20" size=1/>)
    <input type="radio" name="izgled" checked onClick="javascript:iz=0">pika<input type="radio" name="izgled" onClick="javascript:iz=1">simulacija<input type="radio" name="izgled" onClick="javascript:iz=2">senca<input type="radio" name="izgled" onClick="javascript:iz=3">megla<br/>
    <input type=text name=enacbax value="" size=100/>=x<br/>
    <input type=text name=enacbay value="" size=100/>=y<br/>
    <input type=text name=enacbaz value="255*sin(2*PI/510*p)" size=100/>=z<br/>
    <input type=button value="Moj graf" onclick="javascript:t=form1.tmin.value;izris();"/>
    <input type=button value="Elipsa" onclick="javascript:form1.enacbax.value='200*cos(2*PI/360*p)';form1.enacbay.value='10*t*sin(2*PI/(360-t)*p)';t=form1.tmin.value;izris();"/>
    <input type=button value="Vijuge" onclick="javascript:form1.enacbax.value='200*pow(cos(5*PI/360*p),1)';form1.enacbay.value='200*pow(sin(3*PI/(360-t)*p),1)';t=form1.tmin.value;izris()"/>
    <input type=button value="Polž" onclick="javascript:form1.enacbax.value='p/3.59*cos(2*PI/180*p)';form1.enacbay.value='p/3.59*sin(2*PI/(180-t)*p)';t=form1.tmin.value;izris()"/>
    <input type=button value="Sigmoid" onclick="javascript:form1.enacbax.value='p-375';form1.enacbay.value='400*(1/(1+exp(-(p-375+5*t)/20)))-200';t=form1.tmin.value;izris()"/>
    <input type=button value="Vzorec" onclick="javascript:form1.enacbax.value='p/3.59*pow(cos(2*PI/180*p),3)';form1.enacbay.value='p/3.59*pow(sin(2*PI/(180-t)*p),3)';t=form1.tmin.value;izris()"/>
    <input type=button value="Koordinate" onclick="koordinate()"/>
    <input type=button value="Briši" onclick="javascript:t=form1.tmax.value+1;izbris();"/>
  </form>
  <script language="JavaScript">
   var timerID = null;iz=0
   function izbris(){var c = document.getElementById("diagram");var ctx = c.getContext("2d");
          ctx.fillStyle = "#ffffff";ctx.fillRect(0,0,750,400);
     }
   function stopizris(){
         clearTimeout(timerID);
         }
   function koordinate(){var c = document.getElementById("diagram");var ctx=c.getContext("2d"); for(x=0;x<188;x++){ctx.fillStyle="#ff0000";ctx.fillRect(x*4,200,1,1);} for(x=0;x<100;x++){ctx.fillStyle="#0000ff";ctx.fillRect(374,x*4,1,1);}}
   function izbris(){var c = document.getElementById("diagram");var ctx = c.getContext("2d");ctx.fillStyle = "#ffffff";ctx.fillRect(0,0,750,401);}
   function co(b){b=Math.abs(b%510); if(b<255) return b; else return 510-b;}
   function izris(){
     var c = document.getElementById("diagram");var ctx = c.getContext("2d");ctx.lineWidth=1;
     for ( p = form1.pmin.value ; p < form1.pmax.value ; p++ ){
       with (Math)
         {c=floor(eval(form1.enacbaz.value));x=375+eval(form1.enacbax.value);y=200-eval(form1.enacbay.value);
              if(iz==0){ctx.fillStyle = 'rgb('+co(c)+','+co(c+171)+','+co(c+341)+')';ctx.fillRect(x,y,1,1);}
         else if(iz==1){if(p==form1.pmin.value){xs=x;ys=y;ctx.fillStyle = "#ffffff";ctx.fillRect(0,0,750,401);}else {ctx.beginPath();ctx.strokeStyle = 'rgb('+co(c)+','+co(c+171)+','+co(c+341)+')';ctx.beginPath();ctx.moveTo(xs,ys);ctx.lineTo(x,y);ctx.stroke();xs=x; ys=y;}}
         else if(iz==2){if(p==form1.pmin.value){xs=x;ys=y;}else {ctx.beginPath();ctx.strokeStyle = 'rgb('+co(c)+','+co(c+171)+','+co(c+341)+')';ctx.moveTo(xs,ys);ctx.lineTo(x,y);ctx.stroke();xs=x; ys=y;}}
         else if(iz==3){if(p==form1.pmin.value){xs=x;ys=y;ctx.fillStyle = "#ffffff";ctx.fillRect(0,0,750,401);}else {ctx.fillStyle = 'rgb('+co(c)+','+co(c+171)+','+co(c+341)+')';ctx.fillRect(x,y,1,1);}}}}
     if(t<form1.tmax.value) {timerID = setTimeout("izris()",100);t++;}}
  </script>
 </body>
</html>