Advertisement
fevzi02

6лаба

Jan 17th, 2022
744
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="shortcut icon" href="images/faviconSTD.png" type="image/png">
  5. </head>
  6.     <body>
  7.         <canvas id="pic" width="700" height="700" style="border:1px solid red">
  8.         </canvas><br>
  9.         <button onclick="ctx.clearRect(0,0,500,500);">clear</button><br>
  10.         <input type="checkbox" id="plot" onchange="isNowDrawing=this.checked; drawingId=endlessDraw(isNowDrawing);">
  11.         <label for="plot">Click to toggle plot</label>
  12.         </input></br>
  13.  
  14.         <script type="text/javascript">
  15.             let _ = undefined;
  16.             let ctx=document.getElementById('pic').getContext('2d');
  17.             let xPr, yPr;
  18.             let xRotation, yRotation, zRotation;
  19.             let xRotation_raw, yRotation_raw, zRotation_raw;
  20.             let isNowDrawing = false;
  21.             let drawingId = -1;
  22.             ctx.lineWidth = 1;
  23.            
  24.             function rotate(x, y, z, axis=0, alpha=undefined) // axis 1=x, 2=y, 3=z. 0=no rotation
  25.             {
  26.                 if(axis==0 || alpha===undefined) return [x, y, z];
  27.                 else if(axis==1) return [x, y*Math.cos(alpha)+z*Math.sin(alpha), -y*Math.sin(alpha)+z*Math.cos(alpha)];
  28.                 else if(axis==2) return [x*Math.cos(alpha)+z*Math.sin(alpha), y, -x*Math.sin(alpha)+z*Math.cos(alpha)];
  29.                 else if(axis==3) return [x*Math.cos(alpha)+y*Math.sin(alpha), -x*Math.sin(alpha)+y*Math.cos(alpha), z];
  30.             }
  31.            
  32.             function endlessDraw(act)
  33.             {
  34.                 if(act)
  35.                 {
  36.                     let a = 0.02;
  37.                     console.log('now drawing');
  38.                     return setInterval(function(){draw(a); a+=0.01; if(a>6.28)a=0;}, 80);
  39.                 }
  40.                 else
  41.                 {
  42.                     clearInterval(drawingId);
  43.                     console.log('stopped drawing');
  44.                 }
  45.             }
  46.            
  47.             function getProjectionXY(x, y, z, k, x_bias, y_bias) // default is k=120, coeff=0.1, bias=20
  48.             {
  49.                 return [(k*x)/(z+k)*50+x_bias, (k*y)/(z+k)*50+y_bias];
  50.             }
  51.            
  52.             function draw(angle=0)
  53.             {
  54.                 ctx.clearRect(0, 0, 700, 700);
  55.                
  56.                 for(let x=-5; x<5; x+=0.1)
  57.                 {
  58.                     [xRotation, yRotation, zRotation] = rotate(x, Math.sin(x-5)/(x-5)*2, -5, 2, angle);
  59.                     [xRotation, yRotation, zRotation] = rotate(xRotation, yRotation, zRotation, 1, 185);
  60.                     ctx.beginPath();
  61.                     ctx.moveTo(...getProjectionXY(xRotation, yRotation, zRotation, 12, 350, 350));
  62.                     for(let z=-5; z<5; z+=0.45)
  63.                     {
  64.                         //ctx.strokeStyle = 'red';
  65.                         [xRotation, yRotation, zRotation] = rotate(x, Math.sin(x+z)/(x+z)*2, z, 2, angle);
  66.                         [xRotation, yRotation, zRotation] = rotate(xRotation, yRotation, zRotation, 1, 185);
  67.                         [xPr, yPr] = getProjectionXY(xRotation, yRotation, zRotation, 12, 350, 350);
  68.                         ctx.lineTo(xPr, yPr);
  69.                     }
  70.                     ctx.stroke();
  71.                     ctx.closePath();
  72.                 }
  73.             }
  74.         </script>
  75.     </body>
  76. </html>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement