ycl session 1 lesson plan - globalhack · ycl session 1 lesson plan summary this week, students are...
TRANSCRIPT
YCL Session 1 Lesson Plan
Summary This week, students are meeting each other and the coach if they do not know them
already, and learning more about the Youth Coding League and how the semester will
proceed. They will also start using their code editor PyCharm to create directories and
files, as well as navigate through their view of the course website to copy-paste code
snippets into PyCharm files. They will have a chance to write their first program in
Python, as well as add comments to it. Lastly, they will prepare a basic drawing which
they will hard-code in the following session.
Session Goals ● Meet team and coach/mentor
● Gain basic familiarity with PyCharm editor and directory/file creation
● Use comments in code
Agenda ● Welcome (15 min)
● Concept 1: Coding 101 (10 min)
● Activity 1: “Hello World!” (10 min)
○ Instructions
○ Solutions
● Activity 2: Creating Another Directory (5 min)
○ Instructions
○ Code Snippet: drawing_samples.py
● Activity 3: Commenting (10 min)
○ Instructions
○ Code Snippet: commenting.py
● Activity 4: Drawing Prep (10 min)
Welcome, Introductions and Icebreakers, Classroom Expectations
(15 min)
The following is an example script of how to welcome your students to the Youth
Coding League. Please make sure to cover every bullet point below at the minimum.
See the “Session 1” Powerpoint for more details.
This is the first meeting of your Youth Coding League team!
● The goal of this program is to learn coding while creating fun 2D games. You’ll
be learning all the standard programming concepts, as well as the syntax of
Python. At the end of the semester, you will compete against other schools in
the area with the final game you’ve created, and build on your game(s) during
the event!
Next week you will start creating graphics using a program called Arcade. This
week is about making sure all of our systems are up and running, understanding
a few important concepts, and learning how to work in our new coding
environment, PyCharm.
There is so much you can do with programming, including expressing yourself by
creating amazing art, entertaining yourself and your friends by building fun
games, and eventually making money too!
Here are some videos of games students have created using the Arcade library
and Python:
http://bit.ly/arcproj1
http://bit.ly/arcproj2
http://bit.ly/arcproj3
● Let’s introduce ourselves (e.g. name, grade, favorite ice cream flavor), and do a
short icebreaker activity.
● Let’s talk about classroom expectations using an interactive activity (e.g. ROPES:
http://diversity.uwgb.edu/assets/multi/ROPES.pdf).
● Let’s pick a team name!
● The theme for this season is: Adventures and Movies
Concepts (10 min)
The script below should serve as a way for you to introduce students to what coding is,
as well as a brief introduction to the programming language Python. The section
addressing different versions of Python is not required, but does provide students with
helpful context as well as a “heads up”. Do make sure to introduce the 3 necessary
“tools of the toolbox”: Python, PyCharm, and Arcade, even if it is in just a few
sentences.
How many of you use computers on a daily basis?
Computers are not intelligent, self-sufficient beings. They cannot (for now at least!)
create anything without being given a specific set of instructions, a blueprint for what to
create. This is where programming comes in; think of programming a computer like
writing a recipe or a play.
To give the computer instructions, we will use a programming language called Python.
The creator of Python, Guido van Rossum, was a fan of Monty Python, and this is
where the name comes from (nothing to do with the snake!)
Python is a great language to start learning programming. Graphics are easier to create
in Python than in other languages, and you can apply all the same concepts learned
here in other programming languages you learn, like C or Java. Python is also a great
language for people interested in doing making sense of lots of information at once (i.e.
data processing), and automating boring things (https://automatetheboringstuff.com/).
A quick note on Python 2.x.x vs. 3.x.x
There are two main versions of Python. When Python moved to version 3, there were
changes that didn’t work with all the currently written Python 2 programs. So both
Python 2 and Python 3 were being developed simultaneously. Some people don’t want
to move to Python 3 at all.
We use Python 3. Why are you going to care?
● If you search up examples you will find both Python 2 and Python 3
examples.
● Systems such as the Mac and Linux have Python 2 installed by default.
If you see a Python example on the web that has a print statement that looks like:
print "Hi"
Instead of:
print("Hi")
Then you have a Python 2 example and it won’t run with what we have installed and
will use in this class. Since Python 2 is installed on a Mac and sometimes Linux
operating systems by default, you will need to make sure to use Python 31.
In addition to using Python, we will be using an editor called PyCharm, which is the
“environment” in which we will be writing all of our code. In order to build games, we
will need one last component: the Arcade “library”, which is a set of pre-written
instructions that we can directly include at the top of our instructions (think of it like
bringing an entire virtual library full of books with you wherever you go!)
Activity 1: “Hello World!” (10 min)
Most if not all of your students should have Python, PyCharm, and Arcade
downloaded/installed, and this activity is meant to start familiarizing them with how to
write and execute Python code in the PyCharm editor.
In order to give our computer instructions using the Python language, we must use an
integrated learning and development environment, or IDE, called PyCharm.This
environment will allow us to write, edit, and “run”, or “execute”, code, to see what the
computer can do with our instructions! PyCharm’s component you will use the most is
called the edit window. This where you will write the actual instructions, or code. All of
the lines of code taken together are called your script (like the script for a movie!).
In order to see what the result, or output, of your code/instructions looks like, you will
first need create a file for your code, then save your code (we wouldn’t want to lose our
hard earned work!), and then you will need to “execute” your scripts.
One of the first exercises most people complete when they first learn to code is a “Hello
World!” print statement. Printing in computing means displaying whatever you want
(usually a word, a letter, a number, or an equation), to your Python shell. In our “edit”
window, we will use a command called a print function, which is a piece of code you
1 http://arcade-book.readthedocs.io/en/latest/chapters/01_setup/setup.html
can use over and over again, and parentheses to surround whatever it is we want to
display (aka print!). We’ve just given the computer instructions to display the words
“Hello World!”
“Hello World!” is what we call a string, and print is what we call a built-in function. We
will learn more about these two during the course.
Instructions:
● Start PyCharm. If you’ve got it installed, just hit the “Window” key and start
typing in “PyCharm”.
● If this is the first time you are opening it, just press next/skip for the
prompts.
● Create a “Pure Python” project. But wait! Don’t just hit “Create” when you get
to this page. There are two more steps.
● Step 1: Change where you want to save the file. If you are developing on
your own computer, save to the C: drive. If you are developing on a lab
computer, save to your flash drive, or to a network drive. Don’t save to the C:
drive. Ask if you need help.
● Step 2: Change “untitled” to the name “YCL 2017”. We’ll use the same
project for everything we do in class.
● Make sure that the interpreter is 3.6.0 or later.
● Now you can create the project.
● Inside of this project, create a new directory. Call it Session 1. We’ll have a
new directory for each session, and a new file for each activity or code
snippet. If you want to create a “scratch” program to play around with, put it
in a new directory. Give your directory a good name, so you can go back and
find the code easier.
● Navigate to the directory you just created (you may have to double click on
the “YCL 2017” project to to find the “Session 1” directory). Right click on the
directory you just created. Make sure you are inside the Session 1 directory.
Create a new “Python File”. Not simply “New File”, but “New Python File”.
● Type in your program. We will use a function called print to print something
to the screen. Like the sine and cosine functions you used in math, we follow
the function name with parentheses. We put the function parameter inside.
With a sine function, we put in an angle. With the print function, we put
what we want to print. It has to be in quotes, like so:
print("Hello World!")
Note that case matters. The following will not work:
Print("Hello World!")
Great! Time to run it. Right-click on the program and select “Run ‘hello.py’”
See the output of your program at the bottom of the screen. Click the image below to
make it better and note the:
● Right margin. You can write code past this point, but don’t.
● Where you can hover your mouse for “hints” on how to make your code better.
● Where you can quickly click to run your program again.
Solution:
print(“Hello World!")
[output] Hello World!
● Try printing anything other words/sentences you want, like “School is
awesome!” or “My teacher is the best!”
Activity 2: Creating Another File (5 min)
Again, this activity is meant to familiarize students with how to operate PyCharm, in this
case creating a new file. Once drawing_samples.py is created, practice accessing the
course website’s sessions from the student view to retrieve code samples for copy-
pasting and running in PyCharm.
Students will get instructions to this activity in the student view as well, but it’s up to
you whether you want to download the powerpoint and add the screenshots below. We
recommend you use these screenshots to do a demo for students before they try it out
on their own.
We are going to run some code snippets as we go through the semester. Let’s create a
Python file for this chapter called drawing_sample.py. Your system should look like
this:
You can see a complete breakdown of what your Session directories should look like, as
well as all the files that should be included, on the course website. This is also where
you will find the code snippets to copy, paste and execute inside of your PyCharm code
snippet files.
Let’s find the drawing_sample.pdf code snippet under the “Session 1” folder on the
course website, and copy-paste the code there into the newly created
drawing_sample.py in PyCharm. Run it and see what happens!
Code Snippet drawing_sample.py
""" 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(800, 600, "Drawing Example") # Set the background color arcade.set_background_color(arcade.color.AIR_SUPERIORITY_BLUE) # Get ready to draw arcade.start_render() # Draw the grass arcade.draw_lrtb_rectangle_filled(0, 800, 200, 0, arcade.color.BITTER_LIME) # --- Draw the barn --- # Barn cement base arcade.draw_lrtb_rectangle_filled(30, 350, 210, 170, arcade.color.BISQUE) # Bottom half arcade.draw_lrtb_rectangle_filled(30, 350, 350, 210, arcade.color.BROWN) # Left-bottom window arcade.draw_rectangle_filled(70, 260, 30, 40, arcade.color.BONE) arcade.draw_rectangle_filled(70, 260, 20, 30, arcade.color.BLACK) # Right-bottom window arcade.draw_rectangle_filled(310, 260, 30, 40, arcade.color.BONE) arcade.draw_rectangle_filled(310, 260, 20, 30, arcade.color.BLACK) # Barn door arcade.draw_rectangle_filled(190, 230, 100, 100, arcade.color.BLACK_BEAN) # Rail above the door arcade.draw_rectangle_filled(190, 280, 180, 5, arcade.color.BONE)
# Draw second level of barn arcade.draw_polygon_filled([[20, 350], [100, 470], [280, 470], [360, 340]], arcade.color.BROWN) # Draw loft of barn arcade.draw_triangle_filled(100, 470, 280, 470, 190, 500, arcade.color.BROWN) # Left-top window arcade.draw_rectangle_filled(130, 440, 30, 40, arcade.color.BONE) arcade.draw_rectangle_filled(130, 440, 20, 30, arcade.color.BLACK) # Right-top window arcade.draw_rectangle_filled(250, 440, 30, 40, arcade.color.BONE) arcade.draw_rectangle_filled(250, 440, 20, 30, arcade.color.BLACK) # Draw 2nd level door arcade.draw_rectangle_outline(190, 310, 30, 60, arcade.color.BONE, 5) # --- Draw the tractor --- # Draw the engine arcade.draw_rectangle_filled(600, 120, 140, 70, arcade.color.GRAY) arcade.draw_rectangle_filled(590, 105, 90, 40, arcade.color.BLACK) # Draw the smoke stack arcade.draw_rectangle_filled(580, 175, 10, 40, arcade.color.BLACK) # Back wheel arcade.draw_circle_filled(490, 110, 50, arcade.color.BLACK) arcade.draw_circle_filled(490, 110, 45, arcade.color.BLACK_OLIVE) arcade.draw_circle_filled(490, 110, 35, arcade.color.OLD_LACE) arcade.draw_circle_filled(490, 110, 10, arcade.color.RED) # Front wheel arcade.draw_circle_filled(650, 90, 30, arcade.color.BLACK) arcade.draw_circle_filled(650, 90, 25, arcade.color.BLACK_OLIVE) arcade.draw_circle_filled(650, 90, 18, arcade.color.OLD_LACE) arcade.draw_circle_filled(650, 90, 5, arcade.color.RED) # --- Finish drawing ---
arcade.finish_render() # Keep the window up until someone closes it. arcade.run()
Activity 3: Commenting (10 min)
In this next activity, students will learn how to comment their code. Make sure you
stress how vital commenting is, and encourage students to comment as much as they
can when writing code. Have students copy-paste the commenting.py file from their
view of the course site, and then go back and comment on their hello.py file from
scratch, without copy-pasting the syntax.
Before we begin learning to build games, we need to learn about comments in code.
When typing in computer code, sometimes we want to be able to write things that the
computer ignores. We call this “commenting code.” You will see a lot of comments in
code examples to explain how they work.
Below are two ways of adding comments to code in the Python computer language:
Code Snippet: commenting.py
1
2
3
4
5
6
7
8
9
"""
This is a sample program to show how to draw using the Python programming
language and the Arcade library.
Multi-line comments are surrounded by three of the double-quote marks.
Single-line comments start with a hash/pound sign. #
"""
# This is a single-line comment.
Instructions:
Part 1: Go ahead and copy-paste the snippet above it in a new commenting.py file,
stored inside your “Session 1” directory. Multi-line comments usually start each source
file and explain what the code does. Whenever you are doing
Let’s try running the program. But before we run the program, we need to make sure
we are running the right program. Look at the image below. If I select “run” with the
green arrow, I will run drawing_sample.py, not the program I want to run. You need
to right-click on our program commenting.py and select “Run ‘commenting.py’”
instead.
Note: “running” a program is synonymous to “executing” a program.
Hey! When we run the program, nothing happens. That’s because the only code that
we wrote were “comments.” Comments are ignored. Therefore, there was nothing for
the computer to do.
Part 2: go back and comment on your hello.py file!
Activity 4: Drawing Prep (10 min)
In this activity, students should prepare what they will be drawing in the next session,
using graph paper to place where on the screen they want their drawings. A helpful hint
here is to give students an example dimensions of the screen, like 800 pixels by 800
pixels, so that they know what they’re working with, i.e. if they want their drawing to
be in the middle, they should start the origin at (400, 400)
An example of an easy drawing would be a snowman (3 white balls, a red hat, 2 small
black circles), and a more complex drawing would be the tractor example below and in
the drawing_sample.py code snippet.
Materials Needed: graph paper, pens/pencils, colored pens/pencils
We are going to prepare for our drawing activity next week by sketching out we want
to draw out using code next week, including the shapes and the colors we want
to use.
Here’s an example of something you could draw next week:
In this example, you can see circular shapes, rectangular shapes...what else can you
see? Identify all colors and all shapes in this image, and plan your drawing out in a
similar fashion.
Don’t forget to align your shapes with the squares of your graph paper as if you were
drawing on a coordinate plane (hint hint: you will be next week!), keeping in mind
which square you begin on (e.g. your origin), and how many squares your extend in
every direction (e.g. your x and y coordinates, or width and height).