CMU 15-112: Fundamentals of Programming and Computer Science
Week 3: Animations

• To start:
  1. In the folder named 'Week3'
  2. Download 7. animationsPractice.py (It is empty)
  3. Edit the downloaded file using your preferred editor
• Do not use recursion in the solutions.

• Trace #1: Run the following code by hand/IDE :
  
  from cmu_graphics import * def onAppStart(app): app.cx = 200 app.cy = 200 app.r = 50 app.dx = 7 app.dy = 11 app.paused = True def redrawAll(app): drawLabel("Bouncing Horizontally and Vertically", 200, 30, size=16) drawLabel("Press s to step", 200, 50, size=12) drawLabel("Press p to pause/unpause", 200, 70, size=12) drawCircle(app.cx, app.cy, app.r, fill="blue") def onKeyPress(app, key): if key == "p": app.paused = not app.paused elif key == "s": takeStep(app) def takeStep(app): bounceHorizontally(app) bounceVertically(app) def bounceHorizontally(app): app.cx += app.dx if app.cx >= app.width: app.cx = app.width app.dx = -app.dx elif app.cx <= 0: app.cx = 0 app.dx = -app.dx def bounceVertically(app): app.cy += app.dy if app.cy >= app.height: app.cy = app.height app.dy = -app.dy elif app.cy <= 0: app.cy = 0 app.dy = -app.dy def onStep(app): if not app.paused: takeStep(app) def main(): runApp() main()
  
  Notice how the ball goes partially off the screen before bouncing back? Fix it so the ball bounces back as soon as it touches the edge of the screen.

1. Simple Game:
   Write the animation functions onAppStart(app), onStep(app), and redrawAll(app) to meet the requirements below.
   1. Assume that the runApp() function is defined as in the notes, and we do not need onMousePress(app) or onKeyPress(app) .
   2. The animation draws a 40x40 square in the center of the canvas, filled with some color, and a number in the center of the square.
   3. The number counts down by 1 every second, starting at 60
   4. Once the number reaches zero, it resets to 60.
   5. Every 100ms, the box should move vertically by 3 pixels. The starting direction is up.
   6. When the edge of the box hits the edge of the canvas, it should bounce and change it’s direction appropriately, i.e. if the top of the box hits the top of the canvas, it begins moving downward, and if the bottom of the box hits the bottom of the canvas, it begins moving upward.
   7. The number should remain in the center of the square at all times!



---

2. Stop the Circle!
   Write a game animation with the following features.
   1. When the game starts, a red square with side lengths of 50 pixels is drawn centered on the canvas, and a blue circle of radius 20 pixels is drawn at a random location on the canvas.
   2. When the user clicks inside the circle immediately after clicking inside the red square, the circle radius decreases by half, and the circle moves to a new random location.
   3. Four times per second, the circle’s radius grows by 1 pixel.
   4. When the user presses p, the app is paused or unpaused.
   5. When paused, the circle’s radius does not change.
   6. If any part of the circle ever goes beyond the edge of the canvas, a game-over message appears at the center of the canvas, and the square and the circle are removed from the screen.
   7. If the game is over, the user can restart the game by pressing r.
   Notes:
   • Do not hardcode for a 400x400 canvas. However, you may assume the canvas is square and at least 100x100 pixels.
   • You will be penalized if your code results in an MVC violation.
   • Make reasonable choices for anything not specified above.
   • To solve this, you need to write onAppStart, onKeyPress, onMousePress, redrawAll, and onStep.
   • You do not need to include any imports or the main function.



---

3. Click the Rectangle!
   Your task in this problem is to write a basic graphical game. You must follow MVC conventions in your solution. You will need to write onAppStart(app), onMousePress(app, mouseX, mouseY), onKeyPress(app, key) , and redrawAll(app); you may assume the runApp() function is already implemented. The animation should have the following properties:
   1. The basic screen contains three elements. One half of the screen is red, the other half is blue, and a score is printed in the center of the screen in white. Which half of the screen is blue and which is red is chosen at random when the game starts. Here is an example:
   
   2. If the user clicks on the blue portion of the screen, then nothing happens.
   3. If the user clicks on the red portion of the screen, then the score is increased by 1 point and which half of the screen is blue and which is red is re-chosen at random. (This means the colors might stay the same or they might swap.)
   4. Typing the letter ’r’ resets the score to 0.
   5. Once the score reaches 10 points, then gameplay should stop (meaning no more clicking can occur) and the score should be replaced with the words "You Win". (The user can still press ’r’ to reset the score and start over, however.)



---

4. Color Grid Animation
   Write onAppStart(app), onKeyPress(app , key), onMousePress(app, mouseX , mouseY), redrawAll(app), and onStep(app) so that when the animation is first run:
   1. The screen is equally separated into four colors: red, blue, orange, and green.
   2. The current score (initially 0) is displayed in the center of the screen in white.
   Here is an example:
   
   
   3. Game play proceeds as such:
      
      • Every four seconds, the colors rotate to the right. This means that while initially the colors are red, blue, orange, and green, after four seconds they will be green, red, blue, orange. (Every color moves to the right and the color that was furthest right becomes the first color.)
      • If the user clicks inside the red cell, they receive one point and the order of colors displayed is randomized.
      • If the user presses `r' at any time, then the game starts over.
      • If the user presses the up arrow, then the time between color rotations increases by 1 second. (It should not be allowed to go above 10 seconds.)
      • If the user presses the down arrow, then the time between color rotations decreases by 1 second. (It should not be allowed to go below 1 second.)
      • If the user scores 10 points, then the game is over and the score is replaced with the text You Win!
      • When the game is over, nothing on the screen should change unless the game is reset using r.
   4. Make reasonable assumptions for anything not specified here.
   5. Do not hardcode values for width or height.
   6. You are only allowed to use one stepsPerSecond and one onStepApp function.
   7. You may make use of a function randomizeList that takes a list and returns a new copy with the values shuffled.



---

5. Clicky Dottie Game
   Write the functions onAppStart(app), onKeyPress(app, key), onMousePress(mouseX, mouseY), redrawAll(app), and any other helper functions you might need in order to implement the following (boring) game. When game starts, the board is split in half horizontally and 100 circles are placed randomly on the board. The circles each have a radius of 10.
   
   If the user clicks on the top half of the board, then all the circles whose centers are in the top half of the board turn red. If the user clicks on the bottom half of the board, then all the circles whose centers are in the bottom half of the board turn blue. The user can click on the top-half or bottom-half in any order. Here is the view after the user clicks on the bottom half of the board:
   
   If the user then clicks on the top half of the board, it looks like:
   
   At anytime, the user can press the “r” key to reset the board with new circles and play again, like so:
   



---

6. Stack Coins (contd. from Graphics)
   Now, Let’s animate the StackCoins board game. In this part assume the function drawStackCoins(app, coinCells) already exists and works well. Do not write it again, instead just call it when you need it. The game should have the following features:
   1. The game starts with an empty board (all cells have white circles); See figure (b) from the previous problem.
   2. A coin is inserted in a column by pressing at any place on that column.
   3. A coin should be stacked on the selected column. Meaning it should be inserted on the next empty cell in that column. For example: the next empty cell in column 3 in Figure 2 is cell ("23") since cell ("33") is filled. Remember to update the string coinCells to keep track of inserted coins.
   4. If the user presses on a column that is already full, a message should be displayed on the empty space at the bottom of the canvas saying: Invalid Column !!!; See figure 2 below.
   

   

   
   5. The game can be reset by pressing the r key.
   Notes :
   • Design your helper functions wisely and the problem will be easier.
   • .split() may be useful here but you may only loop over the result, and may not index/slice the result or use list functions or list methods.
   • Do not hardcode for a 400x400 canvas. However, you may assume the canvas is square and at least 100x100 pixels.
   • You will be penalized if your code results in an MVC violation.
   • Make reasonable choices for anything not specified above.
   • To solve this, you need to write onAppStart, onKeyPress, onMousePress, and redrawAll.
   • You do not need to include any imports or the main function.