rotating-cube/cube.html at main · Sneaky1000/rotating-cube · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cube</title>
  <style>
    body {
      margin: 0;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <script>
    // Constants
    const COLOR_BG = "black";
    const COLOR_CUBE = "red";
    // Speed = rotations per second
    const SPEED_X = 0.05;
    const SPEED_Y = 0.15;
    const SPEED_Z = 0.10;
    const POINT3D = function(x, y, z) {
      this.x = x; this.y = y; this.z = z;
    };

    // Set up canvas
    var canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    // Set up context
    var ctx = canvas.getContext("2d");

    // Dimensions
    var h = document.documentElement.clientHeight;
    var w = document.documentElement.clientWidth;
    canvas.height = h;
    canvas.width  = w;

    // Colors and lines
    ctx.fillStyle   = COLOR_BG;   // Background
    ctx.strokeStyle = COLOR_CUBE; // Line color
    ctx.lineWidth   = w / 100;    // Line thickness
    ctx.lineCap     = "round";    // Smooths lines

    // Cube parameters
    var cx       = w / 2;
    var cy       = h / 2;
    var cz       = 0;
    var size     = h / 4;
    var vertices = [
      new POINT3D(cx - size, cy - size, cz - size),
      new POINT3D(cx + size, cy - size, cz - size),
      new POINT3D(cx + size, cy + size, cz - size),
      new POINT3D(cx - size, cy + size, cz - size),
      new POINT3D(cx - size, cy - size, cz + size),
      new POINT3D(cx + size, cy - size, cz + size),
      new POINT3D(cx + size, cy + size, cz + size),
      new POINT3D(cx - size, cy + size, cz + size)
    ];

    var edges = [
      [0, 1], [1, 2], [2, 3], [3, 0], // Back face
      [4, 5], [5, 6], [6, 7], [7, 4], // Ffront face
      [0, 4], [1, 5], [2, 6], [3, 7]  // Connecting sides
    ];

    // Set up animation loop
    var timeDelta, timeLast = 0;
    requestAnimationFrame(loop);

    function loop(timeNow) {
      // Calculate time difference
      timeDelta = timeNow - timeLast;
      timeLast  = timeNow;

      // background
      ctx.fillRect(0, 0, w, h);

      // Rotate cube along the z-axis
      let angle = timeDelta * 0.001 * SPEED_Z * Math.PI * 2;

      for (let v of vertices) {
          let dx = v.x - cx;
          let dy = v.y - cy;
          let x = dx * Math.cos(angle) - dy * Math.sin(angle);
          let y = dx * Math.sin(angle) + dy * Math.cos(angle);
          v.x = x + cx;
          v.y = y + cy;
        };

      // Rotate the cube along the x axis
      angle = timeDelta * 0.001 * SPEED_X * Math.PI * 2;
        for (let v of vertices) {
          let dy = v.y - cy;
          let dz = v.z - cz;
          let y = dy * Math.cos(angle) - dz * Math.sin(angle);
          let z = dy * Math.sin(angle) + dz * Math.cos(angle);
          v.y = y + cy;
          v.z = z + cz;
        }

        // Rotate the cube along the y axis
        angle = timeDelta * 0.001 * SPEED_Y * Math.PI * 2;
        for (let v of vertices) {
          let dx = v.x - cx;
          let dz = v.z - cz;
          let x = dz * Math.sin(angle) + dx * Math.cos(angle);
          let z = dz * Math.cos(angle) - dx * Math.sin(angle);
          v.x = x + cx;
          v.z = z + cz;
        }

      // Draw each edge
      for (let edge of edges) {
        ctx.beginPath();
        ctx.moveTo(vertices[edge[0]].x, vertices[edge[0]].y);
        ctx.lineTo(vertices[edge[1]].x, vertices[edge[1]].y);
        ctx.stroke();
      }

      // Call the next frame
      requestAnimationFrame(loop);
    }
  </script>
</body>
</html>