Canvas Curved Patch 2

Write the front

The sister of this article is a canvas surface film 1 If you don't see it, you can get to know it.

We used a bilinear patch in the front, remember?

Most people may think that the previous one is not soft, but there are a few people who can benefit from it.

In this blog post I believe that "most people" will also feel that there is a soft use. GIF effects are as follows

This is the power of curved patches! Let the creature move and the eyes follow the ball and shake his head ~

The use of a Bezier patch is exactly two times the patch (two times below), of course, but it's usually three times as good as that.

First of all, what is a Bezier patch? Before you know what a Bezier curve is (don't know what to look for before you know it)

The last piece used a linear patch as long as 4 control points are enough and the Bezier patch requires at least 9 control points

But how do you represent a surface? These 9 points can actually represent the wireless multiple Bezier curve has formed a patch

As in the previous chapter, you can first interpolate the yellow direction and then the blue direction interpolation, of course, the reverse process is OK and then splicing into triangular elements on the line

Now it is possible to represent the surface, but no stickers! Remember how we handled the stickers in the last chapter?

Because the last time we used the Canvas2d API, in the process of dealing with a triangular element is a drawimage and then solving a linear equation group to calculate the matrix in transform

In this article, I'm using WebGL without the value of the matrix, just give the texture coordinates, but be aware that the WebGL coordinate system and the picture coordinates are the opposite!

Look directly at that part of the key code is as follows

You can see that the logic in the processing loop is similar to the previous one, just separating the get interpolation coordinate function.

Here's an array of maps. This is the stored texture coordinates because of the coordinate system reason (opposite) so 1-

The Bezier patch principle is basically the case ~

But how did the cute creature form? This creature needs a lot of patches. Look at my img bag, you can guess.

I've got 5 textures here. 5 Patch Objects generated

Just like this, the creature will not move!

You also have to calculate the location for the control points that need to be offset, depending on the coordinates (this is the ball).

Here the fine tuning work is tedious to explode! Various fine-tuning as follows!

It cost me a lot of energy in order to make the facial action vivid to the various control points to the parameters. Various fine tuning

There is also the beginning of the various patches to synthesize the original image location is also a variety of fine-tuning!

--------------------------------------------------------------------

This thing's going to have to be an editor. Set various terminating initial values to do various animation interpolation transformations

Subdivision of the character, such as the eyebrow blush is also a separate face film will be very nice

But at this stage is not going to consider the editor of this kind of thing the priority is very later.

Besides, there should be such editors on the market (I don't know)

The most important thing is to realize the idea

Demo Source Open with Chrome

Canvas Curved Patch 2