SmithLogo

CSC 111

Introduction to Computer Science Through Programming

Smith Computer Science



Lecture Notes 29: Planning a simple animation with graphics.py





Example Objective:

The following is what we wanna build:





(Note: the awesome wavering pixels in the background is an artifact of the gif-making)

The next steps are:

  1. Design the structure so we achieve the following objective
    1. We may have several types of fish
    2. They may flip direction
    3. They move on the screen
    4. They move in a different direction if certain conditions are met (reach the wall)
  2. Write the Fish Class
  3. Create and Draw several fish and move them in the screen
  4. Add a background
  5. Add bouncing logic




Task 1: Design the Structure









First discuss the components using drawings and geometry as well as the Coding Structure that we'll use.

Open the Aquarium Replit to develop the project it by bit.



Things to note:



Drawing the Background



Check the img folder and read the graphics pdf documentation to search how to add the image "aquarium_bg.gif" as a background.

Showing our results in the main

add the necessary code in the appropriate section of the main to show the background (and debug your issues)



The base fish class



The following is the geometry and coordinate system of the base fish:





We will build the fish class with the following idea:

We will construct it in two steps:
  1. initialize the fish given an input Graphics window win and a 2D Point position
  2. construct the fish using the 2D Point position


This will be important when we move on to animation because having a fish object and constructing it are two different things, the former saves space in memory for the information while the latter defines the actual look of the fish, which will vary depending on the animation state (in particular.... is the fish facing left or right!)

  1. __init__ will define the basic variables that must be present in a fish (like a body, a tail, an eye, the values for red, green and blue and a direction starting value) and some of the values they must contain (like the red, green, and blue values of the fish's color)


  2. Then, __init__ calls the method construct which will take care of actually making the body parts and placing them in the fish's coordinate system


The __init__ method

Make sure to add variables for: Then, call the construct method passing the position input parameter as an argument.

The construct method

Make and place the following elements:

The draw method

This is simple, it draws the body, tail and eye for the current object in the window object win passed in as a parameter.



Showing our results in the main

Un-comment step 1 in main (only two lines) and debug your issues.










Task 2: Add the fish subclasses (child classes)









For each subclass:

  1. Call the base fish's constructor first
  2. change a selection of shape, size, color for the body, eye and tail of the fish











Task 3: Create, draw and move fish from the main









We will need the "aquarium" logic to run in the main while using the created objects.

We should use the graphics' library move method.










Task 4: Add the fish direction and a method to flip it









Parametrized construction (inside make_fish) based on a 2-option direction (1 or -1)










Homework

[Due for everyone]
Aquarium: It is Due by Friday next week, but we'll work on it together during this week.

Also, remember that the Prototype I is due tomorrow (extended to Monday 04/11)

For Project Prototype I you will submit your minimum viable product. This should include the core functionality to demonstrate the purpose of your project.

Your core functionality should include:

Project's Niche:



User's Journey:



Features and Modules:



[Optional]