A big part of data science is telling the "story" in your data. We haven't yet learned enough programming to analyze data for stories, but this lab gives you a creative outlet for story telling. Today's lab asks you to write a program that can modify images and create a rudimentary story animation. This is more of a fun creative lab to work on your basic programming concepts.
We will use a library created for this class to do most of the complicated visual manipulation for you. This library is based on a larger Python library for images called cv2, and we provide you the functions to call to make things easy for beginner programmers.
Using a library is great because we can let the library authors work out the details on how to do each kind of image manipulation, and we just worry about what we want to have happen. It can also be tricky at first, because we have to choose the right functions to do what we want. Think of it like driving an alien spaceship: you know the spaceship is awesomely powerful, but there will be some trial-and-error to figure out how the controls work.
Create a folder lab02 within your sd211.
We need a library called OpenCV for this lab for visuals, so run this install command in your SD211 conda environment:
conda activate sd211 conda install -c conda-forge opencv numpy
Then check if OpenCV is setup correctly. Right-click this link to turing.py3 and save-as turing.py (not .py3) to a lab02 folder. Open VSCode, go to File and "Open Folder" to choose lab02, select your SD211 conda environment, and try running it.
When run, it should pop up a video of a randomly-generated image that's meant
to look like an electron microscope image of a single-celled organism. Feel free to
glance at the code in turing.py to get a little idea of what OpenCV is capable
of. You aren't ready to understand it all, but notice that even making a complicated-looking video like this does not take very many lines of code!
Last, right-click this link easycv2.py and save-as easycv2.py (not .py3) to your lab02 folder.
We will start the lab by displaying this picture of a goat. Download goat.png and flea.png by right-clicking the links, selecting "Save image as...", and then navigating to your lab02 folder.
Now open VSCode and create a new Python program. Save it as mygoat.py in your lab02 folder, and first add this to the top of your file:
from easycv2 import imread,show,waitForKeypress,destroyAllWindowsThis imports the library to your program. Remember last week we imported EasyGUI? Now we're using easycv2, and we're importing its functions directly into your program. The syntax "from easycv2" says to open the easycv2 library, and bring in the following list of function names (e.g., imread, show, etc.).
You can copy the following to your new program:
from easycv2 import imread,show,waitForKeypress,destroyAllWindows
source_file = 'goat.png'
image = imread(source_file)
show(image,'The Goat')
waitForKeypress()
destroyAllWindows()Here is a line-by-line description of what this program is doing:
source_file = 'goat.png' | saves the name of the image file we want to open as a string variable. |
image = imread(source_file) |
reads the picture from file, and saves it in the variable image as an OpenCV image type
|
show(image,'The Goat') |
pops up a window to display the image. 'The Goat' is a string
for the window's title bar.
|
waitForKeypress() | pauses the picture viewer until you press any key. |
destroyAllWindows() | clears away the pop-up window. |
This part should be familiar now! Save your program as mygoat.py
in VSCode. Hit the run button! You should see a window pop-up with the picture of the goat. Click the image and press any key to close the window.
Copy your mygoat.py to goatflea.py.
Let's and add some fleas to that dirty goat.
Our easycv2 library also has a function called overlay(...) that puts a smaller image anywhere on top of your background image. For instance, let's say we want to put a cartoon flea on the goat. You give both images to the function, background and foreground, and it creates a brand new image combining the two!
Below is some example code that shows how to load two images and then overlay them. Some gaps are in the code for you to fill in based on what you learned from the previous part of this lab. Copy this template code, fill it in, and see what happens when you run it!
from easycv2 import imread,show,wait,waitForKeypress,destroyAllWindows,overlay
# The same as before, unchanged, read the goat!
source_file = 'goat.png'
image = imread(source_file)
# Now read the flea picture...you fill it in.
flea_file = ____________
flea = _________________
# With two variables, image and flea, the overlay function is easy to use...
# ...give it your two image variables and a y,x coordinate to start from:
combined = overlay(image,flea,10,50)
# Now "show" the combined picture, as we showed the goat image before!
...
...You should see a very large flea almost as big as the goat itself. This is obviously too big, so let's use the resize_percent() function to shrink it down before you overlay it. Here is how to resize an image, as an example:
from easycv2 import resize_percent
# This creates the resized variable, and puts a shrunk image that is 20% the size of the bigger_image
resized = resize_percent(bigger_image, 20)REQUIRED: Using the tools we showed above, resize the flea to something very small, and put it on the goat's forehead.
This part extends your goatflea.py image. Put at least 8 fleas of appropriate small size on the goat in different positions. All fleas should be on his fur and not overlapping with each other, in a fun scattered pattern. In other words, don't put them all in a boring line.
REQUIRED: Your program should show the goat with at least 8 fleas all over his fur.
For this part of the lab, you will start with your own pictures (either something from your personal collection, or something from the Web), and then create an animation "story" with them.
Create a new file called animate.py
All animations consist of a series of images, called frames, where objects move small amounts between the frames, so a streaming video of frames looks like real motion. How can we do that here? You already know how to overlay one image onto another. Now you just need to do it twice with a time delay between them. I will give you one more function as a tool, and then you will put all the pieces together.
This last new function is wait:
from easycv2 import wait # don't forget to add wait to your list!
wait(1000)The function call above, wait(1000), pauses your program for 1000 milliseconds or 1 second. You can make that value smaller or bigger, as appropriate. Combined with your showing of an image, we can do this:
...
show(image,'The Goat')
wait(1000)
show(another_image,'The Goat')
wait(1000)
show(a_third_image,'The Goat')
wait(1000)
... The above program shows one image at a time, waiting 1 second before showing the next image. Each call to show() will replace the previous image in the GUI so the user only sees one at a time. This is a partial program, not showing where the image/another_image/a_third_image variables come from. You'll want to use your own variables and images, of course!
Now you try calling these functions. Find a fun background image to be your back drop for a story, and something in the foreground that can move. Write a program that makes it "walk" horizontally across your image.
REQUIRED: a program that shows an animation with one background image, and something in the foreground moving across it, moving at least 5 frames.
You have all the tools you need to make a little story. Creativity is up to you. We have just a couple requirements that your animation should satisfy, but feel free to have fun within the specs.
REQUIRED:
Use the command-line to submit your files:
submit -c=sd211 -p=lab02 mygoat.py goatflea.py animate.py <all-your-images*>
Or more slowly, login to our submit system and upload the files:
mygoat.pygoatflea.pyanimate.pygoat.png, flea.png,
yourimage.jpg, etc.