Exercise 1 (0.5 marks)

Implement the last animation on the Simple Animation page.

Modify the animation so that it:

• starts at 25 pixels on the x axis
• moves 2 pixels for every frame
• draws a rectangle instead of an ellipse
• the rectangle has a different fill colour

Exercise 2 (0.5 marks)

Modify exercise 1, so that it bounces back and forth using the code from Selection.

Exercise 3 (0.5 marks)

Modify exercise 2, so that the ball now bounces vertically. Note that all references to x will need to be changed to y.

Exercise 4 (0.5 marks)

Implement the mouse interaction exercise from Mouse Interaction.

Modify the code so that it rotates through colours when the mouse isn't pressed and stops rotating through colours when the mouse is pressed.

Extension Exercise

Create a program which draws a rectangle on the screen. If the user moves the mouse while the mouse is pressed, then the rectangle should be moved with the mouse. If the user moves the mouse but it is not pressed the rectangle shouldn't move. The mouse does not need to be inside the rectangle.

Hint: p5.js provides variables pmouseX and pmouseY which contain the previous co-ordinates of the mouse. By subtracting the previous co-ordinates from the current co-ordinates you can work out how far the mouse has moved between frames. Adding this difference to the position of the rectangle will cause the rectangle to move the same distance.