Interactive Sierpinski Activity

You will be adding interactive funcionality to the sierspinski gasket program:

Requirements

Your program will modify the existing sierpinski gasket triangle code to allow for the following interactions:

• Start/Stop - You must be able to begin the sierpinski gasket animation, stop the animation where it left off, and click start again to resume.
• Increase and decrease speed - You must be able to speed up and slow down the animation by a fixed rate with each click (to a certain upper bound threshold).
• Reset - You must be able to start the animation over again from the beginning. This clears all current animation from the screen and immediately starts the animation again at it’s default animation speed.

Implementation

You will need four buttons:

• Start/Stop
• Slow down
• Speed Up
• Reset

All buttons will appear on one line and in the aforementioned order. The animation should NOT start when the page loads. If the animation is not running, Start/Stop will begin the animation at a default rate of 1 animation frame per 250 milliseconds. If the animation is running Start/Stop will stop or pause the animation. Reset will restart the animation from the beginning at the default rate. Pressing the Slow Down button while the animation is running will cause the animation rate to decrease by one fifth. Pressing the Speed Up button will cause the animation rate to increase by one fifth. The speed will be capped at a rate of 1 animation frame per millisecond. Pressing the increase of decrease speed while the animation is not running will leave the animation paused, but still modify the rate of animation when it is resumed.

Hints

• There is an alternative to requestAnimFrame to call a function repeatedly (check the Chapter 3). When you find it, you will also need to find a way to stop it (Google will help).

Grading

You will earn up to 20 points for this exercise, broken down as follows:

• 1 points - Something was submitted
• 2 points - Buttons are present, aligned horizontally, and in the proper order
• 3 points - Start/Stop can start and stop the animation
• 2 points - Default animation speed is 1 frame every 250 milliseconds
• 2 points - Reset clears and restarts the animation with the default animation speed
• 3 points - Increase and decrease speed alter the animation rate while running and when stopped
• 3 points - Resuming the animation should keep the same animation speed unless speed up or slow up were pressed while stopped
• 2 points - Animation does not start when page loads
• 2 points - Animation rate is capped at 1 frame per millisecond