[CSON original] HTML5 font dynamic particle effect announcement is not as difficult as imagined-JX official website home page 3D particle effect rotate 3D [first profile]

Function Description:

Enter the font, press OK, and the dynamic particle effect of the font appears on the right canvas.

Effect preview:

  Enter the displayed content:

Implementation Analysis:

I have seen hongru before, but it is not as difficult as I think -- 3D particle effect on the JX official website homepage, and HTML5 lab of the anent Brick House [] -- play pixel series [2 ], therefore, I also tried to use getImageData to write the particle effect. They should be similar in principle, but they can be entered in the form of any content in the text box, you can get the particle effect of the input content in the canvas. Since the previous two articles have clearly explained the implementation principle of particle effects, we will not detail them here, but will only discuss several key points in implementation.

 

　　1. How to generate a random speed in the 3D coordinates.

In 2D coordinates, if you need to generate a random speed, the method is very simple. We can obtain a random angle and project the speed under the xy axis based on the angle. But how can we generate a random direction speed under 3D coordinates? In fact, we can also use a similar principle. We need two random angles (a1, a2). One angle is used for the projection of the Z axis, and the other for the projection of the x or Y axis. The projection speed in the Z axis is Vz = V * sin (a1), and the projection speed in the xy plane is Vxy = V * cos (a1 ), based on this component, the component projected on the X axis is Vx = Vxy * cos (a2), and the Y axis is Vx = Vxy * sin (a2). The Code is as follows:

                var zSpeed=this.speed*Math.sin(this.angleZ);
var xySpeed=this.speed*Math.cos(this.angleZ);
var xSpeed=xySpeed*Math.cos(this.angleX);
var ySpeed=-xySpeed*Math.sin(this.angleX);

　　

2. How to make random distributions of particles into letters.

First, use getImageData to obtain the information of each pixel in the font, create each vertex object, and save their location, color, transparency, and other information. Then, the particles are distributed at random positions during initialization. when the text is to be composed, the vertex object is quickly moved from the current position to the previously saved position.

 

　　3. How to make the point affected by the Z axis coordinate.

The Z axis coordinates are reflected by the position and size of the point. Therefore, the zaxis of the point is used to calculate the zoom ratio of the point, and then the position and size of the point are recalculated based on the ratio.

　　

ResetOnZValue: function (pos, radius ){
Var z = pos [2];
Var halfWidth = center [0];
Var scale = (halfWidth + z)/halfWidth;
Var newPos = [];
Var newRadius;
NewPos [0] = center [0] + (pos [0]-center [0]) * scale; // calculate the position and size of the ball after the Z axis is affected.
NewPos [1] = center [1]-(center [1]-pos [1]) * scale;
NewPos [2] = z;
NewRadius = radius * scale;
Return [newPos, newRadius]; // return the new coordinates and sizes after the ball is affected by the X axis.
},

For more detailed explanations, refer to the rotate 3D in hongru.

 

Complete demo download: Click to download

Welcome to reprint, please indicate the source: http://www.cnblogs.com/Cson/archive/2012/04/02/2429734.html