Paddles

Purpose

Learn how basic shapes are drawn on a computer screen.

Learning Objectives

By the end of this activity, you should be able to:

  • aaa
  • bbb

Warmup

  1. On a 100x100 coordinate grid, what are the coordinates of some points near the edge?
  2. Fill in the blanks: A rectangle needs ** and ** to describe its size.
  3. True or False: On the p5js coordinate grid, the point (0,0) is in the upper-left.

Problem

Our Pong game needs paddles.

Ideas

Here are some beginning attempts at drawing a paddle from students who are just starting to learn p5.js:

// Maria's idea:
paddle(left, tall)

// Jackson's idea:
rectangle = [50 pixels, 200 pixels]
putOnScreen(rectangle)

// Devon's idea:
draw rectangle x=20 y=100 width=10 height=60

Exploration

paper

Examples

code

Notes

slides

… or watch the video on youtube (0:00 - 10:46 at this link) and answer these questions on a sheet of paper:

  • What are two other words that mean “instruction” in programming?
  • What is the area where you draw called?
  • In your own words - what is an argument to a function?
  • Daniel says that learning to program is not just learning to code, but is also …
  • What is the difference between setup() and draw(), according to the video?
  • Write a 1-3 sentence summary of the video.

Vocab

Practice

paper

another maybe the same?

Essential Knowledge

  1. A canvas is a drawing area with specified width and height in pixels.
  2. Functions are instructions that tell a computer what to do.
  3. Function syntax requires the function name followed by parentheses containing arguments.
  4. Arguments are values that modify function execution and must be ordered and comma-separated.
  5. Functions require varying numbers of arguments ranging from zero to many.
  6. Documentation shows programmers how to use functions and their arguments.

Check Your Understanding

Q: What describes a canvas in computer graphics?

a) A drawing area with specified width and height in pixels

b) A drawing area with infinite size that grows as needed

c) A drawing area that automatically adjusts to screen size

d) A drawing area measured only in percentages of screen size

Q: Which best defines a function in programming?

a) Instructions that tell a computer what to do

b) A way to store data in a computer’s memory

c) A mathematical formula for solving equations

d) A special type of variable that changes over time

Q: What is the correct syntax for calling a function?

a) functionName(arguments)

b) arguments(functionName)

c) functionName[arguments]

d) (arguments)functionName

Q: How should arguments be provided to a function?

a) In correct order, separated by commas

b) In any order, separated by spaces

c) In correct order, separated by semicolons

d) In any order, separated by commas

Q: How many arguments does a function need?

a) It varies depending on the specific function

b) Always exactly two arguments

c) At least one argument

d) Always three or more arguments

Q: What is the primary purpose of programming documentation?

a) To show how to use functions and their arguments

b) To explain how computers work internally

c) To list all possible programming errors

d) To provide the history of the programming language