# What is a Program - 1

ellipse(10,10,10,10);

# What is a Program - 2

Exercise

Think of something you would like to make a program for. It could be a game, something to help you talk to friends, a program that helps you do your homework, a website for your favorite hobby, or anything else!

# Drawing a Circle

ellipse(10,10,10,10);

# Parts of an Instruction - 3

Exercise

Try changing the numbers to something else like (30,25,32,48), then click Play. What happens to your cicle? Try changing the number a few times!

# Drawing a Square

```rect(10,10,50,50);
```

# Drawing a Line

```line(10,10,50,50);
```

# Drawing a Line and Triangle

```line(10,10,50,50);
triangle(50,50,20,90,80,90);
```

# Placing Things on the Screen - 7

```rect(3,5,5,3);
```

# Placing Things on the Screen - 9

Exercise

What would the four (left, top, width, height) arguments for this rectangle be?

# Placing Things on the Screen - 10

Exercise

Draw your own rectangle on the graph paper below, then write the rect function that would create it.

# Drawing a Face on the Screen

Exercise

Create a program that draws a face on the screen. You will need to draw two circles - one for each eye - and a rectangle for the mouth. If you want, you can also draw a triangle for the nose!

fill(0);

# Black and White - 2

```fill(0);
ellipse(25,30,30,30);
ellipse(75,30,30,30);
rect(20,60,60,20);
```

# Black and White - 3

```fill(0);
ellipse(25,30,30,30);
fill(130);
ellipse(75,30,30,30);
fill(255);
rect(20,60,60,20);
```

# Black to White Colors

Color Number Code
Black
0 `fill(0);`
Dim Gray
105 `fill(105);`
Gray
128 `fill(128);`
Dark Gray
169 `fill(169);`
Silver
192 `fill(192);`
Light Gray
211 `fill(211);`
Gainsboro
220 `fill(220);`
White Smoke
245 `fill(245);`
White
255 `fill(255);`

fill(grayscale);
fill(0);
fill(120);
fill(255);

# Black and White - Exercise

Exercise

Change the color of the face you made in your last program. You can make it black, white, or anything in between.

# Fill with Color

fill(red, green, blue);
fill(255,0,0);
fill(255,0,255);
fill(150,150,20);

# Red, Green, Blue Colors

Color Red Green Blue Code
Red
255 0 0 `fill(255,0,0);`
Green
0 255 0 `fill(0,255,0);`
Blue
0 0 255 `fill(0,0,255);`

# More Colors

Color Red Green Blue Code
Yellow
255 255 0 `fill(255,255,0);`
Cyan
0 255 255 `fill(0,255,255);`
Fuchsia
255 0 255 `fill(255,0,255);`
Purple
128 0 128 `fill(128,0,128);`
Navy
0 0 128 `fill(0,0,128);`
Crimson
220 20 60 `fill(220,20,60);`
Gold
255 215 0 `fill(255,215,0);`
Deep Pink
255 20 147 `fill(255,20,147);`
Wheat
245 222 179 `fill(245,222,179);`
Steel Blue
119 196 222 `fill(119,196,222);`
Sea Green
46 139 87 `fill(46,139,87);`

# Colors - Exercise

Exercise

Change the color of your face so that it is your favorite color. You can use one of the colors from the table above, or try typing in different numbers until you find a brand new color you like!

# Fill, Stroke, Background - 1

stroke(red, green, blue);

# Fill, Stroke, Background - 2

```stroke(255,0,0);
ellipse(25,30,30,30);
ellipse(75,30,30,30);
rect(20,60,60,20);
```

# Fill, Stroke, Background - 3

```background(255,0,255);
ellipse(25,30,30,30);
ellipse(75,30,30,30);
rect(20,60,60,20);
```

fill(255);

int color = 255;
fill(color);

# Variables - 3

int color = 255;
int myFavoriteColor = 255;
int age = 15;
int shoe_size = 8;

# Variables - 4

```ellipse(25,30,30,30);
ellipse(75,30,30,30);
rect(20,60,60,20);
```

# Variables - 5

```ellipse(25,30,50,50);
ellipse(75,30,50,50);
rect(20,60,60,20);
```

# Variables - 6

```int eyeSize = 50;
ellipse(25,30,eyeSize,eyeSize);
ellipse(75,30,eyeSize,eyeSize);
rect(20,60,60,20);
```

# Variables - 7

```int eyeSize = 10;
ellipse(25,30,eyeSize,eyeSize);
ellipse(75,30,eyeSize,eyeSize);
rect(20,60,60,20);
```

int left = 20;

# Variables - 9

ellipse(25,30,eyeSize,eyeSize);

# Variables - 10

ellipse(left + 5,30,eyeSize,eyeSize);

# Variables - 11

```int eyeSize = 20;
int left = 20;
ellipse(left + 5,30,eyeSize,eyeSize);
ellipse(left + 50,30,eyeSize,eyeSize);
rect(left,60,60,20);
```

# Variables - 12

```int eyeSize = 50;
int left = 50;
ellipse(left + 5,30,eyeSize,eyeSize);
ellipse(left + 50,30,eyeSize,eyeSize);
rect(left,60,60,20);
```

# Variables - 13

Exercise

Create a new variable called top, which determines where the top of the face will start. Update each eye and the mouth so their top attribute uses a calculation based on the top variable.