Today we are going to do a rotation of three primary colors. In order to better reflect the effect, I did not use the picture as the background, and we will directly look at the effect.

This is the effect we want to achieve, with red, blue and green circles rotating. The main problems we need to solve are how to use WebGL to draw a fuzzy circle and how to make the three circles rotate around one point. At the same time, if you like, you can also make an extension, such as changing the center of rotation and so on, so that the effect will be better rich, I will not do extension here.

I won’t go over the basics here, but you can take a look at my other basics article, where we go straight to the core of WebGL’s fragment shader code.

A WebGL draws a circle

precision mediump float;
varying vec2 uv;
uniform float time;

void main(){
	vec3 color;
	floatThe blur = 15.0; Color. B = 1.0 (pow (uv. X - 0.5, 2.0) + pow (uv. Y - 0.8, 2.0)) * the blur; Gl_FragColor = vec4(color, 1.0); }Copy the code

We use the above code to easily construct a circle, let’s take a look at this easy to draw a circle principle. First we define a variable of type VEC3, which is used to store the color value after we change it. Next, we define a blur variable of type float, which controls the blur distance to draw the circle.

Color. B = 1.0 (pow (uv. X - 0.5, 2.0) + pow (uv. Y - 0.8, 2.0)) * the blur;Copy the code

This line of code is the key to drawing the circle, and we use concrete coordinate examples to illustrate.

The coordinate system in the diagram defines the point A(0.5,0.8) at which we want to draw the circle, whose coordinates you can find in the formula above. Let’s plug in the W, X, and U points. The pow function is a squared function, and pow(x,y) returns x to the y.

W = > 1.0 (0.5 0.5, 2.0) + (pow pow (0.77-0.8, 2.0)) * 15.0 = 0.865 X = > > 1.0 (0.5 0.5, 2.0) + (pow pow (0.4 to 0.8, * 15.0 = 2.0)) > 1.4 U = > 1.0 (0.1 0.5, 2.0) + (pow pow (0.1-0.8, 2.0)) * 15.0 = > 8.75

The further away we are from point A in the whole two-dimensional plane, the more we end up calculating. Rgba values in WebGL range from 0.0 to 1.0.

Two draw a three-color circle

We already know how to draw a circle, so let’s draw three circles.

precision mediump float;
varying vec2 uv;
uniform float time;

void main(){
	vec3 color;
	floatThe blur = 15.0; Color. R = 1.0 (pow (uv. X - 0.24, 2.0) + pow (uv. Y - 0.35, 2.0)) * the blur; Color. G = 1.0 (pow (uv. X - 0.75, 2.0) + pow (uv. Y - 0.35, 2.0)) * the blur; Color. B = 1.0 (pow (uv. X - 0.5, 2.0) + pow (uv. Y - 0.8, 2.0)) * the blur; Gl_FragColor = vec4(color, 1.0); }Copy the code


Three rotation three color circle

precision mediump float;
varying vec2 uv;
uniform float time;

void main(){
	vec3 color;
	floatThe blur = 15.0; Vec2 rotateCenter = vec2(0.5, 0.5); Vec2 circleA = vec2(rotatecenter. x + 0.3*cos(radians(90.0+time)), rotatecenter. y + 0.3*sin(radians(90.0+time))); Vec2 circleB = vec2(rotatecenter. x + 0.3*cos(radians(210.0+time)), rotatecenter. y + 0.3*sin(radians(210.0+time)); Vec2 circleC = vec2(rotatecenter. x + 0.3*cos(radians(-30.0+time)), radians(-30.0+time)); Color.r = 1.0 - (pow(uv.x - circleb.x,2.0) + pow(uv.y - circleb.y,2.0))*blur; Color.g = 1.0 - (pow(uv.x - circlec.x,2.0) + pow(uv.y - circlec.y,2.0))*blur; Color.b = 1.0 - (pow(uv.x - circlea.x,2.0) + pow(uv.y - circlea.y,2.0))*blur; Gl_FragColor = vec4(color, 1.0); }Copy the code

First we define the rotation center of the tricolor circle. I defined the rotateCenter(0.5,0.5). Next we will associate the center of the tricolor circle with this point.











Vec2 (Rotatecenter. x + 0.3*cos(Radians (90.0)), Rotatecenter. y + 0.3*sin(Radians (90.0))Copy the code

In the code, rotatecenter. x is x0, rotatecenter. y is y0, 0.3 is r, which is the radius of the circle *PI/180. Where 90.0 is the Angle of point A relative to point O. In this way, we can associate the three points ABC with the point O. At this point, as long as we change the Angle value of the three points ABC relative to the point O from time to time, the effect of rotation can be achieved.

Vec2 circleA = vec2(rotatecenter. x + 0.3*cos(radians(90.0+time)), rotatecenter. y + 0.3*sin(radians(90.0+time)));Copy the code

Above, we add a variable time to the parameter of radians(90.0+time). This time will increase by 1 from 0, so that the Angle of ABC three points will change from time to time relative to O point, and then complete the rotation.

Color.b = 1.0 - (pow(uv.x - circlea.x,2.0) + pow(uv.y - circlea.y,2.0))*blur;Copy the code

Finally, we will always rotate the three-color circle center coordinates to the color drawing circle calculation formula, so complete.

You can change the rotation manually, and you can change the circle if you use the 2nd power or the 1st power, and you’ll get a different effect, but I won’t go through all the examples for the sake of space.

Color.b = 1.0 - (pow(uv.x - circlea.x,2.0) + pow(uv.y - circlea.x,2.0))*blur;Copy the code

Well, in case you are disappointed with the result, you just need to set the rotation of color. B to x and the above effect will appear. You can try more effects yourself.

Finally, attach the code address: gitee.com/wangtao_it_… This time the code is rotatergb.html under the project