Advertisement
fevzi02

6lab КГ 2vers

Jan 17th, 2022
783
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.            
  35.             let osi = [[0, 0, 0], [10, 0, 0], [0,10,0], [0, 0, 10]]
  36.             let colOSI = ["red", "green", "blue"]
  37.            //EVENT ATTACHMENT
  38.            c.onmousedown = (e)=>{ ctxClicked = true; prevPointer = [e.pageX-8, e.pageY-8];}
  39.             c.onmouseup   = (e)=>
  40.             {
  41.                 ctxClicked = false;
  42.                 prevPointer = [];
  43.                 //saveShape(xRotation, yRotation);
  44.             }
  45.             c.onmousemove = (e)=>
  46.             {
  47.                 if(ctxClicked)
  48.                 {
  49.                     x = e.pageX-8;
  50.                     y = e.pageY-8;
  51.                     if(prevPointer[0]!=x || prevPointer[1]!=y)
  52.                     {
  53.                         xRotation = ((x - prevPointer[0]))/(Math.PI*180);
  54.                         yRotation = ((y - prevPointer[1]))/(Math.PI*180);
  55.                         //console.log(xRotation, yRotation);
  56.                         draw(yRotation, -xRotation);
  57.                         prevPointer = [x, y];
  58.                     }
  59.                 }
  60.             }
  61.            
  62.             function rotate(x, y, z, axis=0, alpha=undefined) // axis 1=x, 2=y, 3=z. 0=no rotation
  63.             {
  64.                 if(axis==0 || alpha===undefined) return [x, y, z];
  65.                 else if(axis==1) return [x, y*Math.cos(alpha)+z*Math.sin(alpha), -y*Math.sin(alpha)+z*Math.cos(alpha)];
  66.                 else if(axis==2) return [x*Math.cos(alpha)+z*Math.sin(alpha), y, -x*Math.sin(alpha)+z*Math.cos(alpha)];
  67.                 else if(axis==3) return [x*Math.cos(alpha)+y*Math.sin(alpha), -x*Math.sin(alpha)+y*Math.cos(alpha), z];
  68.             }
  69.            
  70.             function getProjectionXY(x, y, z, k=30, x_bias=350, y_bias=350) // default is k=120, coeff=0.1, bias=20
  71.             {
  72.                 let scale = 45;
  73.                 return [((k*x)/(z+k))*scale+x_bias, ((k*y)/(z+k))*scale+y_bias];
  74.             }
  75.            
  76.             function draw(degreesX, degreesY)
  77.             {
  78.                 ctx.clearRect(0, 0, 700, 700);
  79.                
  80.                
  81.                 //for(s of shape)
  82.                 for(const i in shape)
  83.                 {
  84.                     ctx.beginPath();
  85.                     shape[i][0] =  rotate(...rotate(...shape[i][0], 1, degreesX), 2, degreesY);
  86.                    
  87.                     ctx.moveTo(...getProjectionXY(...shape[i][0]));
  88.                     for(const j in shape[i])
  89.                     {
  90.                         if(j != 0)
  91.                         {
  92.                             shape[i][j] = rotate(...rotate(...shape[i][j], 1, degreesX), 2, degreesY);
  93.                             ctx.lineTo(...getProjectionXY(...shape[i][j]));
  94.                             ctx.strokeStyle = "black"
  95.                         }
  96.                     }
  97.                     ctx.stroke();
  98.                     ctx.closePath();
  99.                 }
  100.  
  101.                
  102.                
  103.                 osi[0] =  rotate(...rotate(...osi[0], 1, degreesX), 2, degreesY);
  104.                
  105.                
  106.                 for(const j in osi)
  107.                 {   ctx.beginPath();
  108.                     ctx.moveTo(...getProjectionXY(...osi[0]));
  109.                     if(j != 0)
  110.                     {
  111.                         osi[j] = rotate(...rotate(...osi[j], 1, degreesX), 2, degreesY);
  112.                         ctx.lineTo(...getProjectionXY(...osi[j]));
  113.                         ctx.strokeStyle = colOSI[j-1];
  114.                         ctx.stroke();
  115.                         ctx.closePath();
  116.                     }
  117.                 }
  118.                 ctx.stroke();
  119.                 ctx.closePath();
  120.            
  121.             }
  122.         </script>
  123.     </body>
  124. </html>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement