API tools faq
paste
Advertisement
fevzi02

7lab КГ

fevzi02
Feb 2nd, 2022
822
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.37 KB | None | 0 0
raw download clone embed print report
  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
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!