This terms course

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) (x1x2, y1y2)
• do one displacement after another

(x1,y1)
(x2,y2)
(x1x2,y1y2)
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)
(x2x1,y2y1)
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
• Doesnt 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

51
Transform Matrices

• A transform is represented internally as a matrix
• A 3D array of number
• The details of how doesnt matter at the moment

52
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

53
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

54
Stacks

• A Stack is like a stack of paper

4
3
2
1
55
Stacks

• A Stack is like a stack of paper
• You can put things on it
• Push it on a stack

5
4
3
2
1
56
Stacks

• A Stack is like a stack of paper
• You can put things on it
• And take things off
• Pop it off the stack

4
3
2
1
57
Stacks

• A Stack is like a stack of paper
• You can put things on it
• And take things off
• Pop it off the stack

3
2
1
58
Stacks

• The last thing to be put on is the first to be
  taken off
• Last in, first out

3
2
1
59
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

60
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

61
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

62
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

63
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