Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SER332 Lecture 13

SER332 Lecture 13

Introduction to Graphics and Game Development
Linear Algebra
(201804)

Javier Gonzalez-Sanchez
PRO

February 27, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

  1. jgs
    SER332
    Introduction to Graphics and Game
    Development
    Lecture 13: Linear Algebra
    Javier Gonzalez-Sanchez
    [email protected]
    PERALTA 230U
    Office Hours: By appointment

    View Slide

  2. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 1
    jgs
    Announcement
    § Project 2 is Posted
    Due by March 21, 11:59PM

    View Slide

  3. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 2
    jgs
    Goal

    View Slide

  4. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3
    jgs
    Goal

    View Slide

  5. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4
    jgs
    Goal
    3D Maze
    ( IJKS 1982)

    View Slide

  6. jgs
    Points, Vector, Angles
    Linear Algebra

    View Slide

  7. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6
    Points
    Specify locations in space
    (or in the plane)
    Points and Vectors
    Vector
    have a magnitude and direction
    (4,2)
    (1,3)
    v

    View Slide

  8. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7
    jgs
    Vectors
    § Vector
    v = (v1
    , v2
    )
    § Magnitude or Length
    ||v|| = sqrt( v1
    2 + v2
    2)
    § Orientation (angle)
    ⍬ = tan -1 ( v2 / v1 )
    § Unit vector
    ||v|| = 1
    § Zero vector
    v = (0,0)

    View Slide

  9. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8
    u - v =
    (u1
    ,u2
    ) - (v1
    ,v2
    ) =
    (u1
    -v1
    , u2
    -v2
    )
    u + v =
    (u1
    ,u2
    ) + (v1
    ,v2
    ) =
    (u1
    +v1
    , u2
    +v2
    )
    Addition and Subtraction
    v
    u
    u+v
    v
    u
    v-u

    View Slide

  10. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9
    a * v =
    a * (v1
    ,v2
    ) =
    (a*v1
    , a*v2
    )
    Multiplication with a Scalar
    v
    av

    View Slide

  11. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10
    jgs
    Test yourself
    § Point + Vector = ?
    § Point – Point = ?
    § Vector + Vector = ?
    § Point + Point = ?

    View Slide

  12. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11
    jgs
    Test yourself
    § Point + Vector = Point
    § Point – Point = Vector
    § Vector + Vector = Vector
    § Point + Point = ?
    v
    u
    u-v
    v
    u
    v-u

    View Slide

  13. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12
    jgs
    Angles

    View Slide

  14. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13
    jgs
    Uses
    // mouse motion callback function
    void motion(int x, int y) {
    if (mouse_button == GLUT_LEFT_BUTTON) {
    y_angle += (float(x - mouse_x) / width) *360.0;
    x_angle += (float(y - mouse_y) / height)*360.0;
    }
    if (mouse_button == GLUT_RIGHT_BUTTON) {
    scale += (y - mouse_y) / 100.0;
    if (scale < 0.1) scale = 0.1;
    if (scale > 7) scale = 7; }
    mouse_x = x;
    mouse_y = y;
    glutPostRedisplay();
    }

    View Slide

  15. jgs
    Dot product

    View Slide

  16. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15
    jgs
    § The dot product or inner product measures to what degree two vectors are
    aligned
    u · v = (u1
    ,u2
    ) · (v1
    ,v2
    ) = u1
    * v1
    + u2
    * v2
    v * u = (5*7) + (5*3) = 50
    v * w = (5*5) + (5*0) = 25
    u * w = (7*5) + (3*0) = 35
    u * u = (7*7) + (3*3) = 58
    t * w = (0*5) + (5*0) = 0
    Dot Product
    q
    v=[5,5]
    u=[7,3]
    w=[5,0]
    t=[0,5]

    View Slide

  17. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16
    jgs
    § Two vectors v and w are perpendicular or normal iff u · v = 0
    § Geometric Interpretation:
    § cos(a) = l / ||w|| = u · v / ||v|| * ||w||
    Dot Product
    w
    v
    a
    l

    View Slide

  18. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17
    jgs
    v * u = (5*7) + (5*3) = 50
    v * w = (5*5) + (5*0) = 25
    u * w = (7*5) + (3*0) = 35
    u * u = (7*7) + (3*3) = 58
    t * w = (0*5) + (5*0) = 0
    |t| = 5.0
    |v| = 7.07
    |u| = 7.61
    |w| = 5.0
    § cos(a) = u · v / ||v|| * ||w||
    q = cos-1 (25 / 7.07 * 5.0) = 45º
    Dot Product
    q
    v=[5,5]
    u=[7,3]
    w=[5,0]
    t=[0,5]

    View Slide

  19. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 18
    jgs
    Dot Product
    ||v|| = sqrt (v · v) = sqrt (v1
    * v1
    + v2
    * v2
    )

    View Slide

  20. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 19
    jgs
    Dot Product | Uses
    § Calculate the angle between 2 vectors

    View Slide

  21. jgs
    Cross product

    View Slide

  22. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 21
    • Notation: u = v x w
    • The cross product is a vector
    • ||u|| proportional to the sine of
    the angle between v and w
    ||u|| = ||v||*||w||*sin(a)
    • u is perpendicular to v and w
    • The direction of u follows the right
    hand rule
    Cross Product
    w
    v
    a
    u

    View Slide

  23. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 22
    jgs
    Cross Product
    u = v x w
    =
    !
    "
    !
    #
    !
    $
    x
    %
    "
    %
    #
    %
    $
    =
    & ' (
    !
    "
    !
    #
    !
    $
    %
    "
    %
    #
    %
    $
    =
    !
    #
    ∗ %
    $
    − %
    #
    ∗ !
    $
    !
    $
    ∗ %
    "
    − %
    $
    ∗ !
    "
    !
    "
    ∗ %
    #
    − %
    "
    ∗ !
    #

    View Slide

  24. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 23
    jgs
    Cross Product | Uses
    § Calculate the area of a triangle
    § Calculate distance from a line to a dot
    § Calculate normals

    View Slide

  25. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 24
    jgs
    Cross Product | Triangle Area
    § The cross product is related to the area of a triangle
    § (parallelogram)area = ||u|| = ||v x w|| = ||v||*||w||*sin(a)
    § (triangle)area = ||u|| / 2 = ||v x w|| / 2 = ...
    Q
    R
    P
    w
    v

    View Slide

  26. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 25
    jgs
    Test Yourself
    Given a Triangle with
    P=(0,0,0), Q=(0,3,0) and R=(3,3,0)
    What is the area?
    Q R
    P

    View Slide

  27. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 26
    jgs
    Test Yourself
    § area (triangle) = (0,3,0) x (3,3,0) = ||(0,0,-9)|| / 2 = 9/2 = 4.5
    § area (parallelogram) = 9
    § area (parallelogram) = (3)(4.24) sin (45) = (3)(4.24...)(0.70...) = 9
    Q R
    P

    View Slide

  28. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 27
    jgs
    Cross Product | Distance point to line
    // compute the distance from AB to C
    double lineToPointDistance2D
    (double[] pA, double[] pB, double[] pC) {
    double dist = cross(pA-pB, pA-pC) / (pA - pB);
    return Math.abs(dist);
    }
    pA
    pC
    pB

    View Slide

  29. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 28
    jgs
    Cross Product | Distance point to line

    View Slide

  30. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 29
    jgs
    Cross Product | Normal calculation (lighting)

    View Slide

  31. jgs
    Matrices
    Linear Algebra

    View Slide

  32. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 31
    jgs
    Matrix
    § A matrix is a set of elements, organized into rows and columns
    § addition:
    ! "
    # $
    +
    & '
    ( ℎ
    =
    ! + & " + '
    # + ( $ + ℎ
    § subtraction:
    ! "
    # $

    & '
    ( ℎ
    =
    ! − & " − '
    # − ( $ − ℎ
    § multiplication:
    ! "
    # $

    & '
    ( ℎ
    =
    !& + "( !' + "ℎ
    #& + $( #' + $ℎ

    View Slide

  33. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 32
    jgs
    Matrix Multiplication
    § Cn x p
    = A n x m
    B m x p
    § Examples
    2 5
    3 1

    6 2
    1 5
    =
    17 29
    19 11
    6 2
    1 5

    2 5
    3 1
    =
    18 32
    17 10

    View Slide

  34. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 33
    jgs
    Usage: transformations

    View Slide

  35. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 34
    jgs
    Usage: transformations

    View Slide

  36. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 35
    jgs
    Usage: transformations

    View Slide

  37. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 36
    jgs
    Homework
    Review Linear Algebra

    View Slide

  38. jgs
    SER332 Introduction to Graphics
    Javier Gonzalez-Sanchez
    [email protected]
    Spring 2018
    Disclaimer. These slides can only be used as study material for the class SER332 at ASU. They cannot be distributed or used for another purpose.

    View Slide