Home Store Project Ideas Project Guide Ask An Expert Blog Careers Teachers Parents Students

Quick Draw McPaws: Teach A Computer Kitty How to Draw Shapes

Difficulty
Time Required Short (2-5 days)
Prerequisites You should have access to a computer with the Internet and room for the Scratch program. Scratch can be downloaded for either Windows (2000 or later) or Mac (OSX 10.4 or later).
Material Availability Readily available
Cost Very Low (under $20)
Safety No issues

Abstract

Have you ever played a computer game in which a cartoon character, like a dog or a cat, moves or turns when you click on it? Have you ever wondered how characters know how far to move or how far to turn? In this computer science project, you will learn how with a simple (and free) program called Scratch, which will let you write your own computer program that tells a cartoon kitty how to draw shapes.

Objective

To determine how to draw different two-dimensional shapes using the computer language Scratch.

Credits

Kristin Strong, Science Buddies

Cite This Page

MLA Style

Science Buddies Staff. "Quick Draw McPaws: Teach A Computer Kitty How to Draw Shapes" Science Buddies. Science Buddies, 9 Oct. 2014. Web. 23 Oct. 2014 <http://www.sciencebuddies.org/science-fair-projects/project_ideas/CompSci_p035.shtml>

APA Style

Science Buddies Staff. (2014, October 9). Quick Draw McPaws: Teach A Computer Kitty How to Draw Shapes. Retrieved October 23, 2014 from http://www.sciencebuddies.org/science-fair-projects/project_ideas/CompSci_p035.shtml

Share your story with Science Buddies!

I did this project I Did This Project! Please log in and let us know how things went.


Last edit date: 2014-10-09

Introduction

Note: This Science Buddies project idea was written using Scratch version 1.4. A new version, Scratch 2, is now available. You can use an online version of Scratch 2 in your web browser at scratch.mit.edu, or you can download an offline version.

While Scratch 2 offers improvements over Scratch 1.4, the layout and some features have changed slightly. This means that the procedure below will not exactly match the new features of Scratch 2. If you need help using Scratch 2, you should go to the official Scratch help page. If you would like to follow our directions exactly, you can still download Scratch 1.4 here.

What are your favorite things to draw? Pets? Trees? Flowers? Rainbows? One of the tricks that artists use when they plan a new drawing is to break down objects into smaller parts and shapes. So the ears on a cat break down into triangles. Or the beak on a bird breaks down into a cone. Shapes like circles, ovals, squares, triangles, hexagons, octagons, cylinders, and cones are the basic building blocks of any drawing.



Computer Science fair project  In this drawing of a cat you can find many shapes

Figure 1. In this drawing of a cat you can find many shapes, like the triangles in the ears, nose, and rug; the circles in the head and collar; the half-circles in the eyes; the oval in the body; and the rectangle in the rug.



If you look at the simplest two-dimensional (flat) shapes, shown below, you can see that some of them have angles. An angle is where a line makes a sharp turn. You can measure how sharp the turn is by using a tool called a protractor. A protractor has little marks on it, just like a ruler, but instead of measuring inches or centimeters, a protractor measures angles in degrees.



Computer Science fair project These are simple two-dimensional shapes: A circle, square, triangle, hexagon, octagon, and a line.

Figure 2. These are simple two-dimensional shapes: A circle, square, triangle, hexagon, octagon, and a line.





Computer Science fair project Protractor

Figure 3. This is the math tool called a protractor that is used to measure the angles in two-dimensional shapes. The protractor in this example is measuring 35 degrees.



Pretend that you want to teach a friend how to draw a square. You decide to walk the path of a square on the floor so that you can show the friend what she has to do. You can see below that to draw a square, you would start walking at point A, travel to point B, and then turn (or rotate) 90 degrees, so that you can reach point C. Then you turn 90 degrees again to get to point D. Finally, you walk some more until you come back to point A.



Computer Science fair project Drawing of a stick figure walking the perimeter of a square. The 90 degree turns are noted.

Now suppose your friend tells you that she wants to learn how to draw a triangle, so you show her that path, too. To draw a triangle, you start at Point A, travel to Point B, and then have to turn very far—120 degrees—so that you can continue on the path to Point C. Then you have to turn 120 degrees again, so that you can come back to Point A.





Computer Science fair project Drawing of a stick figure walking the perimeter of a triangle. The 120 degree turns are noted.

Now suppose your friend tells you that she wants to learn how to draw a triangle, so you show her that path, too. To draw a triangle, you start at Point A, travel to Point B, and then have to turn very far—120 degrees—so that you can continue on the path to Point C. Then you have to turn 120 degrees again, so that you can come back to Point A.



In this computer science project, you are going to teach a kitty how to draw. The kitty is a cartoon character who is just a beginning artist. She doesn't even know how to draw shapes, like a triangle, yet. You'll help her by writing a simple computer program—a set of instructions for the computer. The computer program will tell her how to move so that she can draw her first shapes and get her start becoming a great artist!

Terms and Concepts

  • Angle
  • Protractor
  • Degree
  • Computer program

Questions

  • What does an artist do first when he or she wants to draw something?
  • What does a protractor help you measure?
  • If you wanted to draw a big shape in the sand or in the snow with your feet, how would you move your body to do it?
  • Why do cartoon characters on a computer need a computer program?

Bibliography

Watch this video to learn about angles:

Visit this interactive website to learn how to use a protractor to measure angles:

These resources will introduce you to Scratch:

Materials and Equipment

Note: This Science Buddies project idea was written using Scratch version 1.4. A new version, Scratch 2, is now available. You can use an online version of Scratch 2 in your web browser at scratch.mit.edu, or you can download an offline version.

While Scratch 2 offers improvements over Scratch 1.4, the layout and some features have changed slightly. This means that the procedure below will not exactly match the new features of Scratch 2. If you need help using Scratch 2, you should go to the official Scratch help page. If you would like to follow our directions exactly, you can still download Scratch 1.4 here.

  • Personal computer with Internet access and the computer program Scratch installed; see the Experimental Procedure for details on installing Scratch for free.
  • Adult helper
  • Protractor
  • Lab notebook

Share your story with Science Buddies!

I did this project I Did This Project! Please log in and let us know how things went.

Experimental Procedure

Note: This Science Buddies project idea was written using Scratch version 1.4. A new version, Scratch 2, is now available. You can use an online version of Scratch 2 in your web browser at scratch.mit.edu, or you can download an offline version.

While Scratch 2 offers improvements over Scratch 1.4, the layout and some features have changed slightly. This means that the procedure below will not exactly match the new features of Scratch 2. If you need help using Scratch 2, you should go to the official Scratch help page. If you would like to follow our directions exactly, you can still download Scratch 1.4 here.

Installing and Getting Started with Scratch

  1. To start this science fair project, you should go to the Scratch download page at scratch.mit.edu/download and have an adult help you follow the instructions there to download and install Scratch for free. If you need help installing it, read the Science Buddies Installing and Getting Started with Scratch page. This short guide will familiarize you with Scratch.
  2. If this is your first time using Scratch or if you need a refresher, read the Science Buddies Scratch User Guide.
  3. When you first start up Scratch, you'll see your artist cat come up on the screen. Meow! It's time to program Kitty so that she can draw shapes.
  4. If you want to change the way Kitty looks before you start, read the Variations section, below the Experimental Procedure, to find out how.

Writing Instructions for the Kitty

  1. The first thing Kitty needs to learn is when to start drawing. It's a little bit like when you run a race and someone says, "1, 2, 3...go!" You need to tell Kitty when to go. Find the symbol with the green flag (think of how green traffic lights mean go) under the Control category, and drag it to the center panel.

    Computer Science fair project Scratch When Clicked element. IMG 6


  2. Now Kitty must erase any previous drawings so that she can start out with a fresh page. It's kind of like getting a fresh sheet of paper with no marks on it. Go to the Pen category and get the Clear element and snap it onto the flag. The Clear element clears the page.

    Computer Science fair project Scratch Clear element. IMG 7


  3. The next thing you need to tell Kitty is where to start drawing her shapes. The center of the screen where Kitty will be drawing has the coordinates x=0 and y=0. This is a good place to start drawing, but if you want to tell her to choose a different spot, feel free to do so, using the instructions below.

    Computer Science fair project Drawing of an x-y coordinate system with the center marked with a green dot, and the far left on the x-axis marked with a red dot. IMG 8


    To tell Kitty to go to the starting point (indicated by the green circle) and start drawing, you need to find the Go To instruction under the Motion category, which looks like this:



    Computer Science fair project Scratch Go To xy element. IMG 9


    Drag this Go To element to the center panel and snap it onto the "Clear" element. Be sure to enter a 0 for x and a 0 for y, if those numbers are not already there and if those are the coordinates at which you want Kitty to start.

  4. It's time to choose a color for Kitty's pen. Go to the Pen category and find the element that says "Set Pen Color to..." and is followed by a colored block (not the one followed by a white space for a number to be typed in). Drag it over to the center panel and snap it on to your "Go To x:__ y:__" element. Click on the color that you want for Kitty's pen.

    Computer Science fair project Scratch Set Pen Color Element. IMG 10


  5. Now Kitty has a pretty pen, but you have to tell her to use it! Go to the Pen category, and find the element called "Pen Down" and snap it to the bottom of your growing chain of computer language commands (called blocks). This will tell Kitty to put her pen down on the page.

    Computer Science fair project Scratch Set Pen Down Element. IMG 11


  6. Now it gets exciting. It's time for Kitty to learn how to draw her first shapes. Remember from the Introduction how you taught your friend to draw a square and a triangle using steps and angles? Go to the Motion category and take a look at the elements that begin with "Move" and "Turn."

    Computer Science fair project Scratch Move Steps element. IMG 12

    Computer Science fair project Scratch Turn Degrees Element. IMG 13


    That's exactly what you did when you walked the path of the square and the triangle—you moved and turned, moved and turned, moved and turned, over and over again until you completed the shape. So you know you're going to need those two elements in your list of instructions.

    • Move the "Move" and "Turn" elements to the center panel and type in some starting values, like 60 steps and 90 degrees, just to get started. You will change these values during your testing.

    But how do you make Kitty do something over and over again? That's where the Control category can help you. Look at the "Repeat" element. Any instructions you put inside the repeat element will be repeated again and again!



    Computer Science fair project Scratch Repeat Element. IMG 14


    • Move the "Repeat" element to the center panel and type in a starting value of 20 (indicating to repeat 20 times). You will change this value during your testing.

    Arrange the "Move," "Turn," and "Repeat" elements in a way that you think will make Kitty draw shapes. Hint: Notice the white space between the "Repeat" element's golden shape—do you think that will help you use this block? You can stuff as many blocks inside there as you want and they will all be repeated the number of times that you have set.

  7. It's not time to test just yet. First, you need to make Kitty put the pen away and move herself out of the way after she is done drawing, so that you can see what shape she has made. Go back to the Pen category and drag over the Pen Up element, which means "Take your pen off the paper, Kitty!"

    Computer Science fair project Scratch Pen Up Element. IMG 15


  8. To get her to move out of the way, you want to move her to a coordinate that is away from her drawing, like the red circle shown in the graph several steps above. Use the "Go To x:__y:__" element in the Motion category again to get her to move out of the way.

    Computer Science fair project Scratch Go To xy element. IMG 16


    Enter -150 for the x-coordinate, and 0 for the y-coordinate. Feel free to choose a different ending location.

  9. Finally, you want Kitty to look at her masterpiece, not up in the sky or down at the ground. Choose the "Point in Direction..." element from the Motion category to get her to look right. Leave the number as is, reading 90 (which means 90 degrees).

    Computer Science fair project Scratch Point Direction element. IMG 17


Testing Your Computer Program

  1. Now that your program is written, you need to test it and adjust it to get Kitty to draw certain shapes. It's time to experiment. To start running the program, just click the green flag above the white screen where you see Kitty.
  2. What happened? Did she draw a shape? What shape is it? Experiment with the values in the "Move," "Turn," and "Repeat" elements to see what shapes you can get her to draw. Create a data table in your lab notebook, like the one below, so that you can remember what different values do in your program. If you need help with your program, read the Science Buddies Troubleshooting a Program in Scratch page.

Scratch Testing Data Table
Number of repeats Number of steps Turn in degrees Shape Kitty drew Comments on the shape, such as its size, or whether it went off the page
20 60 90  
     
     

  1. Get Kitty to draw all the basic shapes, like a line, a triangle, a square, a hexagon, an octagon, and a circle. The circle is an interesting challenge, because there are no angles, so you will have to make very small turns and get a shape that approximates a circle. Once you've completed it, would you say it's a very good approximation? Does it look like a circle to you?
    1. Use a protractor to measure the amount of turn needed to draw each shape. For example, to draw a square, you need to turn 90 degrees. To draw a triangle, you might want to try having Kitty turn 120 degrees. These are values to test (one at a time) in your computer program. If you don't know how to use a protractor, see the link to instructions in the Bibliography.
    2. Can you get Kitty to draw different sizes of shapes, such as a small triangle, a medium-sized triangle, and a big triangle?
    3. Can you make Kitty draw slow and fast?
    4. How does the "Repeat" element affect how long Kitty draws?
    5. How does the "Steps" element affect the size of the shape?
    6. How does the "Turn" element affect the type of shape?

Share your story with Science Buddies!

I did this project I Did This Project! Please log in and let us know how things went.


Variations

  • Would you like to change the way Kitty looks? Click on the Looks category for all sorts of fun things to try.
    • There are two elements called "Change Color Effect By…" and "Set Color Effect to…" Experiment with those to see what happens to Kitty. Can you make Kitty turn pink with one of these blocks?
    • Note: When you are experimenting with how something looks, it is best to add the "Clear Graphics Effects" element near the top of the chain of blocks, so that you can start with a fresh, new look each time you click on the green flag.
    • Once you understand what these blocks do for the word Color, click on the word "Color" in each element and you can see even more exciting things to try, like changing "Fisheye," "Whirl," "Pixelate," "Mosaic," "Brightness," and "Ghost." Experiment again to see what each of those does. Is there one you like best? Is there a block that has the power to turn one kitty into many kittens?
    • Another way to change Kitty's look is with the "Switch to Costume" element. You first have to go to the center panel and click on the Costume tab. Then, either draw something yourself with the tools there, or import (bring in) something that you want to change Kitty into, like a puppy or a fish from one of the folders that you see, like the Animals or Fantasy folders.
    • And, just for fun, you can always make Kitty say something at the end of her drawing, like "Ta Da!" or "Where did Kitty go?" (if she has changed into a different animal). The "Say" elements allow you to have Kitty say whatever you wish.
  • If you can teach Kitty how to draw equilateral shapes (shapes that have sides that are the same length), can you teach her how to draw shapes with sides of different lengths, like a rectangle?
  • When you were testing your program, did Kitty draw some unusual shapes that look like flowers? Or beautiful lace? Can you make Kitty color in the flowers by changing the pen size? Can you make Kitty draw a whole flower garden? Make sure she draws herself some catnip!

Share your story with Science Buddies!

I did this project I Did This Project! Please log in and let us know how things went.

Ask an Expert

The Ask an Expert Forum is intended to be a place where students can go to find answers to science questions that they have been unable to find using other resources. If you have specific questions about your science fair project or science fair, our team of volunteer scientists can help. Our Experts won't do the work for you, but they will make suggestions, offer guidance, and help you troubleshoot.

Ask an Expert

Related Links

If you like this project, you might enjoy exploring these related careers:

Computer programmer typing on a keyboard

Computer Programmer

Computers are essential tools in the modern world, handling everything from traffic control, car welding, movie animation, shipping, aircraft design, and social networking to book publishing, business management, music mixing, health care, agriculture, and online shopping. Computer programmers are the people who write the instructions that tell computers what to do. Read more
Mathematician at work

Mathematician

Mathematicians are part of an ancient tradition of searching for patterns, conjecturing, and figuring out truths based on rigorous deduction. Some mathematicians focus on purely theoretical problems, with no obvious or immediate applications, except to advance our understanding of mathematics, while others focus on applied mathematics, where they try to solve problems in economics, business, science, physics, or engineering. Read more

Looking for more science fun?

Try one of our science activities for quick, anytime science explorations. The perfect thing to liven up a rainy day, school vacation, or moment of boredom.

Find an Activity