godotengine/godot-docs
1
0
Fork 0
mirror of https://github.com/godotengine/godot-docs.git synced 2026-01-07 02:12:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

General fixes for new interpolation and curves tutorials

Browse Source
This commit is contained in:
Michael Alexsander Silva Dias
2019-04-23 17:37:17 -03:00
parent 79f57c976e
commit 38bfbcdc35
2 changed files with 39 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
tutorials/math/beziers_and_curves.rst
View File

@@ -1,7 +1,7 @@
.. _doc_beziers_and_curves:
Beziers, Curves and Paths
==========================
=========================
Introduction
~~~~~~~~~~~~
@@ -30,16 +30,16 @@ To draw the curve between them, just interpolate the two segments that form betw
.. tabs::
.. code-tab:: gdscript GDScript
func _quadratic_bezier(p0 : Vector2,p1 : Vector2,p2 : Vector2 ,t : float):
var q0 = p0.linear_interpolate(p1,t)
var q1 = p1.linear_interpolate(p2,t)
func _quadratic_bezier(p0, p1, p2, t):
var q0 = p0.linear_interpolate(p1, t)
var q1 = p1.linear_interpolate(p2, t)
This will reduce the points from 3 to 2. Do the same process with *q0* and *q1* to obtain a single point *r*.
.. tabs::
.. code-tab:: gdscript GDScript
var r = q0.linear_interpolate(q1,t)
var r = q0.linear_interpolate(q1, t)
return r
Finally, this point fill follow the curve when t goes from 0 to 1. This type of curve is called *Quadratic Bezier*.
@@ -49,9 +49,9 @@ Finally, this point fill follow the curve when t goes from 0 to 1. This type of
*(Image credit: Wikipedia)*
Cubic Bezier
----------------
------------
Let's add one more point and make it four.
Let's add one more point and make it four.
.. image:: img/bezier_cubic_points.png
@@ -67,24 +67,24 @@ Interpolate then into three points:
.. tabs::
.. code-tab:: gdscript GDScript
var q0 = p0.linear_interpolate(p1,t)
var q1 = p1.linear_interpolate(p2,t)
var q2 = p2.linear_interpolate(p3,t)
var q0 = p0.linear_interpolate(p1, t)
var q1 = p1.linear_interpolate(p2, t)
var q2 = p2.linear_interpolate(p3, t)
From there to two points:
.. tabs::
.. code-tab:: gdscript GDScript
var r0 = q0.linear_interpolate(q1,t)
var r1 = q1.linear_interpolate(q2,t)
var r0 = q0.linear_interpolate(q1, t)
var r1 = q1.linear_interpolate(q2, t)
And to one:
.. tabs::
.. code-tab:: gdscript GDScript
var s = r0.linear_interpolate(r1,t)
var s = r0.linear_interpolate(r1, t)
return s
The result will be a smooth curve interpolating between all four points:
@@ -96,7 +96,7 @@ The result will be a smooth curve interpolating between all four points:
.. note:: For 3D, it's exactly the same, just change Vector2 into Vector3.
Control point form
-------------------
------------------
Now, let's take these points and change the way we understand them. Instead of having p0, p1, p2 and p3, we will store them as:
@@ -112,7 +112,7 @@ This way, we have two points and two control points (which are relative vectors
This is actually how graphics software presents Bezier curves to the users, and how Godot supports them.
Curve2D, Curve3D, Path and Path2D
-------------------------------
---------------------------------
There are two objects that contain curves: :ref:`Curve3D <class_Curve3D>` and :ref:`Curve2D <class_Curve2D>` (for 3D and 2D respectively).
@@ -123,7 +123,7 @@ They can contain several points, allowing for longer paths. It is also possible
Using them, however, may not be completely obvious, so following is a description of the most common use cases for Bezier curves.
Evaluating
-----------
----------
Just evaluating them may be an option, but in most cases it's not very useful. The big drawback with Bezier curves is that if you traverse them at constant speed, from *t=0* to *t=1*, the actual interpolation will *not* move at constant speed. The speed is also an interpolation between the distances between points p0, p1, p2 and p3 and there is not a mathematically simple way to traverse the curve at constant speed.
@@ -133,9 +133,10 @@ Let's do a simple example with the following pseudocode:
.. code-tab:: gdscript GDScript
var t = 0.0
_process(delta):
t+=delta
position = _cubic_bezier(p0,p1,p2,p3,t)
func _process(delta):
t += delta
position = _cubic_bezier(p0, p1, p2, p3, t)
.. image:: img/bezier_interpolation_speed.gif
@@ -156,12 +157,12 @@ Additionally, if both control points were 0,0 (remember they are relative vector
Before drawing Bezier curves, *tesselation* is required. This is often done with a recursive or divide and conquer function that splits the curve until the curvature amount becomes less than a certain threshold.
The *Curve* classes provide this via the
:ref:`Curve2D.tesselate()<class_Curve2D_method_tesselete>` function (which receives optional *stages* of recursion and angle *tolerance* arguments). This way, drawing something based on a curve is easier.
:ref:`Curve2D.tessellate()<class_Curve2D_method_tessellate>` function (which receives optional *stages* of recursion and angle *tolerance* arguments). This way, drawing something based on a curve is easier.
Traversal
---------
The last common use case for the curves is to traverse them. Because of what was mentioned before regarding constant speed, this is also difficult.
The last common use case for the curves is to traverse them. Because of what was mentioned before regarding constant speed, this is also difficult.
To make this easier, the curves need to be *baked* into equidistant points. This way, they can be approximated with regular interpolation (which can be improved further with a cubic option). To do this, just use the :ref:`Curve.interpolate_baked()<class_Curve_method_interpolate_baked>` method together with
:ref:`Curve2D.get_baked_length()<class_Curve2D_method_get_baked_length>`. The first call to either of them will bake the curve internally.
@@ -172,12 +173,11 @@ Traversal at constant speed, then, can be done with the following pseudo-code:
.. code-tab:: gdscript GDScript
var t = 0.0
_process(delta):
t+=delta
position = curve.interpolate_baked( t * curve.get_baked_length(), true)
func _process(delta):
t += delta
position = curve.interpolate_baked(t * curve.get_baked_length(), true)
And the output will, then, move at constant speed:
.. image:: img/bezier_interpolation_baked.gif

30
tutorials/math/interpolation.rst
View File

@@ -8,7 +8,7 @@ Introduction
Interpolation is a very basic operation in graphics programming. It's good to become familiar with it in order to expand your horizons as a graphics developer.
The basic idea is that you want to transition from A to B. A value *t*, represents the states in-between.
The basic idea is that you want to transition from A to B. A value *t*, represents the states in-between.
As an example if *t* is 0, then the state is A. If *t* is 1, then the state is B. Anything in-between is an *interpolation*.
@@ -24,7 +24,7 @@ And often simplified to:
.. tabs::
.. code-tab:: gdscript GDScript
interpolation = A + (B - A) * t
interpolation = A + (B - A) * t
which is exactly the same.
@@ -46,16 +46,16 @@ Here is simple pseudo-code for going from point A to B using interpolation:
.. code-tab:: gdscript GDScript
func _physics_process(delta):
t+=delta*0.4
$Sprite.position = $A.position.linear_interpolate( $B.position,t )
t += delta * 0.4
$Sprite.position = $A.position.linear_interpolate($B.position, t)
It will produce the following motion:
.. image:: img/interpolation_vector.gif
Transform interpolation
--------------------
-----------------------
It is also possible to interpolate whole transforms (make sure they have either uniform scale or, at least, the same non-uniform scale).
For this, the function :ref:`Transform.interpolate_with()<class_Transform_method_interpolate_with>` can be used.
@@ -72,11 +72,10 @@ Using the following pseudocode:
var t = 0.0
func _process(delta):
t += delta
$Monkey.transform = $Position1.transform.interpolate_with($Position2.transform, t)
t+=delta
$Monkey.transform = $Position1.transform.interpolate_with( $Position2.transform, t )
And again, it will produce the following motion:
.. image:: img/interpolation_monkey.gif
@@ -91,17 +90,14 @@ Interpolation can be used to smooth movement, rotation, etc. Here is an example
.. code-tab:: gdscript GDScript
const FOLLOW_SPEED = 4.0
func _physics_process(delta):
var mouse_pos = get_local_mouse_position()
$Sprite.position = $Sprite.position.linear_interpolate( mouse_pos, delta * FOLLOW_SPEED )
$Sprite.position = $Sprite.position.linear_interpolate(mouse_pos, delta * FOLLOW_SPEED)
Here is how it looks:
.. image:: img/interpolation_follow.gif
This useful for smoothing camera movement, allies following you (ensuring they stay within a certain range), and many other common game patterns.