Beiser curve, and interaction with the beiser curve with the mouse

Document directory

• Anchor
• Cubic besell Curve
• Draw
• Mouse Interaction
• Effect

(C) conmajia 2013

Theoretical difficulty:★★★☆☆

Practical difficulty:★☆☆☆☆

Besell Curve

The béserz curve is an important parameter curve in computer graphics (2d, 3D called a surface ). In 1962, the bersel curve was published by French engineer Pierre béserz, who used the curve to design the car's main body.

Linear curve

For the numbers P0 and P1 at the specified point, the linear besell curve is just a straight line between two points. This line is shown below:

When the parameter T changes, the process is as follows:

T in the linear besell curve function goes through the curve described by B (t) from p0 to P1. For example, when T = 0.25, B (t) is a 1/4 point from the point p0 to the P1 path. Like a continuous T from 0 to 1, B (t) describes a straight line from p0 to P1.

Quadratic Curve

The path of the second beiser curve is traced by function B (t) of the given point P0, P1, and P2:

In order to construct a secondary besell curve, the mediation points q0 and Q1 can be used as the T from 0 to 1:

1. The continuous point q0 from p0 to P1 describes a linear besell curve.
2. A linear besell curve is described from Q1, a continuous point from P1 to P2.
3. From q0 to Q1 continuous point B (t), describe a quadratic besell curve.

The quadratic curve looks like this:

When the parameter T changes, the process is as follows:

Cubic Curve

To construct a higher-order curve, more mediation points are required. For cubic curves, it can be constructed by the Mediation points q0, Q1, and Q2 described by the linear besell curve, and by the points R0 and R1 described by the quadratic curve.

P0, P1, P2, and P3 point on a plane or in a three-dimensional space, a cubic besell curve is defined. The curve starts from p0 to P1 and starts from p2 to P3. It generally does not pass through P1 or P2; these two points only provide direction information there. The spacing between P0 and P1 determines the "length" of the curve toward P2 before it is switched to P3 ".

The curve parameters are as follows:

It looks like this:

When the parameter T changes, the process is as follows:

High-order Curve

You can use the following formula to represent a higher-order beiser curve:

Expressed by point P0, P1 ,... And the bersel curve determined by PN. There are:

For more information about the besell curve, you can read a variety of mathematical books. Come on.

Application

In almost all of the advanced image software, the cubic besell curve is used for "smooth curve" rendering. For example, "pen" in Photoshop, "besell tool" in coraldraw, and "paint" in fireworks ".

Computer plotting in programming

To "Draw" the Bessel curve, we usually need to perform a lot of calculations and then draw it out, like this:

The drawn code can be found in various computer graphics books.

GDI +

Fortunately, GDI + has encapsulated the drawing code of the besell curve. If you want to draw the besell curve, you only need to call the graphics. drawbezr method:

This is a cubic besell curve, where four points are: Start Point, start point control point, end point, and end point control point. The result is as follows:

Interaction with the mouse

How can we implement the beiser curve that can be adjusted in Photoshop? Two methods:

1. Enter a new parameter to generate a curve
2. Interactive Curve adjustment with the mouse

Obviously, the second type looks a lot better, so let's try it.

You want to achieve the following results:

This is a cubic besell curve, which should be interpreted as follows:

Therefore, we need to solve the following problems:

1. Represents the anchor point and control point of the besell curve.
2. Draw curves and control points/control handles
3. Mouse Interaction

It doesn't look very difficult, so let's turn it into zero and break it apart.

Anchor

There are two anches for the three-way besell curve: the starting point and the ending point. Each anchor has two coordinates: its own coordinates and the control point coordinates. Therefore, you can use this class to describe:

Cubic besell Curve

The principle of the cubic curve has been mentioned before, so its structure should be like this:

Draw

To make it simple, use a basic Renderer. The Code is as follows:

Draw the curve, control point, and handle:

The result is as follows:

Mouse Interaction

The interaction with the mouse is actually like this:

1. Press the mouse. If the point is placed on a control point, the point is selected. Otherwise, the point fails.
2. Move the mouse. If a control point is selected, adjust the coordinates of the control point to the new coordinate. Otherwise, ignore
3. Open the mouse and cancel any selection

It seems that you only need to handle the three events: mousedown, mousemove, and mouseup. It's easy.

First get a global Tag:

Then process the mouse event:

Mousedown:

Mousemove:

Mouseup:

To make it simple, refresh is like this:

More efficient refresh should only process dirty areas.

Effect

Finally it looks like this.

That's simple.

Expansion and Optimization

To achieve the curve effect of Photoshop, you need to connect multiple anchor points and draw them using similar methods in this article. The efficiency of the above method can also be improved.

What should I do?

You can do it yourself.

(End)

(C) conmajia 2013