SOURCE Lesson Plans Detail

Introduction to Computer Programming

Topic Computer Science
Program Brown Science Prep
Developed by Jason Hu
Developer Type Undergraduate students

Overview / Purpose / Essential Questions

What is object oriented programming?
How can computer science be used to model mathematics and physics?

Performance / Lesson Objective(s)

Students will write a basic program to create a bouncing ball on the screen.

Lesson Materials

Computer
Processing (free Java library available online)

Lesson Motivation

CS is a rapidly emerging field that unfortunately has not made its way into many schools' curriculum. Our aim is to introduce students to computer science to pique their interest in it as a possible career.

Lesson Activities

Students will work through the lesson plan and learn basic coding design while creating their program.

Procedure

Guide to Computer Programming

Introduction through Java/Processing

 

1. Introduction

Welcome to computer programming! After this lesson you could build robots, hack into the CIA, work for CSI … well, maybe not. But you will build cool games and interactive graphics to show off.

Computer science is the study of how we can use computers to solve problems, and programming is how we apply comp sci to the real world. Applications can range from building models, predicting diseases, to making movies. Today, we’ll get a start with animation, graphics, and games.

 

2. Programming Languages

There’s lot of different ways to do CS—we talk about programming in various programming languages, and like human languages there are hundreds to choose from. Each language defines a set of commands that are recognized by the computer to do various tasks. Some are more basic—directly manipulating the 0’s and 1’s—and some are a bit more abstract. Today, we’re using the language Java, and more specifically a Java library called Processing which is a massive collection of predefined Java programs that we can use.

If you want to download it at home for free, go to:

www.processing.org /download/

You can also find tutorials, guides, and projects here!

 

3. Your First Program

Let’s get started! We’ll first be going over programming syntax, and the basic structure of a command. Open up a Processing window, which should look like:

This is where we’ll be doing all of our coding. In the text editor, write:

 

ellipse(50, 50, 80, 80);

 

and then hit the “Run” button:

 

and voila! A white circle should show up. If it didn’t, make sure the capitalization and punctuation is exactly the same. Computers are very picky.

So what did we do exactly? Well, Processing has a predefined command ellipse() which draws a circle! We simply called on it, and told it how/where to draw the circle by putting the specifications (which we call parameters) in the parentheses ( ). The first two numbers define the x and y position, and the second two numbers define the width and height.

 

ellipse(x position, y position, width, height);

 

So if we wanted to draw an circle at the point (50, 50), with a width and height of 100 pixels, how would we write it?

 

ellipse(50, 50, ?, ?);

 

BELLS AND WHISTLES: Circles are boring though—here are some more commands to draw other shapes:

point(x, y); // draws a point at (x, y)

rect(x, y, width, height); // draws a rectangle of (width x height) at (x, y)

line(x1, y1, x2, y2); // draws a line from (x1, y1) to (x2, y2)

 

You might have noticed by now that the coordinate system is a bit different from what you’re used to. The x and y axes are still horizontal and vertical, but (0, 0) is at the top left corner.

And what if we wanted to change colors? Well, Processing has the command fill(); which takes in a number between 0 and 255 as a parameter. 0 means black, 255 means white, and 127 would be a 50/50 gray.  

To color your circle, write fill() before the ellipse command, with the specified color.

 

fill(?);

ellipse(50, 50, ?, ?);

 

Notice that all commands end with a semicolon (;). This is how the computer separates the different commands. In Processing fill() defines the color for all subsequent shapes until the next fill().

What do you think will happen with:

 

fill(255);

rect(50, 50, 50, 50);

fill(0);

rect(50, 50, 50, 50);

 

4. Animation in Processing

We like to move it move it! Drawing stick figures is fun, but animation/graphics are the cool parts of CS. In this section, we’ll learn about variables, and do a bit more complicated programming. For your first graphic, write out and play:

 

void setup() {

size(400, 600);

}

void draw(){

background(100);

fill(255);

ellipse(mouseX, mouseY, 50, 50);

}

It’s a lot of new code, but don’t worry! Let’s break this apart into understandable chunks.

 

void setup() {

… }

void draw(){

… }

 

setup() and setup() are commands, but we’re now defining them rather than calling them! These are two special cases: Processing calls setup() when it starts, and draw() at every millisecond. Thus, everything that goes between the {} will be called at a specific time.

 

void setup() {

size(400, 600);

}

 

Thus, at the beginning of the program Processing will call the command size() which defines the size of the window we create, based off of the parameters we pass in. In this case the window will have a width of 400 and a height of 600.

 

void draw(){

background(100);

ellipse(mouseX, mouseY, 50, 50);

}

 

At every time-tick, Processing will call the draw(), which will set the background to the 100-shade of gray, and then draw an ellipse of width and height 50.

But where does it place the ellipse? We put in Processing’s special values of mouseX and mouseY for the x and y coordinates, and these pass in the current x and y position of our mouse cursor. So every time we call draw(), we’re putting the circle at our mouse.

What if we wanted to make the ball move? Edit your code to:

 

int x = 0;

void setup() {

size(400, 600);

}

void draw(){

background(100);

fill(255);

ellipse(x, 300, 50, 50);

x = x+1;

}

 

Fancy, huh? To understand what we just did, let’s first look at the ellipse() command:

 

ellipse(x, 300, 50, 50);

 

This looks like what we’d been doing before, except rather than passing in a number for the x-coordinate, we put in a variable x. But unlike our mouseX example, we need to define this x for ourselves. Where’s this variable defined? At the beginning of the code, we defined x in the line:

 

int x = 0;

 

An “int” is a way computers remember numbers—it represents integers. Just think: int means number.

When we define a variable, the computer needs to first know what we’re representing. After all, if we didn’t specify, x could represent a circle, an ice cream cone, or a number, and all of these aren’t interchangeable. So all we’re doing in this line is saying:

“define a int called x, with the value 0” à int x = 0;

 

EXERCISE: It’s a bit tricky to think about how we define variables, so try thinking about what type of object is being defined, what we’re calling it, and what value it is taking on:

     string name = “Bob”; // string means readable text

     int pi = 3.14;

 

So thus, when we say :

int x = 0;

ellipse(x, 300, 50, 50);

We’re saying, in effect:

ellipse(0, 300, 50, 50);

 

So why go through all this effort? Because in our last line, we can change the value of x! Because we defined x outside of our commands, Processing will keep it around as an instance variable (see the end for more information on the types of variables). This simply means it’s a variable that all the commands can access and change, and in our case, x will “remember” where the circle is. Notice though that:

x = x+1;

 

isn’t a mathematical statement. The equals sign is saying “gets the value of,” so what we’re saying here is:

 

“x gets the value of x plus 1”  à  x = x + 1;

 

In other words, we’re adding one to x. Because we’re doing this every time Processing calls draw(),each time we’re increasing x by one before drawing the ellipse(). This will make it seem the circle is moving across the page.

Now your turn! Make the ball move along the y-direction as well:

 

int x = 0;

// what goes here?

void setup() {

size(400, 600);

}

void draw(){

background(100);

fill(255);

ellipse(x, y, 50, 50); //why did I change this?

x = x+1;

// what goes here?

}

 

5. Bounce bounce bounce bounce

So we can make a moving circle … but can we make a bouncing ball? In this section, we’re going to learn about conditional commands and do some more sophisticated math. Write out:

 

int velocity = -20;

int gravity = 1;

int yposition = 300;

 

void setup() {

size(400, 600);

}

void draw(){

background(100);

fill(255);

ellipse(200, yposition, 50, 50);

}

 

We haven’t done anything new—we simply have defined a new set of variables: velocity, gravity, and the yposition (we called this simply y last time).  Because we’re modeling a bouncing ball, it’s useful to review a bit of physics before we get started. An object changes is position over time based off of its velocity, and its velocity will change due to acceleration/deceleration.

 

position = initial position + time x velocity

velocity = initial velocity + time x acceleration

 

Gravity is just acceleration! So how would you write out this code with the variables that we have?

 

void draw(){

background(100);

fill(255);

ellipse(200, yposition, 50, 50);

yposition = ?

velocity = ? //HINT: Because we’re evaluating in draw(), which executes every millisecond, you can think of time = 1

}

 

Great! We’ve got a ball that falls realistically, but how do we make it bounce? Conditional statements!

We use these if we want the computer to execute certain commands under a set of conditions. This is the rough syntax of a conditional command.

if (condition){

// commands

}

The program will execute the commands in the brackets {} if the condition in the parentheses () are true.

For example, if we were computers and had to write the command putonclothing() to get dressed in the morning, we might write it as:

 

void putonclothes(){

if (sunny){

wear(shorts); // yay parameters!

}

if (cold){

wear(jacket);

}

if (raining){

wear(umbrella);

}

}

 

So for a bouncing ball, we’d probably want to write the conditionals to execute something when it’s at the edges. So we’ d add:

 

void draw(){

background(100);

fill(255);

ellipse(200, yposition, 50, 50);

yposition = yposition + velocity;

velocity = velocity + gravity;

if (at_bottom){

bounce;

}

}

 

But don’t think it’s that easy! at_edge and bounce aren’t defined—we need to do that ourselves!

What do we mean when we say the ball is at the bottom? Well, when the yposition = the height of the page! (Remember, the coordinate system is measured from the top left corner) How does this look then?

 

 if (yposition = 600){

} // remember, the height is 600

 

Well … no. First, remember that the equal sign (=) doesn’t mean “equal” but rather “gets the value of.” This means we’re trying to assign yposition with 600.  So instead, we’d write it as

 

if (yposition == 600){

} // the “==” is asking “are these the same?”

 

But there’s another problem—because we’re adding the velocity to the yposition as chunks, we might overshoot the distance. Thus, it’d be safer to check for:

 

if (yposition > 600){

}

 

Instead. Finally, there’s the handy variable height which—unsurprisingly—passes in the height of the page, which we should use in case we want to make the window bigger or smaller in the future (this keeps us from having to go in and manually changing a hard-coded height every time it’s needed).

 

if (yposition > height){

}

 

Don’t think we haven’t thought about bounce though! We know from physics about every action having an equal and opposite reaction, so when the ball bounces, we set the velocity to:

velocity = - velocity;

Thus, our final code looks something like:

 

int velocity = -20;

int gravity = 1;

int yposition = 300;

 

void setup() {

size(400, 600);

}

void draw(){

background(100);

fill(255);

ellipse(200, yposition, 50, 50);

yposition = yposition + velocity;

velocity = velocity + gravity;

 

if (yposition > height){

velocity = - velocity;

}

}

Wrap up / Conclusion

Review coding syntax
Discuss particularly difficult parts of the program

Follow up

Students will help each other with their programs to determine glitches or bugs.

Supporting Web Information

www.processing.org

Pre Assessment Plan

Since we assume that students have not had experience with CS, there will be no preassessment plan.

Post Assessment Plan

Students will go over how they structured their program in groups.

Alignment Info

Audience(s) High school students
STEM Area(s) Computer Science
Standard(s)
Physical Sciences (RI GSE) PS3.7-8.8a
Students demonstrate an understanding of motion by… measuring distance and time for a moving object and using those values as well as the relationship s=d/t to calculate speed and graphically represent the data.
Activity Type(s) Hands-on
Grade Level(s) High School
Version 1
Created 05/29/2013 01:10 PM
Updated 12/20/2018 11:53 AM