Student Instructions

Rectangle Size

These rect blocks have two more parameters that you can use to control the size. Notice that the noStroke() block turns off the stroke (border) for shapes.

Do This

• Look at the code and try to figure out how the last two inputs in rect work.
• Change the numbers in the second rect to make red rectangle longer than the blue one.

Student Instructions

Do This

• Write code that makes an orange ellipse behind the green one.
• Don't worry about the exact size as long as the green ellipse is entirely inside the orange one.

Student Instructions

Background

Sometimes you'll want to fill the entire screen with a color. For that, you can use background. It covers everything on the screen with the color you choose.

Do This

• Run the code to see background work.
• Change the background from yellow to orange.

Challenge: There is a purple square that is covered up by the background. Can you change the order of the code so you can see both the purple and blue squares?

Student Instructions

Background

background() will draw on top of everything already in your drawing, so it's important to think about the order of your code.

Do This

• Use background() to make a "black" background behind the green circle.

Student Instructions

Debug - Using 4 Parameters

This program uses the four parameter version of rect() and ellipse() to draw a simple scene.

Do This

• Debug this program and correct the error so that the grass extends across the entire bottom.
• Hint: You only have to change one number. Which parameter makes your rectangle (the grass) wider?

Student Instructions

Debug - Using 4 Parameters

Now that the grass is working, let's add a cloud to the sky. Unfortunately, it looks a little funny right now.

Do This

• Debug this program to make the cloud wider than it is tall, like in the image.
• Hint: You'll need to change two parameters. Which ones set your cloud's width and height?

Student Instructions

Random Numbers

randomNumber() chooses a random number between a minimum and maximum value. You can use this code instead of writing in the specific number. If you make your drawings with random numbers it will look a little bit different every time you run your program.

Do This

• Run the program several times to see how it works.
• Change the numbers inside randomNumber and run the code again a few times to see what changes.

Student Instructions

Random Numbers

Here's the same sun from last time. Right now only the x-coordinate is random, but you can make the y-coordinate random, too.

Do This

• Use randomNumber() for the ellipse's Y parameter so the circle is drawn in a random Y position, too.
• As long as your circle is appearing at random X and Y positions, you can move on.

Student Instructions

Rainbow Snake

This program draws a very rare breed of rainbow snake. To make the snake draw differently every time you'll need to use random numbers.

Do This

• Run the program several times to see how the starter code works.
• Add at least three new different colored circles to your rainbow snake.
• Use randomNumber() to make the rest of the snake's body move up and down like the first three.

Challenge: Can you make size of some of the circles random, too?

Student Instructions

Free Play

Use what you've learned to create whatever you like. When you're finished, you can click to send your creation to a friend, or to send it to your Projects Gallery.