version 53
User
defined
buttons
GrafX
Use the button size button to toggle between smartphone finger size and regular computer size.
Background Stroke Buttons
| AliceBlue | AntiqueWhite | Aqua | |||
| AquaMarine | Azure | Beige | |||
| Bisque | Black | BlanchedAlmond | |||
| Blue | BlueViolet | Brown | |||
| BurlyWood | CadetBlue | Chartreuse | |||
| Chocolate | Coral | CornflowerBlue | |||
| Cornsilk | Crimson | Cyan | |||
| DarkBlue | DarkCyan | DarkGoldenRod | |||
| DarkGray | DarkGreen | DarkKhaki | |||
| DarkMagenta | DarkOliveGreen | DarkOrange | |||
| DarkOrchid | DarkRed | DarkSalmon | |||
| DarkSeaGreen | DarkSlateBlue | DarkSlateGray | |||
| DarkTurquoise | DarkViolet | DeepPink | |||
| DeepSkyBlue | DimGray | DodgerBlue | |||
| FireBrick | FloralWhite | ForestGreen | |||
| Fuchsia | Gainsboro | GhostWhite | |||
| Gold | GoldenRod | Gray | |||
| Green | GreenYellow | HoneyDew | |||
| HotPink | IndianRed | Indigo | |||
| Ivory | Khaki | Lavender | |||
| LavenderBlush | LawnGreen | LemonChiffon | |||
| LightBlue | LightCoral | LightCyan | |||
| LightGoldenRodYellow | LightGray | LightGreen | |||
| LightPink | LightSalmon | LightSeaGreen | |||
| LightSkyBlue | LightSlateGray | LightSteelBlue | |||
| LightYellow | Lime | LimeGreen | |||
| Linen | Magenta | Maroon | |||
| MediumAquaMarine | MediumBlue | MediumOrchid | |||
| MediumPurple | MediumSeaGreen | MediumSlateBlue | |||
| MediumSpringGreen | MediumTurquoise | MediumVioletRed | |||
| MidnightBlue | MintCream | MistyRose | |||
| Moccasin | NavajoWhite | Navy | |||
| OldLace | Olive | OliveDrab | |||
| Orange | OrangeRed | Orchid | |||
| PaleGoldenRod | PaleGreen | PaleTurquoise | |||
| PaleVioletRed | PapayaWhip | PeachPuff | |||
| Peru | Pink | Plum | |||
| PowderBlue | Purple | Red | |||
| RosyBrown | RoyalBlue | SaddleBrown | |||
| Salmon | SandyBrown | SeaGreen | |||
| SeaShell | Sienna | Silver | |||
| SkyBlue | SlateBlue | SlateGray | |||
| Snow | SpringGreen | SteelBlue | |||
| Tan | Teal | Thistle | |||
| Tomato | Turquoise | Violet | |||
| Wheat | White | WhiteSmoke | |||
| Yellow | YellowGreen | ||||
The goal of this project is to help your childen learn computer programming.
We have already written the software. We need your support to add the graphics and design needed to make this project child-friendly and child-accessible.
STEM (Science, technology, Engineering, and Mathematics) are critical skills for success in the future job market.
Even the U.S. Navy is promoting the importance of STEM (“You don’t want to get into a career where there’s no openings.” “Answering the call of today’s Navy and Marine Corps by capturing the imagination of today's young people, creating opportunities for them to explore their passion and discover new interests where they can excell.”).
The good paying jobs of the future will require skill and ability at mathematics and computer technology.
Children who don’t learn these valuable skills will be stuck in poor paying jobs or even struggle to find any job at all.
In the 1970s, the world famous Massachusetts Institute of Technology (M.I.T.) came up with turtle graphics. Turtle graphics was proven in classrooms worldwide to be a highly effective method for teaching children the basic concepts of computer programming and mathematics.
Turtle graphics even proved useful for adults, helping upper division and graduate students at M.I.T. visualize and learn advanced mathematical concepts.
We have updated this time-proven technology and brought it to the web-browser, where children from families of any income level can experiment and learn from almost any modern device (smart phones, tablets, computers) at home, at school, and even at public libraries.
Help us help your children have a promising future.
Self-contained educational software. This is a self-contained educational program that can be used for free on a wide variety of machines to teach computer programming and mathematics. While students can use this program directly from the website (on almost any modern computing device), schools, teachers, parents, and students can download the free source code and modify it freely under the M.I.T. license. Because the instructions are in ordinary HTML, schools and teachers can easily modify or replace the instructional materials with their own course materials while keeping the full working software.
Free open source educational and fun software. Classic and modern programming tools moved into the web browser. You can run this free open source software on almost any smart phone (iOS, Android, Blackberry, or Windows Mobile), almost any tablet (iOS, Android, or Windows), and almost any laptop or desktop computer (Windows, Macintosh, Linux, BSD, Solaris, etc.).
Six step educational course. The starting steps of turtle graphics use time-tested educational methods developed by the Massachusetts Institute of Technology (M.I.T.). Turtle graphics were originally developed for teaching elementary school students, but have since been used for all grades, up to and including college students. The middle part of the starting steps covers the basics of mathematics and computer programming. This is not a detailed and complete course designed for professional programmers, but just enough of the basics that students of all ages can be successful. The starting steps conclude with an opportunity to build a real working computer game. Having a fun goal helps engage students, especially younger students. The classic game Breakout is used as an example because although it is a very simple game from the early days of computing, it does include most of the major features found throughout the gaming industry.
Use buttons to learn turtle graphics. The classic, time-tested M.I.T. system for teaching children and college students the principles of mathematics and computer prorgamming.
Automate your drawings. Learn how to build sequences of steps that will make the computer draw complicated pictures for you.
Build your own calculator and learn about stacks. Learn about RPN (Reverse Polish Notation) and computer stacks. Use this knowledge to make your own personal customized calculator.
Learn how to program computers. Learn the basics of programming and data structures so that you can build your own tech.
Learn how to build your own version of the classic “Breakout” game. Step by step build this classic game by using the knowledge you learned in the previous steps.
Build your own games. Now have fun and let your imagination go wild and build computer games for yourself and friends.
Goal: Your goal is to draw a picture or pictures using Turtle GrafX. It takes a little getting used to, but once you figure out how to plan your steps, you will be using the exact smae kind of reasoning that is used for building computer programming algorithms.
Most children enjoy experimenting and finding out on their own how to use the Turtle to draw pictures. You won’t ruin anything, although you might accidentally erase one of your pictures.
If you need instructions, step-by-step instructions follow.
Push the start button to get started:
then scroll up and draw
If you are using a mobile device, you may want to click on the large button labelled “button size”. This will make all of the buttons finger sized.
The Massachusetts Institute of Technology (M.I.T.) invented turtle graphics as a method to teach mathematical thought and computer programming to children.
Turtle graphics remains valid as a quick and easy method to see how a computer responds to a series of instructions one step at a time.
Introduction tour: Learn how to use turtle graphics.
Click on the button labelled “start”. This stops the opening animation and places an old-school turtle in the center of the graphics area.
If you are feeling adventurous, you can try clicking on the buttons in the “TurtleGrafX” area and see what happens. Or you can follow the step by step instructions explaining what each button does.
Click once on the button labelled “forward”. You will see the turtle move forward and leave behind a short red line.
Click once on the button labelled “right”. You will see the turtle swing to the right (without drawing any new lines).
Click once on the button labelled “forward”. You will see the turtle move forward and leave behind a short red line.
Repeat the above two steps (click “right” then click “forward”) and you will end up with a small red square.
Click once on the button labelled “left”. The turtle will now swing to the left.
Click on the button labelled “color chart”. This will cause a large color chart to appear (you can click again on the “color chart” button to make it disappear and reappear). Click on the second color in the second row (yellow). If yo0u are feeling adventurous, you may pick any color you like. Dark colors and bright colors will work better. You may be very disappointed if you choose a white or very light color.
[OPTIONAL] If you want to type your commands, click on the button labelled “drawing” and look at the section labelled “drawing inputs” and find the box labelled “stroke color” (top left). You will see a strange looking value of “#ff0000”. Type in “yellow”.
Now click on the “forward” button and you will see that the turtle leaves behind a yellow line. If you picked a different color, the line will match the color you picked.
Change the “stroke color” to “green” (the third color in second row) and “back” button and the turtle leaves behind a green line. But you can’t see the line because the turtle is covering it up. You may pick any color you want.
Click on the “hideturtle” button and the turtle will disappear, revealing the green line (or whatever color you picked).
Click on the “back” button again and the green line will get longer, even though you can’t see the turtle.
Click on the “showturtle” button to bring the turtle back to the screen.
It is completely up to you whether you want to draw with the turtle visible or invisible. DIfferent people prefer different methods. If you draw with the turtle invisible and lose track of where you are drawing, you can briefly make the turtle visible again.
Click on the “clearscreen” button and the previous drawing will be erased and the turtle will be centered in the drawing area. If the turtle was visible, it will remain visible. If the turtle was invisible, it will remain invisible.
Now you are going to make a dotted line. Feel free to pick any new color you like.
Click on the “right” button so that you have plenty of room for your line.
Next click on the “penup” button and then click on the “forward” button twice. The turtle (whether visible or not) will move forward two steps.
Now click on the “pendown” button and then click twice on the “forward” button. The turtle (visble or not) will start drawing again.
Next click on the “penup” button and then click on the “forward” button twice. Then click on the “pendown” button and then click on the “forward” button twice. Repeat. You should end up with a dotted line.
If you experiment a little, you will find that repeating “penup” over and over again just makes sure that the pen is up. The “penup”, “pendown”, “hideturtle”, “showturtle” buttons don’t change anything if you keep pressing the same button over and over again. So, it is always safe to press those buttons again if you forgot how you have them set.
You can click on the “home” button to make your turtle (visible or not) jump back to the center of the drawing area. No line will drawn from the old location to the center. You can use this method to quickly get back to the center without erasing your picture.
Let’s return briefly to the “stroke color”. You can change the color you are drawing at any time. Just click on the color you want from the color chart near the Turtle GrafX buttons. If you are color blind, use the top row (black, grays, and white) and whatever you draw will look the same to you and your classmates.
There are 140 officially recognized color names. You can type in any of the following color names (it does not matter if you use upper or lower case letters).
| color name | color | hex |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| AquaMarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| DarkOrange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray | #696969 | |
| DodgerBlue | #1E90FF | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGray | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370DB | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #DB7093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |
If you try using white to erase previous lines, you may (depending on the browser you use) find that faint edges of the old color are left behind. Try to get your drawing right without having to erase.
If you want to record your drawing as you create it, press the “record“ button. Every step you use for making your picture will be recorded. When you are done, press the “stop“ button (the same button, renamed). You can copy and paste the resulting text to replay your drawing, turn in assignments, and share with friends.
End of introduction tour.
Assignment: Now that you have a feel for how turtle graphics works, try to create your own picture.
This assignment will require planning, because you will need to figure out the right steps to maneuver the turtle for you artistic vision. This is the exact kind of thinking that you will need to program computers and make your own game.
Once you have planned out how to draw your picture, you can share your list of steps with your classmates and they can exactly copy your artwork.
You will make mistakes as you learn how to tell the computer how to draw. Be patient. Relax. Accept the mistakes and you will be able to draw a great picture.
Optional advanced techniques: You may want to try out some additional optional techniques. These are not required and may be beyond the ability of younger children, but if you want to use any of these to improve your drawing, feel free to experiment.
You may have noticed that there are several buttons above the color chart and that “Stroke” is currently selected. “Stroke” is the name for the line the turtle draws. It is also the name for the outline on more advanced shapes.
One of the other choices is “Background”. Try clicking on “Background” and then select any color of your choice (other than white). You will see the entire background change to match the color you just clicked on. The “Background” always starts as white, but you can set it to any color you want.
Coming up: You may have noticed that turtle graphics is somewhat slow and clumsy. Next you will learn how to use the “drawing inputs” and the “drawing buttons” to create pictures using some basic shapes.
Distributed by Twiddledom.
Copyright © 2014, 2015 Milo
Licensed under the MIT License. You may obtain a copy of the License at
http://opensource.org/licenses/MIT
The MIT License (MIT)
Copyright © 2014, 2015 Milo
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
You can help support this project by donating to the Someone Cares Soup Kitchen and Tutoring Program. They are the primary source of food for the author and programmer of this project.
Someone Cares Soup Kitchen:
has served more than 300 meals a day for more than 28 years.
feeds the hungry for around $1.30 per person!
feeds 58% of the homeless in Orange County.
feeds low income families.
feeds the elderly on limited Social Security.
720 West 19th Street
Costa Mesa, California, USA 92627
Make donations at: http://www.someonecareskitchen.org/pages/help.html. The director of Someone Cares has aksed that you leave a note saying why you donated.
