Advertisement
fevzi02

7лаба

Feb 5th, 2022
1,386
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.12 KB | None | 0 0
  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