1 / 22

Rotations

Enhance your understanding of rotations, trigonometry, and matrices with practical examples and programming insights. Learn about radians, unit circles, rotation matrices, and shader programming efficiency.

jalexandra
Download Presentation

Rotations

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Rotations It seems like a bad sine of things to come

  2. But first... • Any questions on your current homework assignment?

  3. Today • Trigonometry • Representing rotations as matrices • Programming with rotation matrices

  4. Radians • We will be using radians instead of degrees • Radians are better in every way except for humans • 0 radians corresponds to 0° • π/2 corresponds to 90° • π corresponds to 180° • 2π corresponds to 360° • We can convert between them for the sake of user convenience • Let's take a look at converting degrees...

  5. Fahrenheit and Celsius • Converting between Fahrenheit and Celsius provide us with a good example of converting between different number scales • We can derive the conversion formula with the following knowledge: • -40° is the same in °F and °C • Freezing is 0°C and 32°F • Let's look at how we do this...

  6. Converting between degrees and radians • Life is simpler here since our two ranges both have the same zero point • We still can follow the same pattern: • Covert from input range to 0...1 • Convert from 0...1 to output range

  7. Unit circle • Sine, cosine, and tangent tell us useful things about points on a unit circle • For a given angle (measured counterclockwise from the +x axis): • cosine is the x-coordinate of that point on a circle • sine is the y-coordinate of that point on a circle • tangent is the slope of the line

  8. Useful properties • Since all of the points are on the unit circle, we know that the distance from the origin to these points is 1 • Circles are rotationally symmetric, so we can write sine and cosine in terms of each other

  9. Rotating a point around a circle • Suppose we take the point (1, 0) and want to rotate it by an angle θ • What would be the coordinates for this point? • Let's try programming with this...

  10. Rotating a point around a circle • Suppose we take the point (1, 0) and want to rotate it by an angle θ • What would be the coordinates for this point? • Suppose we take the point (0, 1) and want to rotate it by an angle θ • What would be the coordinates for this point?

  11. Rotation matrix • A 2-dimensional rotation matrix is a 2x2 matrix that specifies how to rotate any point a specified amount • Each column in the matrix specifies where you want the given axis to rotate to • Let's see some examples...

  12. 2D rotation matrix • This is the standard 2D rotation matrix • It allows us to perform a counterclockwise rotation by a given amount • If we multiply a vector by this matrix, the result will be that vector, rotated • Let's look at this in code...

  13. Animation • In order to make an animation, we need to call our render function pretty often • Most computer displays run at 60Hz (why?) • We can use the requestAnimFrame/requestAnimationFrame function to ask for code to be ran the next time the screen is about to be drawn • Let's use this to make this gasket spin!

  14. Efficiency • Currently, we are sending a new set of points to the graphics card for every single frame • The only thing that changes frame-to-frame is the rotation matrix • We can instead send an updated matrix to the graphics card every frame

  15. GLSL Variable Qualifiers • Our shaders will often need to get data to and from the external world • Attribute: Input to the vertex shader that can be different for each vertex making up the primitive • Varying: Output from vertex shader that is blended across the primitive and given as input to the fragment shader • Uniform: Input to the vertex and/or fragment shader that is constant for the primitive being drawn

  16. Modifying our vertex shader • We need to have our vertex shader take a mat2 as a uniform parameter • We need to multiply by this matrix in our shader, and use this to set the gl_Position • Because of the variable types involved, this will look a little ugly...

  17. Setting uniform values • Setting uniform values is similar to but simpler than setting attributes • gl.getUniformLocation() • gl.uniform[1234][fi][v]() or gl.uniformMatrix[234]fv()

  18. gl.getUnifromLocation(program, variable) • Return the location of the specified uniform variable in the shader specified by program

  19. gl.uniform[1234][fi][v]()

  20. gl.uniformMatrix[234]fv(loc, transpose, value) • Specify a matrix for the given uniform location • transpose must always be false • The "value" parameter should be the result of calling flatten() • Let's see how this all works...

More Related