this terms course last term we both worked on learning 2 things –processing –the concepts of...
TRANSCRIPT
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
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
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
Vectors
• A vector can represent 2 things
Vectors
• A vector can represent 2 things
• A position on the screen
• (A position vector)
(x,y)
Vectors
• A vector can represent 2 things
• A displacement between two points
• (A displacement vector)
(x,y)
Vectors
• A position vector is really a displacement from the origin (0,0)
(x,y)
Vectors
• Position Vectors– drawing shapes– positions of object
• Displacement Vectors– Velocities, movements
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
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)
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)
Length of a vector
• you can calculate the length (magnitude) of a vector using Pythagoras' theorem
• l2 = x2 + y2
• l = sqrt(x2 + y2)
x
yl
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
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
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)
Vectors in Processing
• dist() gives the distance between two points– length of the displacement between them
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
Exercises
• Rewrite my last example to use PVector• make it work in 3D
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
Transformations
• Translate
• Rotate
• Scale
Transformations
• Transformations act on the whole processing screen
Transformations
• Translate moves the whole coordinate system by a x and y direction
Transformations
• Translate moves the whole coordinate system by a x and y direction
Transformations
• Anything before the translate call is draw normally
Transformations
• Anything before the translate call is draw normally
• Anything after the call is drawn relative to the new transformed coordinate system
Transformations
• Scale will change the size of the coordinates relatives to the origin (0, 0)
Transformations
• Scale will change the size of the coordinates relatives to the origin (0, 0)
Transformations
• The order of transforms is very important
• Changing the order changes the result
Transformations
• A transform applies to all the code that happens after it
Transformations
• A transform applies to all the code that happens after it
• That means it also applies to other transforms
Transformations
• A transform applies to all the code that happens after it
• Translate()
• Translate()
• Translates everything twice
Transformations
• A transform applies to all the code that happens after it
• Translate()
• Translate()
• Translates everything twice
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”
Transformations
• The order of transforms is very important
• Translate()
• Rotate()
• Means translate the result of rotating
Transformations
• The order of transforms is very important
• Translate()
• Rotate()
• Means translate the result of rotating
Transformations
• The order of transforms is very important
• Translate()
• Rotate()
• Means translate the result of rotating
Transformations
• The order of transforms is very important
• Rotate()
• Translate()
• Means rotate the result of translating
Transformations
• The order of transforms is very important
• Rotate()
• Translate()
• Means rotate the result of translating
Transformations
• The order of transforms is very important
• Rotate()
• Translate()
• Means rotate the result of translating
Transformations
• This is the opposite order you would expect
• Translate()
• Rotate()
• Is a bit like rotating then translating
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
Order of transforms
• Rotate
• Translate
Order of transforms
• Rotate
• Translate
Order of transforms
• Rotate
• Translate
• Doesn’t end up at the end point of translating
Order of transforms
• Translate
• Rotate
Order of transforms
• Translate
• Rotate
Order of transforms
• Translate
• Rotate
• Rotates about its centre– if you use
rectMode(CENTER)
• Translates to the correct position
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)
Multiple transforms
• But what if we want to draw more than one thing?
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
Transform Matrices
• A transform is represented internally as a matrix
• A 3D array of number
• The details of how doesn’t matter at the moment
Transform Matrices
• Up to now we have only had 1 matrix
• All transforms are combined together into this matrix
• To draw more than one object we need more than one matrix
Transform Matrices
• Up to now we have only had 1 matrix
• All transforms are combined together into this matrix
• To draw more than one object we need more than one matrix
• Multiple matrices are stored in a “Stack”
Stacks
• A Stack is like a stack of paper
1
2
3
4
Stacks
• A Stack is like a stack of paper
• You can put things on it– “Push” it on a stack
1
2
3
4
5
Stacks
• A Stack is like a stack of paper
• You can put things on it
• And take things off– “Pop” it off the stack
1
2
3
4
Stacks
• A Stack is like a stack of paper
• You can put things on it
• And take things off– “Pop” it off the stack
1
2
3
Stacks
• The last thing to be put on is the first to be taken off
• Last in, first out
1
2
3
Matrix Stacks
• Storing matrices as a stack means that the most recent transforms are the ones you remove first
• Generally what you want
• Global transforms that affect the whole picture are at the bottom
• Transforms that only affect a single object at the top
Pushing and Popping Matrices
• PushMatrix() creates a new matrix and puts it on the top of the stack
• You can then do any transforms you like
• PopMatrix() will then remove the matrix from the stack
• i.e. it will remove all the transforms you have done
Multiple Objects
• For multiple objects:– PushMatrix() before drawing each object– Do all the transforms for that object– PopMatrix() to get rid of the transforms before
moving on to the next matrix
Transforms in 3D
• Translation works exactly the same in 3D• need an x,y and z for the translation vector• rotation is more complex: next lecture
Exercises
• Draw a rectangle, rotating, translating and scaling it
• Draw multiple rectangles in multiple positions using PushMatrix and PopMatrix
• Do the same with boxes in 3D