1 / 63

This terms course

This course delves deeper into vectors and transformations in graphics, covering 2D and 3D concepts. Learn about positions, displacements, and how to use vectors effectively. Understand transforms and their applications in Processing programs. Discover the math behind vectors and practice vector operations like addition and subtraction. Dive into transforming graphics through translation, rotation, and scaling. Enhance your skills in Processing and start creating dynamic visual content.

sherv
Download Presentation

This terms course

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. This terms course • Last term we both worked on learning 2 things • Processing • The concepts of graphics etc. • This term will focus more on the basic concepts • Graphics, 2D and 3D • Sound • The course will go more into the maths and theory

  2. Aims • Understand Vectors • Position/displacement, direction, length • Use Vectors in Processing programs • in 2D and 3D • Understand Transforms • Use Translations and Scales • Use pushMatrix and popMatrix

  3. Vectors • x and y are the coordinates of points • In maths we can group them together as a single object (x,y) • This is called a vector

  4. Vectors • A vector can represent 2 things

  5. Vectors • A vector can represent 2 things • A position on the screen • (A position vector) (x,y)

  6. Vectors • A vector can represent 2 things • A displacement between two points • (A displacement vector) (x,y)

  7. Vectors • A position vector is really a displacement from the origin (0,0) (x,y)

  8. Vectors • Position Vectors • drawing shapes • positions of object • Displacement Vectors • Velocities, movements

  9. Maths on Vectors • You can do maths on vectors • Normally you do each operation on each element separately • It normally help to think about vectors as displacement vectors

  10. Vector addition • add vectors • (x1, y1) + (x2, y2) = (x1+x2, y1+y2) • do one displacement after another (x1,y1) (x2,y2) (x1+x2,y1+y2)

  11. Vector subtract • subtract vector • (x1, y1) - (x2, y2) = (x1-x2, y1-y2) • The displacement of one position relative to another • Very useful (x1,y1) (x2,y2) (x2+x1,y2+y1)

  12. Length of a vector • you can calculate the length (magnitude) of a vector using Pythagoras' theorem • l2 = x2 + y2 • l = sqrt(x2 + y2) x y l

  13. Length and direction • You can think of a vector as having a length and a direction • The direction is a vector that is in the same direction but of length 1 • Calculate it by dividing each component of a vector by the length • (x/sqrt(x2 + y2), y/sqrt(x2 + y2)) • Called normalising

  14. Length and direction • Very useful to be able to think about both • Length • know the distance between two objects • know how fast an something is moving (e.g. for setting a max speed) • Direction • Move at a constant speed in a direction given by two points • Turn an object to face the direction its moving in

  15. Vectors in 3D • We can also do the same things in 3D • An extra item, z, represents depth • pass in an extra parameter OPENGL or P3D to size • The maths works the same • length is sqrt(x2 + y2 + z2)

  16. Vectors in Processing • dist() gives the distance between two points • length of the displacement between them

  17. Vectors in Processing • dist() gives the distance between two points • length of the displacement between them • PVector is a class for representing vectors • Its new to the latest version of Processing

  18. Exercises • Rewrite my last example to use PVector • make it work in 3D

  19. Aims • Understand Vectors • Position/displacement, direction, length • Use Vectors in Processing programs • in 2D and 3D • Understand Transforms • Use Translations and Scales • Use pushMatrix and popMatrix

  20. Transformations • Translate • Rotate • Scale

  21. Transformations • Transformations act on the whole processing screen

  22. Transformations • Translate moves the whole coordinate system by a x and y direction

  23. Transformations • Translate moves the whole coordinate system by a x and y direction

  24. Transformations • Anything before the translate call is draw normally

  25. Transformations • Anything before the translate call is draw normally • Anything after the call is drawn relative to the new transformed coordinate system

  26. Transformations • Scale will change the size of the coordinates relatives to the origin (0, 0)

  27. Transformations • Scale will change the size of the coordinates relatives to the origin (0, 0)

  28. Transformations • The order of transforms is very important • Changing the order changes the result

  29. Transformations • A transform applies to all the code that happens after it

  30. Transformations • A transform applies to all the code that happens after it • That means it also applies to other transforms

  31. Transformations • A transform applies to all the code that happens after it • Translate() • Translate() • Translates everything twice

  32. Transformations • A transform applies to all the code that happens after it • Translate() • Translate() • Translates everything twice

  33. Transformations • A transform applies to all the code that happens after it • A translate followed by a rotate means “apply the translate to the result of rotate”

  34. Transformations • The order of transforms is very important • Translate() • Rotate() • Means translate the result of rotating

  35. Transformations • The order of transforms is very important • Translate() • Rotate() • Means translate the result of rotating

  36. Transformations • The order of transforms is very important • Translate() • Rotate() • Means translate the result of rotating

  37. Transformations • The order of transforms is very important • Rotate() • Translate() • Means rotate the result of translating

  38. Transformations • The order of transforms is very important • Rotate() • Translate() • Means rotate the result of translating

  39. Transformations • The order of transforms is very important • Rotate() • Translate() • Means rotate the result of translating

  40. Transformations • This is the opposite order you would expect • Translate() • Rotate() • Is a bit like rotating then translating

  41. Order of transforms The normal best order is Translate Rotate Scale This means that an object is scaled the same why no matter how it is rotated It is translated the same way no matter how it is rotated

  42. Order of transforms • Rotate • Translate

  43. Order of transforms • Rotate • Translate

  44. Order of transforms • Rotate • Translate • Doesn’t end up at the end point of translating

  45. Order of transforms • Translate • Rotate

  46. Order of transforms • Translate • Rotate

  47. Order of transforms • Translate • Rotate • Rotates about its centre • if you use rectMode(CENTER) • Translates to the correct position

  48. Order of transforms • Similarly if you scale an object differently along x and y and as well as rotating the order matters • If you do • Scale() • Rotate() • The result is no longer a rectangle (skewed) • (see program)

  49. Multiple transforms • But what if we want to draw more than one thing?

  50. Multiple transforms • But what if we want to draw more than one thing? • If we transform the first one then the second, the first transform will apply to the second as well

More Related