How To Draw Sinusoidal Curve In Abaqus

Bezier curves are used in computer graphics to draw shapes, for CSS animation and in many other places.

They are a very simple affair, worth to study once so feel comfortable in the globe of vector graphics and avant-garde animations.

Control points

A bezier bend is divers by control points.

There may be 2, 3, 4 or more than.

For instance, ii points curve:

3 points bend:

Iv points curve:

If you look closely at these curves, yous tin can immediately find:

Points are not always on curve. That's perfectly normal, later we'll encounter how the curve is congenital.
The curve order equals the number of points minus ane. For ii points we accept a linear curve (that's a directly line), for three points – quadratic curve (parabolic), for iv points – cubic bend.
A curve is always inside the convex hull of control points:

Because of that last property, in computer graphics it's possible to optimize intersection tests. If convex hulls do non intersect, then curves do not either. And so checking for the convex hulls intersection first can give a very fast "no intersection" upshot. Checking the intersection of convex hulls is much easier, because they are rectangles, triangles so on (encounter the picture above), much simpler figures than the curve.

The chief value of Bezier curves for drawing – past moving the points the curve is changing in intuitively obvious fashion.

Try to move control points using a mouse in the example below:

As yous tin discover, the curve stretches forth the tangential lines one → 2 and 3 → 4.

After some practise it becomes obvious how to place points to get the needed curve. And past connecting several curves we can get practically annihilation.

Here are some examples:

De Casteljau's algorithm

At that place's a mathematical formula for Bezier curves, but allow's comprehend information technology a bit afterwards, because De Casteljau'southward algorithm is identical to the mathematical definition and visually shows how it is constructed.

Commencement let's see the 3-points case.

Hither'south the demo, and the explanation follow.

Control points (one,ii and 3) can be moved past the mouse. Press the "play" push button to run it.

De Casteljau's algorithm of building the 3-point bezier curve:

Draw control points. In the demo above they are labeled: 1, 2, 3.
Build segments between control points 1 → 2 → 3. In the demo to a higher place they are chocolate-brown.
The parameter t moves from 0 to one. In the instance above the pace 0.05 is used: the loop goes over 0, 0.05, 0.1, 0.fifteen, ... 0.95, 1.

For each of these values of t:
- On each brown segment nosotros take a point located on the altitude proportional to t from its beginning. Equally there are two segments, nosotros take 2 points.
  
  For instance, for t=0 – both points will be at the beginning of segments, and for t=0.25 – on the 25% of segment length from the beginning, for t=0.v – 50%(the heart), for t=1 – in the end of segments.
- Connect the points. On the picture show beneath the connecting segment is painted bluish.

For `t=0.25`	For `t=0.v`

At present in the blue segment accept a signal on the distance proportional to the same value of t. That is, for t=0.25 (the left picture) we have a indicate at the end of the left quarter of the segment, and for t=0.5 (the right picture) – in the middle of the segment. On pictures in a higher place that signal is red.
Equally t runs from 0 to 1, every value of t adds a signal to the curve. The set of such points forms the Bezier curve. It'southward red and parabolic on the pictures above.

That was a procedure for 3 points. But the aforementioned is for 4 points.

The demo for 4 points (points can be moved past a mouse):

The algorithm for four points:

Connect control points past segments: one → 2, 2 → three, iii → 4. At that place will be 3 chocolate-brown segments.
For each t in the interval from 0 to 1:
- We have points on these segments on the distance proportional to t from the starting time. These points are continued, so that we have two light-green segments.
- On these segments we take points proportional to t. We go ane blue segment.
- On the blueish segment we take a betoken proportional to t. On the case above it'south blood-red.
These points together form the curve.

The algorithm is recursive and tin be generalized for any number of control points.

Given N of control points:

Nosotros connect them to get initially N-1 segments.
Then for each t from 0 to 1, we accept a betoken on each segment on the distance proportional to t and connect them. At that place will exist Due north-2 segments.
Repeat pace 2 until there is just one betoken.

These points make the curve.

Run and pause examples to clearly see the segments and how the curve is built.

A curve that looks like y=1/t:

Zig-zag command points also work fine:

Making a loop is possible:

A non-polish Bezier curve (aye, that'southward possible also):

If there'southward something unclear in the algorithm clarification, please look at the alive examples above to see how the curve is built.

As the algorithm is recursive, we can build Bezier curves of any gild, that is: using 5, 6 or more command points. Simply in practice many points are less useful. Usually we take 2-iii points, and for complex lines glue several curves together. That'south simpler to develop and calculate.

To specify a Bezier curve, control points are used. As we can meet, they are not on the curve, except the first and the last ones.

Sometimes we have another task: to draw a curve through several points, so that all of them are on a unmarried smooth curve. That task is called interpolation, and here we don't cover it.

In that location are mathematical formulas for such curves, for instance Lagrange polynomial. In estimator graphics spline interpolation is often used to build smooth curves that connect many points.

Maths

A Bezier curve tin be described using a mathematical formula.

As we saw – there's actually no need to know it, most people simply draw the curve by moving points with a mouse. Only if you're into maths – hither information technology is.

Given the coordinates of command points P_i : the first control indicate has coordinates P₁ = (x₁, y₁), the 2nd: P_two = (10₂, y₂), and then on, the curve coordinates are described past the equation that depends on the parameter t from the segment [0,1].

The formula for a 2-points curve:

P = (1-t)P₁ + tP₂
For iii control points:

P = (1−t)^twoP₁ + 2(1−t)tP₂ + t²P₃
For 4 control points:

P = (1−t)³P₁ + three(1−t)²tP₂ +3(1−t)t²P_three + t^threeP_four

These are vector equations. In other words, we can put x and y instead of P to become respective coordinates.

For instance, the iii-point curve is formed past points (ten,y) calculated as:

x = (1−t)²x_ane + 2(1−t)tx₂ + t²x₃
y = (i−t)²y_one + 2(1−t)ty₂ + t²y₃

Instead of x_i, y₁, x₂, y₂, x₃, y₃ we should put coordinates of 3 command points, and then as t moves from 0 to 1, for each value of t we'll have (x,y) of the bend.

For instance, if control points are (0,0), (0.v, ane) and (1, 0), the equations get:

10 = (1−t)² * 0 + ii(1−t)t * 0.v + t² * 1 = (one-t)t + t² = t
y = (1−t)² * 0 + 2(1−t)t * 1 + t² * 0 = 2(1-t)t = –2t² + 2t

Now as t runs from 0 to ane, the set of values (x,y) for each t forms the bend for such control points.

Summary

Bezier curves are divers by their control points.

We saw two definitions of Bezier curves:

Using a drawing process: De Casteljau's algorithm.
Using a mathematical formulas.

Good properties of Bezier curves:

We can depict shine lines with a mouse by moving control points.
Circuitous shapes tin be fabricated of several Bezier curves.

Usage:

In computer graphics, modeling, vector graphic editors. Fonts are described by Bezier curves.
In web development – for graphics on Canvas and in the SVG format. By the way, "alive" examples above are written in SVG. They are actually a single SVG document that is given different points as parameters. Yous tin can open information technology in a dissever window and run into the source: demo.svg.
In CSS animation to describe the path and speed of blitheness.