26. "A little canvas animation every week" - 3D rotation and collision

Dear students, I'm really sorry, I've been busy interviewing and looking for a job recently, and I've been delayed for a week. Since the previous article received a lot of attention, I decided to add some high-quality demos and pictures to future articles as much as possible. It may be time-consuming, but quality is king, I hope everyone will give some time.

In the previous section we introduced the physics of gravity and screen wrapping in a 3D environment. In fact, the motion states of objects in a three-dimensional environment are basically the same as those in a two-dimensional environment. The main motion states are nothing more than a few: uniform motion, accelerated motion, collision, rotation, etc. Later, if you want to create more complex and regular motion effects, you may need to understand some abstract physical concepts and mathematical knowledge: Brownian motion, normal distribution, matrix transformation, etc. The main content of this section is divided into two parts, the first part introduces the rotation in 3D environment. The second part introduces collision detection.

1. Coordinate rotation

In a two-dimensional environment, we have two ways to make objects do circular motion. The first one requires more conditions:

    // centerX, centerY :旋转中心
    // angle： 角度
    // radius： 旋转半径
    ball.x = centerX + Math.sin(angle)*radius;
    ball.y = centerY + Math.cos(angle)*radius;

    //每一帧角度增加形成圆周运动
    angle += speed;

If you forgot, you can take a look at "A little canvas animation every week" - the content of the circular motion part of trigonometric functions (2). As the content goes further, we get a more advanced way of rotation through simple trigonometric transformations, which uses few conditions:

//x1,y1是球体坐标相对旋转中心的距离
 newX = x1*cos(angle) - y1*sin(angle);
 newY = y1*cos(angle) + x1*sin(angle);

Through the above formula, we can also make the effect of circular motion, but only one condition is required: the rotation angle of the object in each frame.

If you forgot, you can check out the content of "A Little Canvas Animation Every Week" - Coordinate Rotation Advanced Coordinate Rotation section.

Going back to the three-dimensional environment, the difference from the two-dimensional environment is that we have an extra dimension. In addition to the x-axis, y-axis, and z-axis.

That is to say, we can derive three rotation formulas:

//绕Z轴
newX = x * cos(angleZ) - y * sin(angleZ);
newY = y * cos(angleZ) + x * sin(angleZ);

//绕X轴
newY = y * cos(angleX) - z * sin(angleX);
newZ = z * cos(angleX) - y * sin(angleX);

//绕Y轴
newX = x * cos(angleY) - z * sin(angleY);
newZ = z * cos(angleY) + x * sin(angleY);

The above formula may be relatively cumbersome, but if you look closely, you will find that when the object is rotated around a certain axis, the trajectory change of the object is on the plane formed by the other two axes. To put it simply, around the X axis, the Y and Z coordinates of the object change, around the Z axis, the X and Y coordinates of the object change, and the same is true for the Y axis. Wouldn't it be a lot easier to remember this way?

Let's take a look at the actual effect map

In the above figure, the rotation of the object is not a certain axis, but rotates around the X axis and the Y axis at the same time. The code is very simple, check it out rotate-xy.html.

2. Collision detection

In a two-dimensional plane environment, there are many methods for collision detection of objects, such as:

1. Circumscribed geometry collision detection (circumscribed rectangle, circumscribed circle)

2. Distance-based collision detection method

3. ray casting

There are some other more advanced collision detection principles, such as the separation axis theorem, etc. You can study it yourself when you have time, which is described in detail in the book "HTML5 Canvas Core Technology".

Compared with the two-dimensional environment, the three-dimensional environment is more complicated, and it is difficult for us to use the external geometry and ray casting method to break the collision between objects. So, only distance-based collision detection is left. It seems that this is the only method now, but nothing is absolute, and there will always be more accurate and advanced methods. Because, I am not doing game development myself, so my understanding is limited. If you have students around you who are doing game development, especially 3D game development, you can ask them for advice and share it with you.

We know that the distance between two points on the plane is calculated like this:

dx = point1.x - point2.x;
dy = point1.y - point2.y;
distance = Math.sqrt(dx * dx + dy * dy);

Similarly, the distance between two points in a three-dimensional environment follows the following formula:

dx = point1.x - point2.x;
dy = point1.y - point2.y;
dz = point1.z - point2.z;
distance = Math.sqrt(dx * dx + dy * dy + dz * dz);

Let's use the above formula to make a small DEMO. The specific effect is that the color changes to blue when the object collides.

The core code is as follows:

。。。
 function checkCollision (ballA, i) {
        for (var ballB, dx, dy, dz, dist, j = i + 1; j < numBalls; j++) {
          ballB = balls[j];
          dx = ballA.xpos - ballB.xpos;
          dy = ballA.ypos - ballB.ypos;
          dz = ballA.zpos - ballB.zpos;
          dist = Math.sqrt(dx * dx + dy * dy + dz * dz); //距离计算
          if (dist < ballA.radius + ballB.radius) {      //检测
            ballA.color = "#0000ff";
            ballB.color = "#0000ff";
          }
        }
      }
。。。

Please check the detailed code collision.html.

At this point, the content of this chapter is over. We simulate almost all motion effects of objects in a 2D environment. The most important of which is the construction of the three-dimensional environment and the sorting of objects. These two pieces of code let us achieve the three-dimensional effect of the object as much as possible. All other effects are based on these two pieces of code.

You may find that most of the objects we use as examples are actually provided by the native canvas API. Such as: circle, rectangle, ellipse, etc. And there is no native API that tells you how to create a three-dimensional object. In the following chapters, we will learn to draw points, lines, and surfaces, and create more complex three-dimensional objects based on this.

The following content may be updated a little slower. But the quality is absolutely guaranteed. Try to write a high-quality DEMO in every article. I hope everyone understands.

The above is an introduction to "A little canvas animation every week" - 3D rotation and collision. I hope it will be helpful for you to learn javascript. Thank you for your attention to Dreamweaver!