fevzi02

6lab КГ

Jan 17th, 2022 (edited)
184
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5.     <body>
  6.         <canvas id="pic" width="700" height="700" style="border:1px solid red">
  7.         </canvas><br>
  8.         <button onclick="ctx.clearRect(0,0,700,700);">clear</button><br>
  9.         <button onclick="draw(0,0)">draw</button>
  10.  
  11.         <script type="text/javascript">
  12.             let _ = undefined;
  13.             let c = document.getElementById('pic');
  14.             let ctx = c.getContext('2d');
  15.             let shape = []
  16.             let xRotation=0, yRotation=0;
  17.             let testDegreeX = 200/(Math.PI*180);
  18.             let testDegreeY = 200/(Math.PI*180);
  19.             let prevPointer = [];
  20.             let ctxClicked = false;
  21.             ctx.lineWidth = 1;
  22.            
  23.             //DIRECT COMPUTATION PART
  24.             let temp;
  25.             for(let x=-5; x<5; x+=0.1)
  26.             {
  27.                 temp = [];
  28.                 for(let z=-5; z<5; z+=0.45)
  29.                 {
  30.                     temp.push([x, Math.sin(x+z)/(x+z)*4, z]);
  31.                 }
  32.                 shape.push(temp);
  33.             }
  34.             //EVENT ATTACHMENT
  35.             c.onmousedown = (e)=>{ ctxClicked = true; prevPointer = [e.pageX-8, e.pageY-8];}
  36.             c.onmouseup   = (e)=>
  37.             {
  38.                 ctxClicked = false;
  39.                 prevPointer = [];
  40.                 //saveShape(xRotation, yRotation);
  41.             }
  42.             c.onmousemove = (e)=>
  43.             {
  44.                 if(ctxClicked)
  45.                 {
  46.                     x = e.pageX-8;
  47.                     y = e.pageY-8;
  48.                     if(prevPointer[0]!=x || prevPointer[1]!=y)
  49.                     {
  50.                         xRotation = ((x - prevPointer[0]))/(Math.PI*180);
  51.                         yRotation = ((y - prevPointer[1]))/(Math.PI*180);
  52.                         //console.log(xRotation, yRotation);
  53.                         draw(yRotation, -xRotation);
  54.                         prevPointer = [x, y];
  55.                     }
  56.                 }
  57.             }
  58.            
  59.             function rotate(x, y, z, axis=0, alpha=undefined) // axis 1=x, 2=y, 3=z. 0=no rotation
  60.             {
  61.                 if(axis==0 || alpha===undefined) return [x, y, z];
  62.                 else if(axis==1) return [x, y*Math.cos(alpha)+z*Math.sin(alpha), -y*Math.sin(alpha)+z*Math.cos(alpha)];
  63.                 else if(axis==2) return [x*Math.cos(alpha)+z*Math.sin(alpha), y, -x*Math.sin(alpha)+z*Math.cos(alpha)];
  64.                 else if(axis==3) return [x*Math.cos(alpha)+y*Math.sin(alpha), -x*Math.sin(alpha)+y*Math.cos(alpha), z];
  65.             }
  66.            
  67.             function getProjectionXY(x, y, z, k=30, x_bias=350, y_bias=350) // default is k=120, coeff=0.1, bias=20
  68.             {
  69.                 let scale = 50;
  70.                 return [((k*x)/(z+k))*scale+x_bias, ((k*y)/(z+k))*scale+y_bias];
  71.             }
  72.            
  73.             function draw(degreesX, degreesY)
  74.             {
  75.                 ctx.clearRect(0, 0, 700, 700);
  76.                 //for(s of shape)
  77.                 for(const i in shape)
  78.                 {
  79.                     ctx.beginPath();
  80.                     shape[i][0] =  rotate(...rotate(...shape[i][0], 1, degreesX), 2, degreesY);
  81.                     ctx.moveTo(...getProjectionXY(...shape[i][0]));
  82.                     for(const j in shape[i])
  83.                     {
  84.                         if(j != 0)
  85.                         {
  86.                             shape[i][j] = rotate(...rotate(...shape[i][j], 1, degreesX), 2, degreesY);
  87.                             ctx.lineTo(...getProjectionXY(...shape[i][j]));
  88.                         }
  89.                     }
  90.                     ctx.stroke();
  91.                     ctx.closePath();
  92.                 }
  93.             }
  94.         </script>
  95.     </body>
  96. </html>
RAW Paste Data Copied