$30 off During Our Annual Pro Sale. View Details »

SER431 Lecture 13

SER431 Lecture 13

Advanced Graphics
Curves and Splines
(201810)

Javier Gonzalez-Sanchez
PRO

October 01, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

  1. jgs
    SER 431
    Advanced Graphics
    Lecture 13: Curves, Splines, and Surfaces
    Javier Gonzalez-Sanchez
    [email protected]
    PERALTA 230U
    Office Hours: By appointment

    View Slide

  2. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 2
    jgs
    Surfaces

    View Slide

  3. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 3
    jgs
    Surfaces
    Can be represented by huge number of points (polygons or triangles)
    + arbitrary shapes possible
    – large memory requirements
    – changes cause much work
    – corners
    - scaling
    Can be represented by two sets of orthogonal curves
    – only for some shape categories
    + marginal memory requirements
    + changes are rather simple
    + definition arbitrarily exact
    3

    View Slide

  4. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 4
    jgs
    Curves | Concept
    A curve is
    a generalization of a line (a set of points),

    View Slide

  5. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 5
    jgs
    Curves | Concept
    A curve is
    a generalization of a line (a set of points),
    in that its curvature need not be zero.

    View Slide

  6. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 6
    jgs
    Curves | Representation
    § Implicit curve. y = f(x)
    such as y = sqrt (1–x2)
    § Parametric curve. x = f(t), y = g(t)
    such as x=cos(t), y=sin(t)

    View Slide

  7. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7
    • Derivatives of the coordinates define
    the tangent
    • The length of the tangent does not
    have a geometric meaning. Consider
    only +, 0, -, and ∞
    • From slope
    • To “rate of change” at any point
    (first derivative)
    Curves | First Derivative

    View Slide

  8. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8
    • Derivatives of the coordinates define
    the tangent
    • The length of the tangent does not
    have a geometric meaning. Consider
    only +, 0, -, and ∞
    • From slope
    • To “rate of change” at any point
    (first derivative)
    Curves | First Derivative

    View Slide

  9. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 9
    jgs
    Curves | First Derivative
    The curvature is the inverse of the radius of the best local approximation of
    the curve by a circle.
    And, curvature is defined as the magnitude of the derivative of a unit
    tangent vector function with respect to arc length:
    Moreover, for small values curvature is approximately the second derivative.

    View Slide

  10. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 10
    jgs
    Curves | Second Derivative
    The second derivative measures the concavity
    § positive mean convex, i.e., tangent line below the graph (blue)
    § zero represents an inflection point (red)
    § negative mean concave, i.e., tangent line above the graph (green)

    View Slide

  11. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 11
    jgs
    Spline Functions
    A curve can be defined piecewise by polynomials (spline functions)
    § Interpolating splines
    § Approximating splines
    11

    View Slide

  12. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 12
    jgs
    Curves and Splines
    § A curve can be a concatenation of splines.
    § Control points determine the shape of the spline curve.
    § For each point specify a blending function which determines how the
    control point influence the shape of the curve for values of parameter t.
    § Therefore, a curve spline is specified as
    P(t) = p0
    *B0
    (t) + p1
    *B1
    (t) + p2
    *B2
    (t) + p3
    *B3
    (t) + ...
    § This is axis independent, i.e., it does not change when the coordinate
    system is rotated.
    12

    View Slide

  13. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 13
    jgs
    § A control graph (or control polygon) is a poly-line connecting control
    points.
    § It shows the order of control points
    Control Graph
    13

    View Slide

  14. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 14
    jgs
    Blending functions | Example Bezier
    Blending function are:
    § Easy to compute (polynomials are)
    § Continuous
    § Interpolate nicely the control points
    Example (Bezier blending function):
    § Define 4 control points
    § Define t between 0 and 1
    § Blending function are defined as
    B0
    (t)=(1-t)3, B1
    (t)=3t(1-t)2, B2
    (t)=3t2(1-t), B1
    (t)=(t)3

    View Slide

  15. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 15
    jgs
    Blending functions | Example Bezier
    Blending function are:
    § Easy to compute (polynomials are)
    § Continuous
    § Interpolate nicely the control points
    Example (Bezier blending function):
    § Define 4 control points
    § Define t between 0 and 1
    § Blending function are defined as
    B0
    (t)=(1-t)3, B1
    (t)=3t(1-t)2, B2
    (t)=3t2(1-t), B1
    (t)=(t)3

    View Slide

  16. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16
    Thus, with 4 points and the Bezier blending functions, we replace
    • P(t) = p0
    *B0
    (t) + p1
    *B1
    (t) + p2
    *B2
    (t) + p3
    *B3
    (t)
    With
    P(t) = (1-t)3 P0
    + 3t(1-t)2 P1
    + 3t2(1-t) P2
    + (t)3 P3
    Where t is 0 <= t < = 1

    View Slide

  17. jgs
    Source Code

    View Slide

  18. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 18
    jgs
    Step 1
    // 4 control points
    float Points[4][3] = {
    { 10, 0, 0 },
    { 5, 10, 2 },
    { -5, 0, 0 },
    {-10, 5, -2 }
    };
    P3
    P0
    P1
    P2

    View Slide

  19. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 19
    jgs
    Step 2
    // draw the control vertices in red.
    // It is only as a reference. They are not need on screen. Ok?
    glColor3f(1, 0, 0);
    glPointSize(3);
    glBegin(GL_POINTS);
    for (int i = 0; i != 4; ++i) {
    glVertex3fv(Points[i]);
    }
    glEnd();
    P3
    P0
    P1
    P2

    View Slide

  20. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 20
    jgs
    Step 3
    // control graph in blue
    glColor3f(0, 0, 1);
    glBegin(GL_LINE_STRIP);
    for (int i = 0; i != 4; ++i) {
    glVertex3fv(Points[i]);
    }
    glEnd();
    P3
    P0
    P1
    P2

    View Slide

  21. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 21
    jgs
    Step 4
    glBegin(GL_LINE_STRIP);
    glColor3f(0, 1, 0);
    // N = 20
    for (int i = 0; i != N; ++i) {
    float t = (float) i / (N - 1); // 20 values 0 to 1
    float it = 1.0f - t;
    // blending functions
    float b0 = t*t*t; //(t)3 for P3
    float b1 = 3 * t * t * it; // 3t2(1-t) for P2
    float b2 = 3 * t * it*it; // 3t(1-t)2 for P1
    float b3 = it*it*it; //(1-t)3 for P0
    // P(t) = (1-t)3 P0 + 3t(1-t)2 P1 + 3t2(1-t) P2 + (t)3 P3
    float x = b3 * Points[0][0] + b2 * Points[1][0] + b1 * Points[2][0] + b0 * Points[3][0];
    float y = b3 * Points[0][1] + b2 * Points[1][1] + b1 * Points[2][1] + b0 * Points[3][1];
    float z = b3 * Points[0][2] + b2 * Points[1][2] + b1 * Points[2][2] + b0 * Points[3][2];
    // specify the point
    glVertex3f(x, y, z);
    }
    glEnd();

    View Slide

  22. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 22
    jgs
    Examples
    N = 20 N = 5
    N = 2

    View Slide

  23. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 23
    jgs
    § Review the source code posted on GitHub
    Test yourselves:
    § Change the coordinates of the control points; for instance, play with diverse
    combinations of positive and negative x and y.
    § Draw a second Bezier spline adjacent to the first one
    § Draw a second Bezier spline parallel to the first one
    Homework

    View Slide

  24. jgs
    SER431 Advanced Graphics
    Javier Gonzalez-Sanchez
    [email protected]
    Fall 2018
    Disclaimer. These slides can only be used as study material for the class SER431 at ASU. They cannot be
    distributed or used for another purpose.

    View Slide