1. Creative Computing

2. Comments on Assignments Everyone did very well Report writing needs more work Jumping scale Update first then draw

3. Creative Computing \\ aims By the end of the session you will be able to: 1.Use Loops and Arrays to control the behaviour of multiple objects 2.Create a class 3.Embed data and code in a class 4.Create basic behaviours of multiple objects moving and interaction with each other

4. Creative Computing \\ Objects and Behaviour Lots of our programs involve things that move around and interact Often we want lots of these things How do we handle many interacting objects?

5. Creative Computing \\ Loops and arrays The answer is with loops and arrays Gone over last week as well as in java

6. Creative Computing \\ Instructions and data A program consists of 2 things Instructions The commands we give e.g. size(200,200); x = x+y; Data The variables, state of a program e.g. int x = 100;

7. Creative Computing \\ Instructions and data Instructions are typed into a program in a sequence from top to bottom They are executed one by one But the real power comes when you change the order

8. Creative Computing \\ Instructions and data Instructions are typed into a program in a sequence from top to bottom They are executed one by one But the real power comes when you change the order If statements select particular commands to execute

9. Creative Computing \\ Instructions and data Instructions are typed into a program in a sequence from top to bottom They are executed one by one But the real power comes when you change the order Loops execute commands multiple times

10. Creative Computing \\ Loops Loops let you do a set of commands many times while only typing them once More importantly, you dont need to know how many times until you get to the loop

11. Creative Computing \\ Arrays You also want to do the same thing with data Have many repeated data item Give them a single name Arrays

12. Creative Computing \\ Arrays 0 1234 X[2]

13. Creative Computing \\ Arrays and Loops Arrays and Loops go very well together There isnt much use to having arrays unless you can step through them and do stuff to each element Loops do just that

14. Creative Computing \\ Arrays and Loops int X[] = new int[30]; for (int i = 0; i < X.length; i++) { X[i] = i*3; }

15. Creative Computing \\ Objects and Behaviour Lots of our programs involve things that move around and interact Often we want lots of these things How do we handle many interacting objects?

16. Creative Computing \\ Objects and Behaviour You can use Arrays to store data about our objects e.g. position, velocity Loops to create their behaviour

17. Creative Computing // the number of balls int ballNumber = 20; // The data we need to know about balls // This is the "State" of the program // As we have multiple balls we need to hold their state // we use a set of array with a posiion for each ball // the size of a ball int ballSize = 10; // the x and y position float xPos[], yPos[]; // the velocity float xVel[], yVel[];

18. Creative Computing void setup() { size(500, 500); // create all the arrays xPos = new float[ballNumber]; yPos = new float[ballNumber]; xVel = new float[ballNumber]; yVel = new float[ballNumber]; // put data in them // create a random position and velocity for each for (int i = 0; i < ballNumber; i++) { // create a random position on the screen // make sure all positions are at least // ballSize from the edge of the screen xPos[i] = random(ballSize, width -ballSize); yPos[i] = random(ballSize, height-ballSize); // random small velocities between -2 and 2 xVel[i] = random(-2, 2); yVel[i] = random(-2, 2); }

19. Creative Computing void draw() { background(255); // update all the balls for (int i = 0; i < ballNumber; i++) { // update the position of the ball // by adding on the velocity xPos[i] += xVel[i]; yPos[i] += yVel[i]; // draw the ball strokeWeight(4); ellipse(xPos[i], yPos[i], ballSize, ballSize); }

20. Creative Computing \\ Objects and Behaviour Doesnt seem quite right xPos, xVel etc. are all features of a ball Dont they some how belong together, not in separate arrays? Shouldnt we somewhere have something that represents a ball? That is where classes come in.

21. Creative Computing \\ Classes Classes are a way of putting data that belong together in the same place They can represent real world things like balls You use them to create your own types

22. Creative Computing \\ Classes Rather than having an array of positions and an array of velocities You can have an array of balls A ball contains a position and a velocity

23. Creative Computing \\ Classes A class is like a new type (int, float etc.) It represents a generic class like Balls A particular ball is an object, e.g. a variable of type Ball

24. Creative Computing // create a class to represent a ball class Ball { // all the data for the ball is now // stored in the class float xPos, yPos; float xVel, yVel; float Size; } Ball ball = new Ball(); ball.xPos = 100;

25. Creative Computing \\ new and dot To create an object of a class you use the keyword new You can put the result in a variable To access a variable (member) of a class, you use a dot.

26. Creative Computing // create a class to represent a ball class Ball { // all the data for the ball is now // stored in the class float xPos, yPos; float xVel, yVel; float Size; } Ball ball = new Ball(); ball.xPos = 100;

27. Creative Computing \\ Classes We can now create an array of Ball objects Use them in our simulation instead of individual arrays Much tidier

28. Creative Computing // Now we only need one array to hold all the balls Ball balls[]; void setup() { size(500, 500); // create an array of balls balls = new Ball[ballNumber]; // Add new items to the array for (int i = 0; i < balls.length; i++) { balls[i] = new Ball(); // set up the data for the ball balls[i].Size = 10; // create a random position on the screen // make sure all positions are at least // ballSize from the edge of the screen balls[i].xPos = random(balls[i].Size, width -balls[i].Size); balls[i].yPos = random(balls[i].Size, height-balls[i].Size); // random small velocities between -2 and 2 balls[i].xVel = random(-2, 2); balls[i].yVel = random(-2, 2); }

29. Creative Computing void draw() { background(255); // update an draw the balls for (int i = 0; i < balls.length; i++) { balls[i].xPos += balls[i].xVel; balls[i].yPos += balls[i].yVel; // draw the ball strokeWeight(4); ellipse(balls[i].xPos, balls[i].yPos, balls[i].Size, balls[i].Size); } }

30. Creative Computing Create a class for a ball Using that class create a program where multiple balls move around bouncing off the edges of the screen Extra: can you create more complex behaviour? Extra: can you make the balls interact with each other? \\ Exercises

31. Creative Computing Im still not that happy Weve now put all the data for a ball together But there are also instructions that relate to balls e.g. moving and drawing Shouldnt they go in the class as well? Yes: Methods \\ Classes

32. Creative Computing Instructions are grouped together into blocks Curly brackets create blocks {} E.g. Loops, if statements, functions \\ Blocks of code

33. Creative Computing if (i < 100) { // this is one block } else { // this is another } for (int i = 0; i < 100; i++) { // this is a third block }

34. Creative Computing You can think of these as block of code that you can call in other places A way of being able to reuse blocks of code A bit like a variable allows us to reuse data \\ Functions

35. Creative Computing int ballx = 10; int bally = 10; // a function void drawBall() { ellipse(ballx, bally, 10, 10); } // another function void setup() { for (int i = 0; i < 100; i++) { ballx += 10; drawBall(); }

36. Creative Computing A method is a function that is attached to a class It allows us to put both data and instructions together in a single class The behaviour of the class becomes part of the class \\ Methods

37. Creative Computing class Ball { float xPos, yPos, xVel, yVel; float Size; // a constructor Ball() { } // Update the position of the ball void update() { } // draw the ball on screen void draw() { } }

38. Creative Computing You can add whatever methods you like to a class You call methods using the dot. notation just like member variables \\ Methods

39. Creative Computing Classes have special methods called constructors They are called when the class is created A bit like a setup method for a class They have the same name as the class \\ Constructors

40. Creative Computing Constructors are used to set up all the data in the class Provide initial values to all the variables \\ Constructors

41. Creative Computing class Ball { float xPos, yPos, xVel, yVel; float Size; // a constructor Ball() { // set the value of the size Size = 10.0; // set up the initial positions to random values xPos = random(Size, width-Size); yPos = random(Size, height-Size); // set up random velocities xVel = random(-2, 2); yVel = random(-2, 2); } }

42. Creative Computing All you need to do now is create an object of the class The variables now set themselves up in the constructor \\ Constructors

43. Creative Computing // Now we only need one array to hold all the balls Ball balls[]; void setup() { size(500, 500); // create an array of balls balls = new Ball[ballNumber]; // Add new items to the array for (int i = 0; i < balls.length; i++) { balls[i] = new Ball(); }

44. Creative Computing A good way of simulating behaviour is to have a set of 3 methods Constructor Update Draw \\ Simulating behaviour

45. Creative Computing A good way of simulating behaviour is to have a set of 3 methods Constructor Sets up all the variables Update Draw \\ Simulating behaviour

46. Creative Computing A good way of simulating behaviour is to have a set of 3 methods Constructor Update Updates the variables each frame e.g. changes the position Draw \\ Simulating behaviour

47. Creative Computing A good way of simulating behaviour is to have a set of 3 methods Constructor Update Draw Draw the object to the screen \\ Simulating behaviour

48. Creative Computing class Ball { float xPos, yPos, xVel, yVel; float Size; // a constructor Ball() { } // Update the position of the ball void update() { xPos += xVel; yPos += yVel; } // draw the ball on screen void draw() { strokeWeight(4); ellipse(xPos, yPos, Size, Size); }

49. Creative Computing Update and draw can then be called from the main draw function \\ Simulating behaviour

50. Creative Computing void draw() { background(255); // update and draw the balls for (int i = 0; i < balls.length; i++) { balls[i].update(); balls[i].draw(); }

51. Creative Computing Take your existing code and rewrite it using methods \\ Exercises

52. Creative Computing \\ aims By the end of the session you will be able to: 1.Use Loops and Arrays to control the behaviour of multiple objects 2.Create a class 3.Embed data and code in a class 4.Create basic behaviours of multiple objects moving and interaction with each other

53. Creative Computing \\ Behaviours Now wed like our objects to do some more interesting things Im going to go through a bunch of behaviours Seek Flee Obstacle avoidance

54. Creative Computing \\ Seek Head towards an object Each frame we update the velocity so that we are getting closer to a target Add a small factor in the direction of the target

55. Creative Computing \\ Seek How do we work out the direction between two objects? Subtract their positions xDir = target.ball.xPos yDir = target.ball.yPos

56. Creative Computing \\ Seek Subtract the balls position from the targets position ball.vel = ball.vel + (target.pos - ball.pos) This would take us there in one step But dont want it to move so fast, so only use a fraction ball.vel = ball.vel + (target.pos - ball.pos)/c Where c is a constant

57. Creative Computing \\ Flee The opposite of seek Run away from the target ball.vel = ball.vel - (target.pos - ball.pos)/c

58. Creative Computing \\ Obstacle Avoidance Want to be able to move around without bumping into obstacles Could just flee from all obstacles, but you dont want to avoid ones that are very far away Make the change inversely proportional to the distance squared

59. Creative Computing \\ Obstacle Avoidance How do we work out the distance Pythagoras Theorem x y h h 2 = x 2 + y 2

60. Creative Computing \\ Obstacle Avoidance h 2 = x 2 + y 2 Distance h = sqrt(x 2 + y 2 ) Direction x/h, y/h

61. Creative Computing \\ Obstacle Avoidance dirx = obstacle.posx – ball.posx h = sqrt(dirx*dirx + diry*diry) dirx = dirx/h dirx = disp/h ball.velx = ball.velx – (dirx)/(h*h)

62. Creative Computing \\ Obstacle Avoidance Lots of other ways of doing it

63. Creative Computing Implement Seek behaviour (to the mouse?) Create an obstacle class Get your objects to avoid the obstacles \\ Exercises

64. Creative Computing \\ aims By the end of the session you will be able to: 1.Use Loops and Arrays to control the behaviour of multiple objects 2.Create a class 3.Embed data and code in a class 4.Create basic behaviours of multiple objects moving and interaction with each other

65. Creative Computing Craig Reynolds - flocking The first behavioural simulation Simulates the behaviour of flocks of birds (biods), schools of fish or herds of animals Extensively used in films and other applications Flocks, herds and schools: a distributed behavioural model Craig Reynolds SIGGRAPH 1987

66. Creative Computing Boids Craig Reynolds work was an early aspect of the artificial life field He observed the behaviour of real flocks of birds and tried to figure out rules of their behaviour The resulting rules are surprisingly simple

67. Creative Computing Boids Separation Alignment Cohesion

68. Creative Computing Boids Separation Steer away from flockmates that are very close

69. Creative Computing Boids Alignment: Match direction to the average direction of nearby flockmates

70. Creative Computing Boids Cohesion: Move towards the centre of mass of nearby flockmates

71. Creative Computing Boids: Action Selection Need some way of combining the behaviours They have a priority Separation Alignment Cohesion But it isnt absolute

72. Creative Computing Craig Reynolds - flocking Emergent Behaviour These simple rules produce surprising results Here is a flock splitting to avoid an obstacle They recombine afterwards, just like a real flock

73. Creative Computing \\ Assignment In this assignment you will be creating a flocking simulation 1. (20 %) Create a program in which a number of object move around the screen with different velocities and bounce of the edges of the window. Use a class to represent the objects.

74. Creative Computing \\ Assignment 2. (40 %) Make your objects flock using Reynoldss 3 rules of flocking Separation Alignment Cohesion

75. Creative Computing \\ Assignment 3. (10 %) As well as flocking make the objects move towards the mouse pointer so that you can control the movement of the flock using the mouse. 4. (10 %) 10 further marks will be added for creative extensions to the program.

76. Creative Computing \\ Assignment 5. (20 %) Submit: A written report on your implementation, explaining what method you used for each stage. 2 images of your program running for each stage, before and after moving the mouse. The code files, with comments, explaining each part of the code.

77. Creative Computing \\ More classes We can still do more in terms of classes xPos and yPos are both really two parts of a position What we call it is a vector

78. Creative Computing \\ Vectors A vector is a pair of (x, y) v = (x,y) It is a powerful mathematical tool for representing points in space Treat as a single thing e.g. v1 + v2 = (v1.x + v2.x, v1.y + v2.y) v1 - v2 = (v1.x - v2.x, v1.y - v2.y)

79. Creative Computing \\ Vectors v1 v1.x v1.y

80. Creative Computing \\ Vectors A lot of useful operations on vectors The magnitude of a vector is its length Pythagoras theorem: v.mag() = sqrt(v.x*v.x + v.y*v.y)

81. Creative Computing \\ Vectors The direction of a vector is the same vector but with length 1 Divide the vector by its magnitude Called normalising v.normalize = v/v.mag()

82. Creative Computing \\ Vectors You subtract one vector from another to get the displacement of one vector from another disp = v1-v2

83. Creative Computing \\ Vectors v1 v2 v1 – v2

84. Creative Computing \\ Vectors We can therefore work out the distance between two points by taking magnitude of their displacement disp = v1 – v2 distance = disp.mag()

85. Creative Computing \\ Vectors Processing has its own built in class for vectors PVector (version 158 and later)

86. Creative Computing \\ Behaviours We can use vectors to create some more complex behaviours