Advertisement
fevzi02

7lab КГ

Feb 2nd, 2022
813
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.37 KB | None | 0 0
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.     </head>
  5.     <body>
  6.         <canvas id='pic' width="500" height="500" ></canvas>
  7.  
  8.  
  9.         <style>
  10.                 body{
  11.                     background-color: #AFDAFC
  12.                 }
  13.  
  14.                 #pic {
  15.                         display: block;
  16.                         margin: auto auto;
  17.                         transition: all 1s ease;
  18.                 }
  19.  
  20.                 #pic:hover {
  21.                         box-shadow: 10px 10px 10px 10px rgba(15,15,15,.5);
  22.                 }
  23.         </style>
  24.  
  25.  
  26.         <script>
  27.  
  28.             let c = document.getElementById('pic');
  29.             let ctx = c.getContext('2d');
  30.  
  31.             let _k = 30;
  32.             let prevPointer = [];
  33.             let ctxClicked = false;
  34.             let xRadians = 0; let yRadians = 0;
  35.  
  36.             function drawTEXT(){
  37.                   ctx.beginPath();
  38.                   ctx.rect(0, 0, 500, 500);
  39.                   ctx.fillStyle = "#50C878";
  40.                   ctx.fill();
  41.                   ctx.font = "48px serif";
  42.                   ctx.strokeText("Потяните за экран", 70, 250);
  43.                 }
  44.  
  45.             class Point {
  46.                 constructor(x, y, z) {
  47.                         this.x = x;
  48.                         this.y = y;
  49.                         this.z = z;}
  50.  
  51.                 get coords() {
  52.                         return [this.x, this.y, this.z];}
  53.  
  54.                 add(p) {
  55.                         this.x += p.x;
  56.                         this.y += p.y;
  57.                         this.z += p.z;
  58.                         return this;}
  59.  
  60.                 divide(divisor) {
  61.                         this.x /= divisor;
  62.                         this.y /= divisor;
  63.                         this.z /= divisor;
  64.                         return this;}
  65.  
  66.                 distance(p) {
  67.                     return Math.sqrt(Math.pow(p.x - this.x, 2) + Math.pow(p.y - this.y, 2) + Math.pow(p.z - this.z, 2));}
  68.  
  69.                 rotate(axis=0, alpha=undefined) {
  70.  
  71.                             if(axis==0 || alpha===undefined)
  72.                                     return this;
  73.  
  74.                         else if(axis==1)
  75.                                 [this.x, this.y, this.z] =
  76.                                                                                         [ this.x,
  77.                                                                                           this.y*Math.cos(alpha)+this.z*Math.sin(alpha),
  78.                                                                                          -this.y*Math.sin(alpha)+this.z*Math.cos(alpha)    ];
  79.                         else if(axis==2)
  80.                                 [this.x, this.y, this.z] =
  81.                                                                                         [ this.x*Math.cos(alpha)+this.z*Math.sin(alpha),
  82.                                                                                           this.y,
  83.                                                                                          -this.x*Math.sin(alpha)+this.z*Math.cos(alpha)    ];
  84.                         else if(axis==3)
  85.                                 [this.x, this.y, this.z] =
  86.                                                                                         [ this.x*Math.cos(alpha)+this.y*Math.sin(alpha),
  87.                                                                                          -this.x*Math.sin(alpha)+this.y*Math.cos(alpha),
  88.                                                                                           this.z                                           ];
  89.                         return this;
  90.                     }
  91.             }
  92.  
  93.             class Poly {
  94.                 constructor(pointsArray) {
  95.                         this.points = pointsArray;
  96.                         this.center = this.points.reduce((acc, p) => acc.add(p),
  97.                                                                                                                      new Point(0, 0, 0)).divide(this.points.length);
  98.                         this.color = '#' + (Math.random().toString(16)).slice(2, 8)}
  99.  
  100.                 rotate(axis=0, alpha=undefined) {
  101.                         for(const i in this.points)
  102.                             this.points[i].rotate(axis, alpha);
  103.                         this.center.rotate(axis, alpha);
  104.                         return this;}
  105.             }
  106.  
  107.             let cameraPosition = new Point(0, 0, -_k);
  108.  
  109.             let cube = {
  110.                 a: [0,  0, 0],
  111.                 b: [2,  0, 0],
  112.                 c: [0, -2, 0],
  113.                 d: [2, -2, 0],
  114.                 e: [0,  0, 2],
  115.                 f: [2,  0, 2],
  116.                 g: [0, -2, 2],
  117.                 h: [2, -2, 2],
  118.             };
  119.  
  120.             let pyramid = {
  121.                 a: [4, -2, 1],
  122.                 b: [4,  0, 2],
  123.                 c: [3,  0, 0],
  124.                 d: [5,  0, 0],
  125.             };
  126.  
  127.  
  128.             let cube_comb    = ['acdb', 'efhg', 'cdhg',
  129.                                                 'abfe', 'acge', 'bdhf'];
  130.  
  131.             let pyramid_comb = ['abc', 'abd', 'adc', 'bcd'];
  132.  
  133.  
  134.             let faces = [...cube_comb.map( i =>
  135.                                         new Poly(  [...i].map(   _ =>
  136.                                                                     new Point(...cube[_])   )  ) ),
  137.                                ...pyramid_comb.map( i =>
  138.                                            new Poly(  [...i].map(   _ =>
  139.                                                                        new Point(...pyramid[_])   )  ) )]
  140.  
  141.             function projection(x, y, z, k=_k, x_bias=250, y_bias=250){
  142.                     let scale = 5;
  143.                     return [((k*x << scale)/(z+k))+x_bias, ((k*y << scale)/(z+k))+y_bias];
  144.             }
  145.  
  146.             function distanceComparator(t1, t2){
  147.                     let result
  148.                     if (cameraPosition.distance(t1.center) > cameraPosition.distance(t2.center))
  149.                             result = -1
  150.                     else
  151.                             if (cameraPosition.distance(t1.center) < cameraPosition.distance(t2.center))
  152.                                     result = 1
  153.                             else
  154.                                     result = 0
  155.                     return result
  156.             }
  157.  
  158.             function draw(xRotation, yRotation){
  159.                     ctx.clearRect(0, 0, 500, 500)
  160.                     ctx.beginPath();
  161.                   ctx.rect(0, 0, 500, 500);
  162.                   ctx.fillStyle = "#DCD0FF";
  163.                   ctx.fill();
  164.  
  165.  
  166.                     faces.sort(distanceComparator);
  167.                     for(const i in faces) {
  168.                             faces[i].rotate(1, xRotation).rotate(2, yRotation);
  169.                             ctx.fillStyle = faces[i].color;
  170.                             ctx.beginPath();
  171.                             ctx.moveTo(...projection(...faces[i].points[0].coords));
  172.                             for(const p of faces[i].points)
  173.                                     ctx.lineTo(...projection(...p.coords));
  174.                             ctx.fill();
  175.                             ctx.closePath();
  176.                     }
  177.             }
  178.  
  179.             c.onmousedown = (e) => {
  180.                     ctxClicked = true;
  181.                     prevPointer = [e.clientX, e.clientY];}
  182.  
  183.             c.onmouseup = (e) => {
  184.                     ctxClicked = false;
  185.                     prevPointer = [];}
  186.  
  187.             c.onmousemove = (e) => {
  188.                     if(ctxClicked)
  189.                     {
  190.                             x = e.clientX;
  191.                             y = e.clientY;
  192.                             if(prevPointer[0] != x || prevPointer[1] != y)
  193.                             {
  194.                                     xRadians = ((x - prevPointer[0]))/(Math.PI*180);
  195.                                     yRadians = ((y - prevPointer[1]))/(Math.PI*180);
  196.                                     draw(yRadians, xRadians );
  197.                                     prevPointer = [x, y];
  198.                                     }}}
  199.                 drawTEXT();
  200.         </script>
  201.     </body>
  202. </html>
  203.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement