API tools faq
paste
Advertisement
fevzi02

7лаба

fevzi02
Feb 5th, 2022
1,384
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.12 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>7 Лаба</title>
  6.     </head>
  7.     <body>
  8.         <style>
  9.  
  10.             body
  11.             {
  12.                 background: #C5D0E6
  13.             }
  14.  
  15.             canvas
  16.             {
  17.                 display: block;
  18.                 margin: auto auto;
  19.                 border: 1px solid #04112F;
  20.                 background: #CBB6CE;
  21.             }
  22.         </style>
  23.  
  24.         <canvas id='canvas' width='500' height='500'></canvas>
  25.  
  26.         <script>
  27.             let c = document.getElementById("canvas");
  28.             let ctx = c.getContext('2d');
  29.  
  30.  
  31.             var vertices = [];
  32.             var vertices1 = [];
  33.             var a = [];
  34.  
  35.             var context, imData;
  36.            
  37.             const Point = function (x, y, z) {
  38.                 this.x = x;
  39.                 this.y = y;
  40.                 this.z = z;
  41.             };
  42.        
  43.             function Pixel(color)
  44.             {
  45.                 imgData = ctx.createImageData(1, 1);
  46.  
  47.                 imgData.data[0] = color.r;
  48.                 imgData.data[1] = color.g;
  49.                 imgData.data[2] = color.b;
  50.                 imgData.data[3] = color.a;
  51.             }
  52.    
  53.             let pyramid = [ [200, 40,  500],  //A
  54.                             [390, 240, 500],  //B
  55.                             [150, 184, 500],  //C
  56.                             [350, 181, 550]]; //D
  57.    
  58.             let octahedron = [[200, 150, 100],      //A
  59.                             [100, 275, 0],         //B
  60.                             [230, 275, 0],         //C
  61.                             [300, 275, 150],       //D
  62.                             [100, 275, 150],       //E
  63.                             [200, 400, 100]];      //F                  
  64.        
  65.                            
  66.             function Grafic() {
  67.                 // Pyramid
  68.                 vertices.push(new Point(...pyramid[0]));//A
  69.                 vertices.push(new Point(...pyramid[1]));//B
  70.                 vertices.push(new Point(...pyramid[2]));//C
  71.                 vertices.push(new Point(...pyramid[3]));//D
  72.                 //(ABC)
  73.                 Z_buf(vertices[0], vertices[1], vertices[2], {r: 165, g: 12, b: 15, a: 250});
  74.                 //(ACD)
  75.                 Z_buf(vertices[0], vertices[2], vertices[3], {r: 255, g: 25, b: 9, a: 255});
  76.                 //(ABD)
  77.                 Z_buf(vertices[0], vertices[1], vertices[3], {r: 2, g: 2, b: 5, a: 255});
  78.                 //(BCD)
  79.                 Z_buf(vertices[1], vertices[2], vertices[3], {r: 229, g: 102, b: 153, a: 255});
  80.                
  81.  
  82.  
  83.                 //Octahedron
  84.                 vertices1.push(new Point(...octahedron[0]));//A
  85.                 vertices1.push(new Point(...octahedron[1]));//B
  86.                 vertices1.push(new Point(...octahedron[2]));//C
  87.                 vertices1.push(new Point(...octahedron[3]));//D
  88.                 vertices1.push(new Point(...octahedron[4]));//E
  89.                 vertices1.push(new Point(...octahedron[5]));//F
  90.                 //(ABC)
  91.                 Z_buf(vertices1[0], vertices1[1], vertices1[2], {r: 0, g: 0, b: 0, a: 250});
  92.                 //(ACD)
  93.                 Z_buf(vertices1[0], vertices1[2], vertices1[3], {r: 51, g: 47, b: 44, a: 255});
  94.                 //(ADE)
  95.                 Z_buf(vertices1[0], vertices1[3], vertices1[4], {r: 0, g: 255, b: 0, a: 255});
  96.                 //(AEB)
  97.                 Z_buf(vertices1[0], vertices1[4], vertices1[1], {r: 0, g: 255, b: 255, a: 255});
  98.                 //(FBC)
  99.                 Z_buf(vertices1[5], vertices1[1], vertices1[2], {r: 255, g: 0, b: 0, a: 250});
  100.                 //(FCD)
  101.                 Z_buf(vertices1[5], vertices1[2], vertices1[3], {r: 155, g: 45, b: 48, a: 255});
  102.                 //(FDE)
  103.                 Z_buf(vertices1[5], vertices1[3], vertices1[4], {r: 255, g: 255, b: 0, a: 255});
  104.                 //(FEB)
  105.                 Z_buf(vertices1[5], vertices1[4], vertices1[1], {r: 251, g: 215, b: 155, a: 255});
  106.             }
  107.    
  108.  
  109.             // алгоритм Z-буфера реализую с помощью растеризации треугольника
  110.             function Z_buf(b1, b2, b3, color)
  111.             {
  112.                 var foc = 500000;
  113.                 var dx13, dx12, dx23;
  114.                 var dz13, dz12, dz23;
  115.                 var kz, bz;
  116.            
  117.                 // упорядочиваем координаты по значению y
  118.                 if (b2.y < b1.y)
  119.                 {
  120.                     [b1.y, b2.y] = [b2.y, b1.y];
  121.                     [b1.x, b2.x] = [b2.x, b1.x];
  122.                     [b1.z, b2.z] = [b2.z, b1.z];
  123.                 }
  124.                 if (b3.y < b1.y)
  125.                 {
  126.                     [b1.y, b3.y] = [b3.y, b1.y];
  127.                     [b1.x, b3.x] = [b3.x, b1.x];
  128.                     [b1.z, b3.z] = [b3.z, b1.z];
  129.                 }
  130.                 if (b3.y < b2.y)
  131.                 {
  132.                     [b2.y, b3.y] = [b3.y, b2.y];
  133.                     [b2.x, b3.x] = [b3.x, b2.x];
  134.                     [b2.z, b3.z] = [b3.z, b2.z];
  135.                 }
  136.  
  137.                 // нахождение приращения
  138.                 if (b3.y != b1.y)
  139.                 {
  140.                     dx13 = Math.trunc(b3.x - b1.x);
  141.                     dx13 /= (b3.y - b1.y);
  142.                     dz13 = Math.trunc(b3.z - b1.z);
  143.                     dz13 /= (b3.y - b1.y);
  144.                 }
  145.                 else
  146.                 {
  147.                     dx13 = 0;
  148.                     dz13 = 0;
  149.                 }
  150.            
  151.                 if (b2.y != b1.y)
  152.                 {
  153.                     dx12 = Math.trunc(b2.x - b1.x);
  154.                     dx12 /= (b2.y - b1.y);
  155.                     dz12 = Math.trunc(b2.z - b1.z);
  156.                     dz12 /= (b2.y - b1.y);
  157.                 }
  158.                 else
  159.                 {
  160.                     dx12 = 0;
  161.                     dz12 = 0;
  162.                 }
  163.                
  164.                 if (b3.y != b2.y)
  165.                 {
  166.                     dx23 = Math.trunc(b3.x - b2.x);
  167.                     dx23 /= (b3.y - b2.y);
  168.                     dz23 = Math.trunc(b3.z - b2.z);
  169.                     dz23 /= (b3.y - b2.y);
  170.                 }
  171.                 else
  172.                 {
  173.                     dx23 = 0;
  174.                     dz23 = 0;
  175.                 }
  176.            
  177.                 var wx1 = Math.trunc(b1.x);
  178.                 var wx2 = wx1;
  179.                 var _dx13 = dx13;
  180.                
  181.                 var wz1 = Math.trunc(b1.z);
  182.                 var wz2 = wz1;
  183.                 var _dz13 = dz13;
  184.                
  185.                 // упорядочиваем приращения
  186.                 if (dx13 > dx12)
  187.                     [dx13, dx12] = [dx12, dx13];
  188.                 if (dz13 > dz12)
  189.                     [dz13, dz12] = [dz12, dz13];
  190.                 // первый полутреугольник
  191.                 for (var i = b1.y; i < b2.y; i++)
  192.                 {
  193.                     kz =(wz1 - wz2) / (wx1 - wx2);
  194.                     bz = wz2 - (kz * wx2);
  195.  
  196.                     for (var j = Math.trunc(wx1); j <= Math.trunc(wx2); j++)
  197.                     {
  198.                         z_gr = j * kz + bz; // находим значения z через уравнение прямой z=kz*x+bz
  199.                        
  200.                         //алгоритм z-буфера
  201.                         if (a[i][j] > z_gr)
  202.                         {
  203.                             a[i][j] = z_gr;
  204.                             //x_gr y_gr - перспективная проекция получится при очень большом foc
  205.                             x_gr = Math.round(foc * j / (z_gr + foc));
  206.                             y_gr = Math.round(foc * i / (z_gr + foc));
  207.                            
  208.                             Pixel(color);
  209.                             ctx.putImageData(imgData, x_gr, y_gr);
  210.                         }
  211.                     }
  212.                     wx1 += dx13;
  213.                     wx2 += dx12;
  214.                     wz1 += dz13;
  215.                     wz2 += dz12;
  216.                 }
  217.  
  218.                 //случай когда верхнего треугольника нет
  219.                 if (b1.y == b2.y)
  220.                 {
  221.                     wx1 = Math.trunc(b1.x);
  222.                     wx2 = Math.trunc(b2.x);
  223.                    
  224.                     wz1 = Math.trunc(b1.z);
  225.                     wz2 = Math.trunc(b2.z);
  226.                 }
  227.  
  228.                 // упорядочиваем приращения
  229.                 if (_dx13 < dx23)
  230.                     [_dx13, dx23] = [dx23, _dx13];
  231.                 if (_dz13 < dz23)
  232.                     [_dz13, dz23] = [dz23, _dz13];
  233.  
  234.                 //(второй полутреугольник) совершаем те же действия, что и для первого полутреугольника
  235.                 for (var i = b2.y; i <= b3.y; i++)
  236.                 {
  237.                     kz =(wz1 - wz2) / (wx1 - wx2);
  238.                     bz = wz2 - (kz * wx2);
  239.                     for (var j = Math.trunc(wx1); j <= Math.trunc(wx2); j++)
  240.                     {
  241.                         z_gr = j * kz + bz;
  242.                         if (a[i][j] > z_gr)
  243.                         {
  244.                             a[i][j] = z_gr;
  245.                            
  246.                             x_gr = Math.round(foc * j / (z_gr + foc));
  247.                             y_gr = Math.round(foc * i / (z_gr + foc));
  248.            
  249.                             Pixel(color);
  250.                             ctx.putImageData(imgData, x_gr, y_gr);
  251.                         }
  252.                     }
  253.                     wx1 += _dx13;
  254.                     wx2 += dx23;
  255.                     wz1 += _dz13;
  256.                     wz2 += dz23;
  257.                 }
  258.             }
  259.            
  260.             ctx.strokeStyle = "#4682B4";
  261.             ctx.strokeRect(0, 0, 500, 500);
  262.             for (var i = 0; i < 1500; i++)
  263.             {
  264.                 a[i] = [];
  265.                 for (var j = 0; j < 1500; j++)
  266.                     a[i][j] = 10000000;
  267.             }
  268.  
  269.             Grafic();
  270.        
  271.         </script>
  272.     </body>
  273. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!