YCL Session 2 Lesson Plan

Transcription

1 YCL Session 2 Lesson Plan Summary In this session, students will learn the basic parts needed to create drawings, and eventually games, using the Arcade library. They will run this code and build on top of it, using original shapes and colors, in two activities: by modifying shapes drawn to the screen, and by using their diagrams from last week to create an original picture. This session should also continue to build their confidence with PyCharm. Session Goals Increased confidence with PyCharm, and creating/editing files Understand the basic mechanisms of the Arcade library Use existing shapes and colors of the library to create original designs Agenda Concepts: Arcade and Drawing Basics (10 min) Code Snippet: arcade.py Activity 1: Drawing Shapes (15 min) Instructions Code Snippet: drawing_shapes.py Activity 2: Drawing a Picture (30 min) Instructions Tips/Notes Concepts: Arcade and Drawing Basics (10 min) This Concepts section introduces and breaks down all the necessary parts to start drawing and building things with the Arcade library. The code is added line by line, so no need to run every program below. Instead, have students copy-paste the arcade.pdf from their site at the end, and have them spend a few minutes identifying and explaining to one another the parts of Arcade they just learn about. Open up PyCharm to the same YCL 2017 project we created last week. We ll use it for all our work this semester. 2.1 Importing the Arcade library Before we can draw anything, we need to import a library of code that has commands for drawing. The library we will be using to draw things today, and to build games later on, is called Arcade.

2 Computer languages come with a set of built-in commands. Most programs will require more commands than what the computer language loads by default. These sets of commands are called libraries. Some languages have their own special term for these libraries. In the case of Python, they are called modules. Thankfully, it is easy to import a library of code. If we want to use the arcade library, all we need to do is add import arcade at the top of our program. Attention Libraries should always be imported at the top of all other lines of code. Only comments should appear ahead of an import statement. In the code below, we ve imported the Arcade library. If you run the code, nothing will happen. We ve asked to load the arcade library, but we haven t done anything with it yet This is a sample program to show how to draw using the Python programming language and the Arcade library. # Import the "arcade" library import arcade 2.2 How to Open a Window for Drawing Now it is time to open the window. See the command below: How does this command work? To begin, we select the arcade library with arcade. Then we separate the library from the function we want to call with a period:. Next, we put in the function, which happens to be open_window(). Commands that we can run are called functions.

3 Note Commands that we can run are called functions. You can also think of them as a reusable piece of code. We surround the function information, called parameters, using parentheses, like this: my_function(parameters). First, we specify the size of the window, meaning its height and width: this is the height and width of the drawing surface in pixels, which is a unit of measurement we will use a lot in designing and building our games. A pixel is is the basic unit of programmable color on a computer display or in a computer image. Think of it as a logical - rather than a physical - unit. The physical size of a pixel depends on how you've set the resolution for the display screen. Since the numbers specify the part of the window you can draw on, the actual window is larger to accommodate the titlebar and borders. Second, we want to tell the window what text to display when it opens up (see the 3rd argument, Drawing Example?) We put this text to be displayed between quotation marks. Attention Don t forget to put a comma between every parameter! Wait, how do we know that it was the open_window function to call? How did we know what parameters to use? The names of the functions, the order of the parameters, in other words the rules, for building our programs with Arcade are in its Application Program Interface or API for short. You can click here for the Arcade API. Any decent code library will have an API and documentation you can find on the web. Below is an example program that will open up a window:

4 This is a sample program to show how to draw using the Python programming language and the Arcade library. # Import the "arcade" library import arcade # Open up a window. # From the "arcade" library, use a function called "open_window" # Set the and dimensions (width and height) # Set the window title to "Drawing Example" arcade.open_window(600, 600, "Drawing Example") If you run the code above, it sort of works. If you have fast eyes, and a slow computer, you might see the window pop open, then immediately close. If your computer is fast, you won t see anything at all because the window closes too fast. Why does it close? Because our program is done! We ve run out of code. 2.3 Keep Arcade Running To keep the window open, we need to pause until the user hits the close button. To do this, we ll use the run command in the Arcade library. The run command takes no parameters, but even if a function doesn t take parameters, you still need to use parentheses.

5 This is a sample program to show how to draw using the Python programming language and the Arcade library. # Import the "arcade" library import arcade # Open up a window. # From the "arcade" library, use a function called "open_window" # Set the window title to "Drawing Example" # Set the and dimensions (width and height) arcade.open_window(600, 600, "Drawing Example") # Keep the window up until someone closes it. arcade.run() You should get a window that looks something like this: 2.4 Clearing the screen

6 Right now we just have a default white as our background. How do we get a different color? Use the set_background_color command. But by itself, the function doesn t work. You need two more commands. These tell the Arcade library when you are about to start drawing, start_render(), and when you are done drawing, finish_render(). See this example below: Code Snippet: arcade.py Have students copy-paste this snippet into their editors and run it to get the full picture of drawing using Arcade (no pun intended!) This is a sample program to show how to draw using the Python programming language and the Arcade library. # Import the "arcade" library import arcade # Open up a window. # From the "arcade" library, use a function called "open_window" # Set the window title to "Drawing Example" # Set the and dimensions (width and height) arcade.open_window( 600, 600, "Drawing Example") # Set the background color arcade.set_background_color(arcade.color.air_superiority_blue) # Get ready to draw arcade.start_render() # (The drawing code will go here.) # Finish drawing arcade.finish_render() # Keep the window up until someone closes it. arcade.run()

7 Specifying Colors Wait, where did AIR_SUPERIORITY_BLUE come from? How do I get to choose the color I want? There are two ways to specify colors: Look at the API documentation at and specify by name, e.g. arcade.color.aquamarine Specify the RGB or RGBA color. To specify colors by name, you can look at the color API documentation and use something like arcade.color.aquamarine in your program. The color names come from the ColorPicker color chart (

8 If the color you want isn t in the chart, or you just don t want to use that chart, you can specify colors by RGB. RGB stands for Red, Green, and Blue 1. We specify how much red, green, and blue to use using numbers. No light is zero. Turn the light on all the way and it is 255. So (0, 0, 0) means no red, no green, no blue. Black. Here are some other examples: Red Value Green Value Blue Value Color Black White Grey Red Green Blue Yellow There are tools that let you easily find a color, and then get the RGB values. One that is easy to remember is colorpicker.com. You can select the color, and then get the numbers to use when specifying a color. See the image below: 1 Computers, TVs, color changing LEDs, all work by having three small lights close together. A red light, a green light, and a blue light. Turn all three lights off and you get black. Turn all three lights on and you get white. Just turn on the red, and you get red. Turn on both red and green to get yellow. RGB based monitors work on an additive process. You start with black and add light to get color. This is different than paint or ink, which works on a subtractive process. You start with white and add to get darker colors. Therefore, keep separate in your mind how light-based RGB color works from how paint and ink works.

9 After getting the number, specify the color as a set of three numbers surrounded by parenthesis, like this 2 : arcade.set_background_color((189, 55, 180)) If you are interested in learning more about why the values for specifying color range from 0 to 255, read this footnote and discuss with students if time allows or they are curious 3. 2 In addition to RGB, you can also specify Alpha. The Alpha Channel controls how transparent the color is. If you draw a square with an alpha of 255, it will be solid and hide everything behind it. An alpha of 127 will be in the middle, you will see some of the items behind the square. An alpha of 0 is completely transparent and you ll see nothing of the square. 3 Notice how the color values go between 0 and 255? The reason is important to understand how computers work. Remember how everything is stored in numbers? They are not just stored in numbers, they are stored in 1 s and 0 s. Everything to the computer is a switch. If there is electricity, we have a 1. If there is no electricity we have a 0. We can store those 1 s and 0 s in memory. We call these 1 s and 0 s binary numbers. How do we go from 1 s and 0 s to numbers we normally use? For example, a number like 758? We do that with a combination of 1 s and 0 s. Like this: Binary Base - 2: 0000, 0001, 0010, 0011, 0100, 0101, 0110, 0111, 1000 Compare that to Base 10: 0, 1, 2, 3, 4, 5, 6, 7, 8 See the pattern? It is the same pattern we use when we count as a kid. As a kid we learned to go 0 to 9, then when we hit 9 we go back to 0 and add one to the ten s place. Here we only have 0 to 1 instead of 0 to 9. And instead of a ten s place we have a two s place. You might have used bases in math class long ago. Computers work in Base-2 because they only have two ways to count, on or off. Humans think in Base-10 because we have 10 fingers. Numbers are stored in bytes. A byte is a set of eight binary numbers. If we were to follow the pattern we started above, the largest number we could store with eight 1 s and 0 s is: In Base-10 this is 255.

10 2.5 The Coordinate System In your math classes, you ve learned about the Cartesian coordinate system, which looks like this: Source: Wikipedia: Cartesian coordinate system Our graphics will be drawn using this same system. But there are additional things to keep in mind: We will only draw in the upper right quadrant. So 0,0 will be in the lower left of the screen, and all negative coordinates will be off-screen. Each Point will be a pixel. So a window that is 800 pixels wide, will have x- coordinates that run from 0 to 800. Attention We are only using the upper-right quarter/quadrant of the Cartesian system! 2.6 Drawing a Rectangle Let s start drawing with a program to draw a rectangle. The function we will use is draw_lrtb_rectangle_filled. It stands for draw left-right-top-bottom rectangle. We ll use this program to draw a green rectangle: Let s use some math. We have 8 ones and zeros. That give us 2 8 = 256 possible numbers. Since zero is a combination, that makes the biggest number 255. If we had 16 bits, then we d have 2 16 = 65,536 possible combinations. Or a number from A 32-bit computer can hold numbers up to 2 32 = 4,294,967,296. A 64-bit computer can hold really large numbers! So because a computer holds colors with one byte for red, one for green, and one for blue, each color has a value range from

11 This is a sample program to show how to draw using the Python programming language and the Arcade library. # Import the "arcade" library import arcade # Open up a window. # From the "arcade" library, use a function called "open_window" # Set the window title to "Drawing Example" # Set the and dimensions (width and height) arcade.open_window(600, 600, "Drawing Example") # Set the background color arcade.set_background_color(arcade.color.air_superiority_blue) # Get ready to draw arcade.start_render() # Draw a rectangle # Left of 5, right of 35 # Top of 590, bottom of 570 arcade.draw_lrtb_rectangle_filled(5, 35, 590, 570, arcade.color.bitter_lime) # Finish drawing arcade.finish_render() # Keep the window up until someone closes it. arcade.run() Activity 1: Drawing Shapes (15 min) In this activity, students will start by copy-pasting a code snippet that outputs a set of shapes, which students should change around according to the instructions below. There is no solution for this activity as it is more about exploring the drawing capabilities of Arcade: encourage trial and error here! There are a lot of shapes we can draw, many of which already exist in Arcade.

12 Directions: Use the same project that you used for last week, YCL2017. Do not create a new project. Use the same directory as Activity 1 from this session, Session 2. Create a new Python file drawing_shapes.py in PyCharm Copy the code below, and paste it into the newly created PyCharm file. Now run it! Code Snippet: drawing_shapes.py 1 2 This is a sample program to show how to draw using the Python programming 3 language and the Arcade library # Import the "arcade" library 7 import arcade 8 9 # Open up a window. 10 # From the "arcade" library, use a function called "open_window" 11 # Set the window title to "Drawing Example" 12 # Set the and dimensions (width and height) 13 arcade.open_window(600, 600, "Drawing Example") # Set the background color 16 arcade.set_background_color(arcade.color.air_superiority_blue) # Get ready to draw 19 arcade.start_render() # Draw a rectangle 22 # Left of 5, right of # Top of 590, bottom of arcade.draw_lrtb_rectangle_filled(5, 35, 590, 570, arcade.color.bitter_lime) 25 # Different way to draw a rectangle 26 # Center rectangle at (100, 520) with a width of 45 and height of arcade.draw_rectangle_filled(100, 520, 45, 25, arcade.color.blush) # Rotate a rectangle 30 # Center rectangle at (200, 520) with a width of 45 and height of # Also, rotate it 45 degrees. 32 arcade.draw_rectangle_filled(200, 520, 45, 25, arcade.color.blush, 45) # Draw a point at (50, 580) that is 5 pixels large

13 35 arcade.draw_point(50, 580, arcade.color.red, 5) 36 # Draw a line 37 # Start point of (75, 590) 38 # End point of (95, 570) 39 arcade.draw_line(75, 590, 95, 570, arcade.color.black, 2) # Draw a circle outline centered at (140, 580) with a radius of 18 and a line 42 # width of arcade.draw_circle_outline(140, 580, 18, arcade.color.wisteria, 3) # Draw a circle centered at (190, 580) with a radius of arcade.draw_circle_filled(190, 580, 18, arcade.color.wisteria) # Draw an ellipse. Center it at (240, 580) with a width of 30 and 49 # height of arcade.draw_ellipse_filled(240, 580, 30, 15, arcade.color.amber) # Draw text starting at (10, 450) with a size of 20 points. 53 arcade.draw_text("school", 10, 450, arcade.color.brick_red, 20) # Finish drawing 56 arcade.finish_render() # Keep the window up until someone closes it. 59 arcade.run() 60 Once you ve run that, change around whatever elements of the shapes you want, including, but not limited to: What text displays when the window opens The background color of the window The parameters of each draw function Width and height of shapes Color of shapes Alpha value of the shapes Angle of the shapes Activity 2: Drawing a Picture (30 min) In this activity, students will create a coherent picture based on the pictures they produced from the session before. They may start with the code from

14 drawing_samples.py or drawing_shapes.py, or they can start writing the program from scratch. Encourage them to persist, just as they did in the previous activity! Instructions: Use the same project that you just used, YCL2017. Do not create a new project. Use the same directory as Activity 1 from this session, Session 2. Create a new Python file drawing_picture.py You must use multiple colors. You must have a coherent picture. No abstract art with random shapes. You must use multiple types of graphic functions (e.g. circles, rectangles, lines) Use blank lines in the code to break up sections. For example, when drawing a tree, put a blank line ahead of, and after. Use comments effectively. For example, when drawing a tree, put a comment at the start of those drawing commands that says #Draw a tree. Remember to put one space after the # sign. Put spaces after commas for proper style. Tips/Notes: To select new colors use: Copy the values for Red, Green, and Blue. Do not worry about colors for Hue, Saturation, or Brilliance. Please use comments and blank lines to make it easy to follow your program. If you have 5 lines that draw a robot, group them together with blank lines above and below. Then add a comment at the top telling the reader what you are drawing. Keep in mind the order of code. Shapes drawn first will be at the back. Shapes drawn later will be drawn on top of the other shapes. Looking for ideas? At the page below, each time you refresh the page there are various images created by other students: See the Appendix for an example program that shows you how the tractor example from last session would be drawn.