PhrogramTutorial KPL

A guide for the absolute beginner
Lets Program With Phrogram
By Jon Schwartz Edited by Pat Phillips
Document updated January 2007 website: www.phrogram.com
Lets Program With Phrogram

Table of Contents
Preface: How Should I Use This Tutorial? ..3 Topic 1: What is Programming? .5 Topic 2: What about Computer Graphics?! 20 Topic 3: Game Graphics Using Sprites ...35
Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company
Page 2 of 46 www.phrogram.com
Preface: How Should I Use This Tutorial?

This tutorial is designed for the beginning programmer. There are 3 topics and each topic is divided into 3 sections. The Lily Pad Basics will give you the information you need to understand each topic at a beginners level and provide enough guidance to complete the programming activities in the Leap In section. This section can be used alone to learn computer programming concepts and is not dependent upon having access to a computer or Phrogram.
The Leap In sections will give you specific instructions for experimenting with Phrogram using the information learned in the Lily Pad Basics.
The Dive Deep sections offer more in-depth details on the topic and will let you stretch your skills to a higher level. Sometimes this section is only more information to read and sometimes it is another opportunity to experiment with Phrogram.
Big Pond Tips
Throughout the Lets Program with Phrogram tutorial you will find Big Pond Tips. These tips alert you to important ideas that can be especially confusing to someone just learning programming.
Idea Round-up: You will find this feature at the end of a description of important concepts. It is a summary of the key ideas that provide a quick review of youve learned. If you are truly a beginner, and have never done any programming, the best way to use this tutorial is to read and study this tutorial topic by topic, making sure you understand each topic before moving on to the next. You can study the tutorial without using Phrogram or your computer by focusing on the Lily Pad Basics sections only. If you have access to a computer and Phrogram, the Leap In sections will reinforce what you learn in the Lily Pad Basics. The Dive Deep sections will expand your knowledge and sharpen you skills. Computer programming involves learning to think in ways people do not normally think. Computers require us to be much more logical, orderly and precise than we normally need to be.
Learning to think this way may be difficult at first, but you can do it! And once you get the hang of it, it really does become fairly easy and lots of fun. Besides experimenting, one of the best ways to learn this new way of thinking is to ask questions of someone who already understands computer programming. Can you think of anyone who could help you as you study programming with this Phrogram tutorial? Another fun way to learn programming is to work with a partner. Everyone has unique strengths and teamwork helps everyone learn faster and easier.
Topic 1: What is Programming?
Lily Pad Basics
Computer programming is simply giving instructions to a computer. Computers are very good at following instructions. They do exactly what we tell them to do. But they have no imagination! So when we write programs to give computers instructions, we must tell them very precisely what we want them to do. Why Should I Learn to Program With Phrogram? Different computer languages have different ways of telling a computer what to do. The Phrogram computer language offers several important advantages for you as a beginning programmer: Phrogram is designed to make it as easy as possible for a beginner to learn. Phrogram is designed to make it as fun as possible for you to learn. Phrogram, unlike other learning languages, is also carefully designed to make it as similar as possible to the languages that are used today by professional programmers.
Beginning programming with Phrogram is the easiest way to learn real programming and many of you who want to program fun things such as animations and games, will find that Phrogram does everything you need it to do. When you want to graduate to more advanced programming, youll find that Phrogram has prepared you well to move on to languages like C#, VB, or Java. Phrogram is very similar to these other languages and their programming environments, except Phrogram is much easier and much more fun!
OK, Show Me a Program! When programmers create programs they write instructions for a computer to follow in a specific computer language. Below are the instructions written in Phrogram to tell the computer to display the words Hello World! on the monitor.
Well, thats it! When you run this Phrogram program, this is what you will see:
Lets Analyze this Program The green line numbers you see to the left of each line of code are not actually used by Phrogram they are just there for your own information as you read and work with your Phrogram programs. Older languages, such as GWBASIC, actually used line numbers to process code in the order desired by the programmer. Phrogram does not do this. Phrogram A Big Pond Tip programs are normally processed one instruction at a time, The line numbers to the left of the starting at the top and moving downward through the code in Phrogram have no affect program. There are exceptions to this which we will save on the program. They are only for a later tutorial. there to help the programmer keep track of lines of code. All computer languages have rules which the programmer must follow so that the computer will understand the programmers instructions. These rules are called syntax rules. In the same way that English, or any other language, has grammar rules and usage rules which must be followed so that other people will understand us, computer languages have syntax rules. In language classes you learn many grammar rules for changing verbs to past and present tense, and creating plural and singular forms of nouns, so this is not a new concept.
One important syntax rule for programming in Phrogram is that each line of Phrogram code needs to be on a separate line. For instance, the Phrogram program below has the same words as the one above, except it is all on the same line. It will not work.
In addition to learning grammar and usage rules, you learn the definitions of new words everyday. Computer languages also speak a specific vocabulary. For instance, we dont say Goodbye when we pick up the phone and we dont say Hello when we hang up the phone! This is a silly example, but its very relevant, since Phrogram also requires specific words for beginning and ending a program, as well as for every other action it performs. All Phrogram programs must begin with a line like Program HelloWorld as shown in line 1. And all Phrogram programs must end with End Program as shown in line 5.
HelloWorld is the name the programmer gave to this program. Notice that it is just one word with no spaces. That is one of the syntax rules that must be followed. You can name your program anything you want, but its best to name it something which describes what the program is doing. In this case HelloWorld is the name I chose because that is what it displays. You could just as easily use a different name, like Program MyFirstProgram. Idea Round-up: Every Phrogram program begins with Program AName and ends with End Program. Dont forget that program names must be written as one word with no spaces. The good news is that a computers vocabulary is not very long and you can do powerful things with just a few key words. Lets look at a few more key words used in Phrogram: Method Main() is the beginning point for every action in a Phrogram program. All Phrogram programs start by processing the first instruction below the line Method Main(). Method Main() is a bit of an arbitrary way to define where the program action begins but it is, in fact, based on the way all modern programming languages work. End Method is the key word or programming statement that tells the computer to stop processing the commands within this method. In our sample on line 5, End Method declares the end of Method Main(). Notice the indentation of lines 2 and 4. They line up like bookends, holding between them line 3. Ill bet you noticed the indentation of lines 1 and 5 and immediately thought, Ah-ha! End Program must be the computer instruction that pairs with Program HelloWorld. You are correct! See how easy this is! Observing the indentations is another way to locate the beginning and ending of a method as well as other segments of code which you will learn about later.
Print("Hello World!")is the only line of our program left to analyze. Without any help from me, Im sure you can figure out what that line does; it display Hello World! on the monitor. Idea Round-up: Method Main() is where the action of a Phrogram program starts. The only line in this first program that displays anything to the user is Print("Hello World!").
This was a very detailed explanation of a program that tells the computer to Print("Hello World!"). So, lets summarize: Lines 1 and 5 tell the computer where the beginning and the ending of the program is located. Lines 2 and 4 tell the computer where the beginning and ending of Method Main()is located. Remember this is where the action begins. And line 3 tells the computer to display the words Hello World! on the monitor.
Look again at the window which appears when you run this program. Notice that inside the window, the computer has done only one thing. The computer has displayed the words Hello World!
The Phrogram program window adds the word Stopped to the title bar when the program has finished running. To close that Phrogram program window, you click the orange button on the toolbar with the Eject icon:
Leap In
This is your chance to experiment with Phrogram, but you can skip this section if you do not have access to a computer and Phrogram. If you cannot experiment at this time you might want to read this section in order to more fully understand the Phrogram programming environment. This section assumes Phrogram has already been downloaded and is installed on your computer by following the directions on the Phrogram Website (www.phrogram.com). Find Phrogram by locating the short-cut icon on your computer desktop or from the list of programs available from the Start menu in Windows. To open Phrogram, double click the short-cut icon or select Phrogram program found with in the Phrogram Company folders among the list of programs available through the Start menu. When you launch Phrogram, it will look like this:
Lets take a look at a few important parts of this window. The large square section of this window with the words Untitled.kpl* is called the Code Editor. Phrogram is showing a new program file called Untitled1.kpl in the Code Editor pane. This is the section where your programs will be written. The program you see there now does nothing yet, but you likely recognize a few lines such as Program MyNewProgram, Method Main(), and the End statements. Notice the line numbers on the left hand side of the window. You will remember that these are for your use as you work with Phrogram and are not parts of the actual program written. The green lines you see in the Code Editor are called comments and provide information to the reader of the program, but they do not actually contain Phrogram instructions to the computer. The computer totally ignores these comments when it runs the program. Comments usually start with two forward-leaning slash marks: // You will see many comments in the Phrogram example programs, and over time will learn to use comments yourself as you write your own Phrogram programs. Comments help others to understand what the Phrogram program is doing and can even help you remember what you were thinking when you wrote a program long ago! Phrograms Code Editor has many of the same features as your word processor or email program. Take a moment to examine the Menus and the Toolbar at the top of the window. If you hover the mouse pointer over the Toolbar icons, you will see tooltips identifying them. On the right side of the Phrogram window you see a pane titled Files. This is called the Files Explorer. There are many file folders here containing programs already written which we will explore in later sections of this tutorial. You will also see your own programs listed at the bottom of the list after you create and save them. The pane at the bottom of the window titled Errors is a message area for the programmer. If mistakes are made in a program, the computer will use this area to try its best to explain what is wrong so that you can fix them.
A Big Pond Tip At the bottom of the Phrogram window you will see several tabs. Clicking on them opens various panes. Do not concern yourself with them at this time. You will use them when you do more advanced programming.
Lets focus on creating the HelloWorld program which you studied in the Lily Pad Basics of this topic section. Lets start by clearing out the code which is shown in the program file Untitled1.kpl and displayed in the Code Editor pane. To do this, click the Edit Menu then the Select All item on that menu. You will see that all code in the code editor is now highlighted as shown below. With all of the code highlighted this way, you can either press the Delete key on your keyboard, or select the Edit menus Cut command to clear the existing code from Code Editor.
Idea Round-up: There are several panes in the Phrogram window. You will use the Code Editor, the Files Explorer, and the Menus and Toolbars for your work in this tutorial.
Once the existing code is deleted, type in your first Phrogram program example, as shown here:
Remember that computers are very precise so please try to type the Phrogram program exactly as shown above. It will probably not work correctly if you type it differently. You can use the TAB key to indent your Phrogram code as shown. Hit ENTER to go to the next line. You can also hit ENTER again to create a blank line. Adding blank lines to a long A Big Pond Tip program makes it easier to read your code and to locate program lines you are looking for. Using indentation Producing readable code is a very important skill for a good and blank lines is not required, but it will help you and computer programmer. others to read and understand your Phrogram program Use indentations and blank lines more easily. with plenty of comments to increase the readability of your work.
After you have entered the program into the Code Editor, click on the green arrow icon or press the F5 key to run your Phrogram program. But before Phrogram actually displays the results of your program, you will be asked to save it. A Save your new program dialog box appears with the name you gave your program in the File name field, and the list of all of the file folders you saw in the Files Explorer pane of the Phrogram window. For right now, just accept the defaults and click Save. Later you will learn to create your own folders for organizing your work.
Now, finally, if your Phrogram code was entered correctly, you should see a window pop up that looks like this, except its a bit larger: A Big Pond Tip The programs listed in the File Explorer pane of Phrogram are actually stored in a folder named My Phrogram Files which is located in your My Documents folder. You can create additional folders in this location to store and organize your Phrogram files.
Thats it! You are now a computer programmer! Way to go! Woohoo! Okay, okay, its a very small and simple program, but still you typed that in and made it run! on the toolbar. To close this Phrogram program display window click the Eject icon: After you have saved your Phrogram program and closed the program display window, you will see two places that prove that you have properly saved your work. It is a good idea to periodically save your program as you are making changes. Just select Save under the File menu and it will automatically update your file.
Now that your program is saved to disk, you can re-open it any time by double-clicking on it in the Files Explorer pane on the right side of Phrogram window. When you re-open your Phrogram program later, you will likely see it appear as shown below dont panic, all your code is still there!
Click on the little + icon shown on line 3 and all the code within Method Main will expand so you can see it. Click the icon, and the code will collapse again. This is not a very useful feature for such a simple program, but when you write larger programs, you will see that hiding and showing code this way can be very convenient.
A Big Pond Tip If you are trying to run one of your programs but you can not click on green arrow because it is the light gray it means you did not close the running of the last Phrogram program. Minimize the Phrogram window and any other windows that are open until you see the program that is still running. Close it by clicking on the
Errors are inevitable!
Phrogram will let you know if it does not understand the code youve typed in. In the Code Editor change the word Print to Prent. Phrogram puts a squiggly and you will be able eject icon red line underneath the code it does not understand. to run your next program. Place the mouse over the squiggly line and youll see a popup, which says Error: Method not found. As I mentioned before, computers are very precise, and they require precise instructions using the vocabulary they know. The computer knows what to do if you say Print but it doesnt know what to do if you say Prent!
If you encounter an error when working on any of these examples in this tutorial, just carefully compare the code you typed against the code shown in the tutorial. When you find the difference in your code and change it to match the example, the squiggly red line will disappear and you will be able to run the program. All computer programmers sometimes have errors in their code, so dont feel bad about it when you do. No one is perfect! When you notice an error, just stay calm, be patient, and examine your code carefully a calm approach, patience, and careful reading are the keys to finding and fixing errors. wrong and fix it.
A Big Pond Tip The accidental errors made in programs are called bugs. You will likely produce many bugs as a programmer so learn to take it in stride and develop good debugging skills in order to find and fix the problems.
Dive Deep
Here is your chance to learn more about computer programming. You can skip this section if you want to go onto the next topic. There are many features for you to explore in Phrogram. One of the best ways to do this is to experiment with the Menu choices at the top of the Phrogram window. While some of the choices are unique to programming, you will recognize many of them from your work with other Windows applications. You likely know many of the short-cut key combinations for doing routine procedures such as Control-X for cutting selected text, or Control Z for undoing changes made to the document. You can learn many more through experimenting or by reading the Phrogram Users Guide that is accessible under the Help Menu .
The Phrogram Toolbar

The Phrogram Toolbar is the row of icons located just below the Menu options at the top of the Phrogram Window. It normally looks like this: When View Advanced Options is not checked:
When View Advanced Options is checked:
To make the Advanced Options visible, select Advanced Options under the View Menu item. It is well worth your time to become familiar with these options. They will enable you to become a more efficient programmersomeone called a power-user. Phrograms toolbar is Windows-standard, including support for mouse-over tooltips, which match the functions in the table below. Note that Toolbar buttons will enable or disable as appropriate. For instance, if no Phrogram program files are open in the Code Editor, nearly all the Toolbar buttons are grayed-out and disabled since they are only relevant to a selected Phrogram program file. The Toolbar items below marked with a ** are not shown nor accessible on the Toolbar unless the View Advanced Options setting is selected on the View menu. Function New Program Icon Explanation Creates a new template Phrogram program, which is properly structured, compiles and runs though it does not do anything functional until further code is provided. This function is also available through the Ctrl+N hotkey. Launches a dialog allowing the user to locate and open a Phrogram program from a disk. This function is also available through the Ctrl+O hotkey. Saves any code changes that have been made to the
Open Program
Save Program
Save All
Print Program
Cut
Copy
Paste
Find
Replace
Undo
Redo
Run the program
Step In
currently selected Phrogram program. This function is also available through the Ctrl+S hotkey. Saves any code changes that have been made to all open Phrogram program files. This function is also available through the Ctrl+Shift+S hotkey. Launches a Windows-standard Print dialog allowing you to print the currently selected Phrogram program. This function is also available through the Ctrl+P hotkey. Cuts the currently selected text from the currently selected Phrogram program file. Cut text is placed on the Windows Clipboard. This function is also available through the Ctrl+X hotkey. Copies the currently selected text from the currently selected Phrogram program file without deleting it. Copied text is placed on the Windows Clipboard. This function is also available through the Ctrl+C hotkey. Pastes the Windows Clipboard contents into the currently selected Phrogram program file at the cursor location. Pasted text is still available on the Windows Clipboard. This function is also available through the Ctrl+V hotkey. This function displays the Find dialog to locate a string of text in the document. This function is also available through the Ctrl+F hotkey. This function displays the Replace dialog to replace a string of text with other text. This function is also available through the Ctrl+H hotkey. Reverts the last change made to the currently selected Phrogram program file. This button is grayed if no changes are available to Undo, blue if there changes are possible. This command can be repeated multiple times, each time reverting to the previous change, all the way back to when the file was opened in Phrogram. This function is also available through the Ctrl+Z hotkey. Reverts the last Undo made in the currently selected Phrogram program file. This command can be repeated multiple times, each time reversing the previous Undo. This button is grayed if no changes are available to Redo, blue if there are changes are possible. This fastest way to invoke this function is by pressing the F5 key on the keyboard. This function causes Phrogram to check the currently select program file for errors, and if no errors are found, Phrogram launches the program. The Messages pane will display the results of the compilation. If the Messages pane is not displayed when this function is invoked, it will be displayed. This command is only enabled when Phrogram is paused at a debug breakpoint. If the current Phrogram
Step Over
Step Out
Comment selected code**
Uncomment selected code**
Decrease indent**
Increase indent**
Toggle bookmark**
Go to next bookmark**
instruction is a Method or Function and this command is selected, the Phrogram debugger will run into that Method or Function and stop, with the first instruction in it the new current Phrogram instruction. If the current Phrogram instruction is not a Method or Function, this command will cause the current instruction to be executed, and will advance the debugger to the next instruction. This command is only enabled when Phrogram is paused at a debug breakpoint. If the current Phrogram instruction is a Method or Function and this command is selected, the Phrogram debugger will execute that Method or Function and then stop, with the next instruction as the new current Phrogram instruction. If the current Phrogram instruction is not a Method or Function, this command will cause the current instruction to be executed, and will advance the debugger to the next instruction. This command is only enabled when Phrogram is paused at a debug breakpoint. When this command is selected, the Phrogram debugger will run the remainder of the current Method or Function, and the debugger will move out of that current Method or Function and will stop on the next instruction after the call to it. This function causes one or more selected lines of Phrogram code to be commented out so that they will no longer be part of the compiled and running Phrogram program. This is done by placing the // comment indicator at the beginning of each line. This function causes one or more selected lines of Phrogram code to be uncommented, so that it will again be part of the compiled and running Phrogram code for the program if the // comment indicator is located at the beginning of the line of code. This function has no effect if the line of code is not already commented out, or if the comment indicator is not at the beginning of the line of code. This function causes one or more selected lines of Phrogram code to be shifted to the left by one indented tab stop. If the code on the selected line already begins at the left margin, it will not be shifted. This function causes one or more selected lines of Phrogram code to be shifted to the right by one indented tab stop. Toggles a bookmark on or off on of the currently selected line of Phrogram code. Bookmarks can be used to quickly return to a particular place in your Phrogram program. This function moves the cursor within the Phrogram program to the next line of code which is bookmarked.
Go to previous bookmark**
Clear all bookmarks**
This function will wrap to the first bookmark from the top of the Phrogram program, if there is a bookmark above the current cursor but not one below. This function moves the cursor within the Phrogram program to the first previous line of code which is bookmarked. This function will wrap to the first bookmark from the bottom of the Phrogram program, if there is a bookmark below the current cursor but not one above. This function clears all bookmarks in the currently selected Phrogram program file.
Time to Experiment
Now that you know your way around Phrogram, its time to experiment on your own. Try these activities and share the results with your friends. 1. Create a program to produce a chart similar to the one below to share a list of your favorite emoticonsthose fun little faces made from keyboard characters to express emotions or ideas. :-) Smile :-| Disappointed :-@ Angry :-# Dont tell anyone +o( Sick |-) Sleepy Add more of your own or search the Web for some new favorites. Share with your friends. 2. Have you ever seen graphics created by using just rows of symbols, letters, and numbers? Heres one to reproduce with a Phrogram program. Hint: You might want to draw it out on graph paper before you begin!
......... , . - . - , _ , ....... ......... ) ` - . .> ' `( ....... ........ / . . . .`\ . . \ ........ ........ |. . . . . |. . .| ....... ......... \ . . . ./ . ./ ......... ........... `=(\ /.=` ............ ............. `-;`.-' ............ ............... `)| ... , ........ ................ || _.-'| ........ ............. , _|| \_, / ........ ....... , ..... \|| .' ............ ....... |\ |\ , . ||/ ............. .... , ..\` | /|., |Y\, ........... ..... '-...'-._..\||/ ............. ......... >_.-`Y| ................ .............. , _|| ............. ................ \|| ............ ................. || ............ ................. || ............ ................. |/ ............ .................................
Topic 2: What about Computer Graphics?!

Lily Pad Basics
Hello World! is a classic first program but its not very exciting! So lets talk about graphics. An explanation and example of computer graphics has to start with a simple explanation of how computers display graphics on the screen. The computer screen is made up of thousands of individual dots called pixels which are aligned in straight rows across the monitor screen and straight columns up and down the screen. When a picture or some text appears on the screen, it is because only the dots or pixels required to display the image are lit. So if a red box is displayed, only the rows and columns of pixels in the shape of a box are lit in the color red. Graphics are positioned on the screen by use of a coordinate system which is the numbering system for all of the rows and columns of pixels. Its different from the algebra coordinate system that you might have learned about in school. The computer coordinate system is easy to work with. It makes it simple to place graphics at a certain position on the screen by using just 2 numbers.
A Big Pond Tip It is common to see numbering systems beginning with 0 in technology. This is common because computers rely upon a binary numbering system using only 0s and 1s. You will encounter this unique numbering system many times in computer programming.
Computers use an (X, Y) coordinate system for locations on the computer screen in which the left edge of the screen defines X = 0, and the top of the screen defines Y = 0. This means that the origin, where X = 0 and Y = 0, is the upper left corner of the screen. Moving to the right across the screen increases the X value, and moving down the screen increases the Y value. So every spot on the screen has both an X and a Y value; X defines how far across the screen and Y defines how far down the screen a graphic appears .
Here is a picture indicating the position of several (X, Y) locations in a Phrogram program:
Please take a moment to examine the numbers in the picture above. The first value of each pair is the X value of that location on the screen and as you can see, the X value increases as you move from the left to the right. The second value of each pair is the Y value of the location on the screen and as you can see, the Y value increases as you move from the top to the bottom. Idea Round-up: Positions on the screen are labeled with X and Y values. The X value measures, in pixels the distance across the screen. The Y value measures, in pixels the distance down the screen. The top left corner of the screen is labeled as (0,0).
Lets write our first Phrogram graphics program, and in the process see exactly how you use the graphics coordinates system to make cool graphics on the screen with Phrogram. Well start by showing the full Phrogram program, as well as the graphics it creates when you run it. In the Leap In section you can experiment with creating your own graphics.
Notice there are now 9 Phrogram instructions in Method Main(), from line 3 to line 11. Thats a lot more than our first example, but hopefully you agree its cool that Phrogram can draw a blue star on the computer screen with only 9 instructions! Notice that the program begins and ends in the same way our first program did, except that the name of this program is DrawingWithThePen.
Lets examine a few instructions in the Method Main()in order to understand their purpose.
The first three instructions have been added to the program, but as you see, the program doesnt display any graphics yet. The first instruction added is Define myPen As Pen. This statement tells the computer that we are going to use a Pen and that were going to refer to that Pen by the name myPen. Think about this logically: if we tell Phrogram that myPen is a Pen, then
Phrogram will understand that, and will know that myPen will be able to do things that all Phrogram Pens can do. What are some things that real pens can do? Well, real pens can draw, and they can have different colors, and pens can have different size drawing points. This is also true with Phrograms pens. So lets learn to change these Pen properties in Phrogram. Lets look more closely at these 3 lines of code:
Im sure you canguess what myPen.Color = Blue does. It tells Phrogram that we want it to draw using the color Blue. myPen.LineWidth = 5 tells Phrogram that when we draw with myPen, we want Phrogram to draw a line which is 5 pixels wide. Remember that a pixel is one tiny dot on your computer screen, so a line which is 5 pixels wide will look just a little wide, as if you drew it with a marker. You could, of course, use a different value for LineWidth. myPen.LineWidth = 2 would draw a thinner line, like a blue ballpoint pen. And myPen.LineWidth = 10 would draw a thicker line, like a crayon. Idea Round-up: A Pen object must be defined in Phrogram before it can be used to draw. Pens defined in a Phrogram program can have various colors and line widths. So far, we have told Phrogram about how it will draw, but we havent told it to draw anything yet. Now, lets draw our first line in the star:
The first instruction added is myPen.MoveTo(100, 0). This tells Phrogram to move the pen to location (100, 0) on the screen, which is the location for the top of the star. When you define a new pen in Phrogram, it always starts at location (0, 0)the upper left corner. Using the MoveTo command tells Phrogram to move your pen to a specific position, but NOT to draw a line as it moves. The second instruction added is myPen.DrawTo(50, 150). This instruction actually moves the pen while it draws the first line in the star. Consider the (X, Y) values for these two points for
a moment. Since this instruction tells Phrogram to draw from X = 100 to X = 50, the line moves to the left. And since we move from Y = 0 to Y = 150, the line also moves down the screen at an angle. Now lets add one more instruction to Phrogram, which adds the next line to the star:
The next instruction is myPen.DrawTo(180, 50). Phrogram continues moving the pen from the previous point, which was (50, 150) to (180, 50). Have you ever seen an Etch-A-Sketch those cool red toys which allow you to draw things on the screen by turning two knobs? Phrograms pen is a lot like a computerized Etch-A-Sketch. Look at the additional lines that will finish the star:
As you can see, three more Phrogram instructions cause Phrogram to draw three more lines. In total, our Phrogram instructions have caused the computer to draw five lines with myPen, and the result is a blue star.
The Phrogram program required to do this is small only 9 Phrogram instructions. You might have to think hard about how the (X, Y) coordinate system works in Phrogram. Its important to spend enough time and effort so that you are very comfortable with (X, Y) coordinates, since this concept is the basis of all graphics programming. When you create your own graphics its helpful to sketch your designs on graph paper before you start programming. Other languages handle graphics in this same way, so when you learn this with Phrogram, you are learning the most fundamental concept needed to program computer graphics in any language. Idea Round-up: myPen.MoveTo(100, 0) relocates the pen tip to a new location without leaving a trail of ink. myPen.DrawTo(180, 50)leaves a trail.
Look at this final detail in our example. It demonstrates an extra bit of control that you have using Phrograms Pen. To change the color of the star we just need to change one line of the code!
Just changed myPen.Color = Blue to myPen.Color = Green. Easy! DrawTo allows you to draw all kinds of objects.
Using MoveTo and
This is a very simple example that creates an X on the screen.
A Big Pond Tip Not all drawing must be a continuous flow of lines. Use the MoveTo command to start a new line in a new spot to create a new shape that is not connected to the previous shape.
Leap In
This is your chance to experiment with Phrogram, but you can skip this section if you do not have access to a computer and Phrogram. If you cannot experiment at this time you might want to read this section in order to more fully understand the Phrogram programming environment and the graphic concepts you have just learned. At this point, if (X, Y) coordinate values arent clear to you, return to the Lily Pad Basics of this topic on Graphics and read through it one more time. This section assumes Phrogram has already been downloaded and is installed on your computer by following the directions on the Phrogram Website (www.phrogram.com). Find Phrogram by locating the short-cut icon on your computer desktop or from the list of programs available from the Start menu in Windows. Launch Phrogram again as you did in the previous Leap In section by double clicking the shortor selecting Phrogram program found with in the Phrogram Company cut icon folders among the list of programs available through the Start menu. Lets create the blue star graphic that you read about in the Lily Pad Basics
When you launch Phrogram, it will look something like this:
A Big Pond Tip If then Code Editor pane is displaying the code from an earlier program, just select New from the File menu and you will get a new Code Editor pane to work with. Also notice that this will create a second tab at the top of the Code Editor that enables you to move back and forth between programs.
Clear the code which is shown in the program file Untitled1.kpl. To do this, click the Edit Menu, and the Select All item on that menu. You will see that all code in the Code Editor is now highlighted as shown below. With all of the code highlighted this way, you can either press the Delete key on your keyboard, or select the Edit menus Cut command to clear the existing code from Code Editor.
Now enter in the code for creating the blue star as shown below.
Check you work carefully. Do you see any squiggly red lines that indicate you made a mistake? If so, correct your work. or press the F5 key to run your To run your program , click on the green arrow icon Phrogram program. But before Phrogram actually shows you the results of your program, you will be asked to save it. A Save your new program dialog box appears with the name you gave your program in the File name field, and the list of all of the file folders you saw in the Files Explorer pane of the Phrogram window. For right now, just accept the defaults and click Save. Later you will learn to create your own folders for organizing your work.
Did it work? Did your program create a blue star at the top of the screen like the one below?
If it doesnt match the picture above, check your program again to be sure the coordinate values (those X and Y values in the parenthesis) are correct. Remember, to close this program, click on the Eject icon: Now its time to experiment! Try these projects: Modify the star by changing the Color property. Modify the LineWidth property. Add 50 to every X coordinate value. What happens? (This should position the star 50 pixels to the right from where it was originally drawn.) Add 100 to every Y coordinate value. What happens? (This should position the star 100 pixels below the last position.) A Big Pond Tip When you change the code in a Phrogram program and then run the program again, the new version of the code is automatically saved. If you change the code and want to keep the original version also, you must select Save As in the File menu and give the new version a new name before you run it. on the toolbar.
Lets create another star to the right of this star. 1. Before we try to create 2 stars side-by-side change the coordinates in the program back to the original values. 2. Click at the end of the last DrawTo line in the program. 3. Press return twice to create an empty line between the code for the first star and the code for this new star. 4. To be efficient lets copy the code for the first star. Select all of the lines of code from the line that reads MyPen. Color = Blue to the last DrawTo(100,0) line. This action will highlight all of this code. Now select Copy from the Edit menu. 5. Click below the existing code in the extra space we created in step 3 and select Paste from the Edit menu. You should have 2 sections of code exactly the same with a blank line between them.
6.
From past experimenting you know that adding to the X value of the coordinates places a graphic farther to the right, so lets change the values in the second portion of code the code for the second starby adding 200 to each X value. Change the Color to red and the LineWidth to 10.
7.
Your code should now look like this:
8.
Lets do one more thing to make the code more understandable. a. Click at the end of line 5 and press return twice. b. Now add a comment that describes what the next section of code does. Press the forward slash key twice and you will notice that the text color changes to green. That means that the computer knows you are adding a comment and it will ignore this line when the program runs. c. Add a description of the star. It should look like this: //Draws a blue star d. Now add another comment describing the second star. You code should now look like this:
Does your screen look like this when you run your program?
Dive Deep
Here is your chance to learn more about computer programming. You can skip this section if you want to go onto the next topic. Comments A comment can be a line comment or a block comment. A comment is a part of your program that is ignored when the program runs, and allows you to leave yourself notes directly in the program code. Line comments are preceded by two forward slashes and everything to the end of the line is treated as a comment.
Example:
// These are line comments. Everything to the right of the // // is a comment and is ignored. Line comments end at the end of // the line. Define i As Integer // i is not a good variable name fix this
Block comments are started by the /* characters and end with the */ characters. Everything between is a comment. Example: /* This comment can span multiple lines. You can leave really big comments using this style of comment. */
Time to Experiment
The best way to become a good programmer is to practice and experiment. Here is your chance to see what you can create on your own. 1. Create a program to draw you initials. Make each letter a different color and line width. You might want to create an abstract version with overlapping letters or other artistic flare. Add comments to the code identifying each letter. Create a blueprint-like drawing of your bedroom. Add additional shapes for furniture. Add comments to your code to identify each element.
2.
Topic 3: Game Graphics Using Sprites

Lily Pad Basics
Now that you know about using (X, Y) coordinates for displaying graphics, you are ready to learn about the type of graphics more often used in computer games. Game graphics arent normally drawn in the manner you just learned. Typically, they are loaded from an image file, like an image of a UFO or an asteroid or an elf with a bow. When used in a computer program such as Phrogram, these graphics are called Sprites. In computer programming, a Sprite is a graphical object which you can display and manipulate on the computer screen. Phrogram uses Sprites in a way that makes if very easy for you to do cool stuff! Lets look at an example of a program using a Sprite to learn how to make graphics move across the screen like they do in computer games. In no time at all you will be writing programs like this yourself. Here is a Phrogram program that displays a UFO and moves it slowly down the screen. Look inside the Method Main(). It has exactly 9 instructions that create all of the action.
Follow along as we analyze specific sections of the code to learn more about programming animation. Notice that this program begins and ends the same way as all Phrogram programs do except it is named UFO:
Look next to the instructions which cause the UFO to be displayed at the top of the screen:
The first instruction is Define myUFO As Sprite. With this first instruction, we tell Phrogram to use a Sprite and that the Sprite is named myUFO. There are many cool things that Sprites can do in Phrogram, so because myUFO is defined as a Sprite, myUFO can be programmed to do any of the things a Phrogram Sprite can do. A Big Pond Tip An important detail to notice is that there are no quotation marks around numeric values. In general, Phrogram requires quotation marks around values that are words, and does not require quotation marks around values that are numbers. Other computer languages also use this same rule. See the Dive Deep section for more detailed information about this. The second instruction added is myUFO.Load( "UFO.GIF" ). This statement tells the computer which graphic to use for myUFO. Load requires only one value for it to work; it requires the name of the image file which Phrogram will use for this sprite in this case, "UFO.GIF". The syntax rules of Phrogram require that this value be surrounded by double quotation marks and parenthesis, as shown.
Idea Round-up: Defining a Sprite gives it many abilities that only Sprites have in Phrogram. The instruction myUFO.Load( "UFO.GIF" ) tells the computer to use the picture file "UFO.GIF" when it displays myUFO on the screen.
The computer needs to know where to put the Sprite on the screen, so we use the instruction myUFO.MoveTo( 50, 0 ). MoveTo requires two values. The first value is the X axis location for the Sprite, which is 50. The second value is the Y axis location for the Sprite, which is 0. All that remains is to tell Phrogram to actually display the Sprite. The statement myUFO.Show()tells the computer to show the Sprite in the location given in the MoveTo(50,0) statement. Thats it! Phrogram waits until you actually tell it to Show the UFO before it displays it on the screen this allows you to set the sprite up carefully before showing it to the user. Idea Round-up: myUFO.MoveTo( 50, 0 ) tells the computer to move the UFO Sprite to the screen location (50, 0). myUFO.Show() causes the computer to display the Sprite in the prescribed location. Heres the Phrogram program, and what the screen looks like when we run it. Can you find the instruction that tells Phrogram what graphic to use for your sprite? Can you find the instruction tells Phrogram where to display your sprite? How about the instruction that tells Phrogram to actually display your sprite?
Lets move on to see how simple it is in Phrogram to create some action with our Sprite.
Using Variables and Loops in Phrogram

We want the UFO to land by moving down the screen to the bottom of the window. In order to accomplish this task, we are going to define and use a variable. Variables make it possible to do most of the action in computer graphics and games so it is worth paying really close attention to this next part. The term variable means that a value is changeable. Changing a value such 1 to the value 10 or 1 to the value 100 when needed in a program is the real power of using a variable. Because we want to move the UFO down the screen we need to change the Y value of the coordinates at the spot in which we want it to appear next. We want to move the UFO to position (50,1) then (50,2) then (50,3) and so on all the way to the bottom of the screen. Without some easier way to tell the computer to display the UFO at every pixel down the screen we would have to write a statement for every step of the way. That would be 100 lines of code to move the UFO only 100 pixels down the screen! That would be a lot of work, so instead were going to put a variable to work.
To make a variable do the work of moving the UFO we need to tell the computer that we are going to use a variable a changing value. We do this by defining a variable in a program statement that looks like this: Define ufoY As Integer A Big Pond Tip Define is a Phrogram keyword that lets Phrogram know you are defining a new Variable names are sometimes variable for Phrogram to use. called identifiers. They must start The word ufoY is the name we chose for of with either a letter or the the variable. We chose ufoY as a variable underscore character, and can consist of numbers, letters, and the name because the value it stores will be used underscore. They cannot contain to change the location of the UFO Sprite on any spaces. the Y coordinate of the screen. It is always wise to select a variable name that represents the value that is going to be stored in it. As Integer tells Phrogram that ufoY is being defined as an Integer variable. Integer variables hold numeric values, like -1 or 0 or 43. Integer values are whole numbers only. You are likely familiar with the term integer from your math classes. Idea Round-up: Define ufoY As Integer tells the computer to create a variable that will store a whole number.
We know that the UFO starts at location (50, 0) on the screen, because that is the point we told Phrogram to move it to. How do we make it move down the screen? We do that by increasing its Y-axis location from the first location to (50, 1), then (50, 2), then (50, 3), then (50, 4), etc We are going to move the myUFO Sprite all the way to (50, 150). Do you see the pattern there? The X value of the Sprites location is always 50. The Y value of the Sprites location is increasing by 1 pixel at a time, from 0 all the way to 150. Its important for you to see the pattern before you see how to use that pattern in Phrogram code. So if the pattern doesnt make sense, please read the last paragraph again. Here is the Phrogram code which tells Phrogram to increase the value of the variable ufoY from 1 to 150, 1 number at a time: For ufoY = 1 To 150 myUFO.MoveTo( 50, ufoY ) Next This is called a loop. Creating loops to do work in programs is another concept for you to apply to computer programming. You are already familiar with loops in your everyday life. Have you ever ran around the track during physical education class and kept track by counting to yourself every time you passed the bleachers? You counted 1, 2, 3, and so on until you finished the task of running 10 laps. Loops in computer programming are exactly the same. The computer counts and keeps repeating some action until the job is finished. Lets see how this works with the UFO landing.
For ufoY = 1 To 150 tells the computer to start with the value of ufoY = 1 and end at 150. The keyword Next determines the end of the loop. When Phrogram gets to the keyword Next, Phrogram knows that it is time increase the value of ufoY to the next value from 1 to 2, or from 2 to 3, or from 3 to 4, etc. until it changes from 149 to 150. Basically, we are telling Phrogram to count from 1 to 150, and we want Phrogram to use our variable ufoY to keep track of the value as it counts. The lines between the For statement and the Next statement tell the computer what to do each time it counts. Since we want it to move the UFO down the screen we use the t myUFO.MoveTo( 50, ufoY ) statement.
Since this instruction is inside of the For loop, Phrogram will perform this instruction each time it counts from 1 to 150. This is the real power of a loop! Just counting from 1 to 150 is not so interesting, but if you can do something useful each time you count, you can do all kinds of cool things, including move the UFO down the screen! Lets examine what is happening: For ufoY = 1 To 150 myUFO.MoveTo( 50, ufoY ) Next We have already seen how MoveTo() works: Phrogram moved myUFO to the (X, Y) location we give it which was (50, 0). What happens when we do this in the loop and we use our variable ufoY instead of the set Y coordinate of 0? Remember that the first time through the loop, the value of ufoY = 1, and the second time ufoY = 2, then ufoY = 3, then ufoY = 4, etc all the way to ufoY = 150. So, the first time through the loop, Phrogram uses the value of ufoY=1 to move the sprite, so that the instruction Phrogram performs is effectively: myUFO.MoveTo( 50, 1 ) And the next time through the loop, ufoY = 2, so Phrogram performs: myUFO.MoveTo( 50, 2 ) And so on like this, until Phrogram has used the loop to count all the way to 150: myUFO.MoveTo( myUFO.MoveTo( myUFO.MoveTo( myUFO.MoveTo( 50, 3 ) 50, 4 ) 50, 5 ) 50, 150 )
Each time through the For loop, the MoveTo statement moves the myUFO Sprite 1 pixel down the screen just the way we want it to!
Idea Round-up: The value of the loop variable, ufoY, is used to change the Y coordinate value of the UFO Sprite. This has the effect of changing the Sprites position from the top to the bottom of the screen.
Lets add one final detail to the program:
Add line 12 Delay( 10 ) inside the For loop. Why do we wamt to do that? Because computers count very, very, very fast! For a computer to count from 1 to 150 takes less time than it takes you to blink your eyes. If we want to actually watch our UFO move down the screen, we have to slow the computer down a little while it counts. Delay ( 10 ) simply tells Phrogram to take a very short break before it moves the UFO each time. Think about the strategy you use when you want to count seconds like a clock. Instead of counting One, two, three you say One thousand one, one thousand two, one thousand three, in order to make your counting slow down a little and to be more like a clock ticking off the seconds. The Delay command works exactly like that. With Delay( 10 ) we are slowing down Phrograms counting. You can modify the value 10 to any integer in order to make the program move at the desired speed.
Idea Round-up: Delay( 10 ) slows the animation down by causing the computer to pause for a tiny moment before each move of the Sprite.
Leap In
Here is your chance to experiment with Phrogram, but you can skip this section if you do not have access to a computer and Phrogram. If you cannot experiment at this time you might want to read this section in order to more fully understand the Phrogram programming environment and the animation concepts you have just learned. At this point, if the concepts of Sprites, variables and loops arent clear to you, you probably should return to the Lily Pad Basics of this topic on Game Graphics and read through it one more time. This section assumes Phrogram has already been downloaded and is installed on your computer by following the directions on the Phrogram Website (www.phrogram.com). Find Phrogram by locating the short-cut icon on your computer desktop or from the list of programs available from the Start menu in Windows. Launch Phrogram again as you did in the previous Leap In section by double clicking the shortor selecting Phrogram program found with in the Phrogram Company cut icon folders among the list of programs available through the Start menu. Lets create the blue star graphic that you read about in the Lily Pad Basics
When you launch Phrogram, it will look something like this:
!!Remember you may need to select New under the File menu to get a new Code Editor pane into which you can enter your next program. Clear out the code which is shown in the program file Untitled1.kpl. To do this, click the Edit Menu, and the Select All item on that menu. You will see that all code in the code editor is now highlighted. With all of the code highlighted this way, you can either press the Delete key on your keyboard, or select the Edit menus Cut command to clear the existing code from Code Editor. We are now ready to apply Sprites, variables, and loops to new problems. If you do not yet feel comfortable with these concepts, please go back to the beginning of this topic and read it again.
Lets start by creating the landing UFO. Enter this complete code into the Code Editor pane.
or press the F5 key to run your To run your program , click on the green arrow icon Phrogram program. But before Phrogram actually shows you the results of your program, you will be asked to save it. A Save your new program dialog box appears with the name you gave your program in the File name field, and the list of all of the file folders you saw in the Files Explorer pane of the Phrogram window. For right now, just accept the defaults and click Save. If you enter in all the Phrogram code exactly as shown here and run it, you will see the UFO fly from the top of the screen toward the bottom of the screen. Way to go! Remember if you encounter an error, just stay calm, be patient, and carefully look for the differences between your program and this example. When you change your code to match the example exactly, it will run fine. Now that you have been successful with the landing UFO, try these fun exercises: Can you make the UFO move farther? How about making it fly from left to right instead of from the top to the bottom? Can you make the UFO fly down and to the right at the same time?
Once you have the UFO moving with your best strategy, add comment lines to the code to explain what each segment of code does.
Dive Deep
Here is your chance to learn more about computer programming. You can skip this section if you want to go onto the next topic.
Identifiers
The name we gave to the integer variableufoYin the UFO program is called an identifier. An identifier or name of a variable, method, or function, and must start with either a letter or the underscore character, and can consist of numbers, letters, and the underscore. An identifier cannot be a Keywordone of the words used in program commands. Valid identifiers: Monkey I _BallLocationX Ball2_Position_X Invalid Identiers: 2WaysToGo is invalid because it starts with a number Ball-Position.X is invalid because it contains invalid characters (dash and period) Keywords and identifiers are not case-sensitive. When you use an identifier in code, you can use any combination of upper and lower case. For example, these are all valid statements which assign a value to the variable Monkey: Define Monkey As String = "Monkey" MONKEY = "Small" MoNkEy = "Loud" monkey = "cute" It is best, and a common programming practice, to use a convention called camel case when naming variables, and when using them in Phrogram code. Camel case means the first letter of every word used in the variable name is capitalized, and all other letters are lower case. This is a convention because it results in very readable code. In this example, you can see that the lines which use camel case are easier to read, because the camel case helps us distinguish the separate words in the variable name: Define MonkeyName As String = "George" MONKEYNAME = "Sophie" MoNkEyNaMe = "Joe" monkeyname = "Caesar" These are bad examples!
Data Types
Simple Data Types In the UFO program we used a variableufoYof type Integer. We selected the Integer type because we only needed to store whole numbers for use as a counter from 1 to 150. Phrogram supports several other data types which the programmer can choose from to fit the specific needs of the problem to be solved. INTEGER Any whole number in the range from negative 2,147,483,648 to positive 2,147,483,647, inclusive. Here are some examples: Define i As Integer = 1 i = 5 i = -323 i= 12345678 STRING A unit of text represented by a sequence of characters surrounded by double quotes. Here are some examples: Define MonkeyName As String = "George" MonkeyName = "Sophie" MonkeyName = "Joe" MonkeyName = "Caesar" BOOL A Boolean value which can contain the value TRUE or FALSE. Boolean expressions that evaluate to 0 are treated as FALSE, all other values result in being evaluated as TRUE. Here are some examples: Define b As Boolean b = True b = False DECIMAL A floating point or real number with up to 28 digits of decimal significance. This allows the largest values to be within the range from negative to positive +/79,228,162,514,264,337,593,543,950,335. The smallest non-zero value supported is +/0.0000000000000000000000000001 (+/-1E-28). Here are some examples: Define d As Decimal = 0.0 d = 0.333333333333333333 d = -123456789.987654321 d = 79228162514264337593543950335 // largest possible decimal d = 0.0000000000000000000000000001 // smallest possible decimal
Time to Experiment
Sprites can be created from several graphic file types. The most common are JPG, BMP, GIF and PNG files. You can easily create your own or modify and resize existing graphics with most graphic editor programs. You can use ANY image file you want to use with Phrogram, including ones you add or create. These are just a few of the dozens of images included in Phrogram. You will find many more
graphics listed in the File Explorer panel of the Phrogram Window. They are located in the Images folder inside of the Media Files folder. BLUEBALL.PNG PLANE.PNG
UFO.GIF
SPIDER.PNG QUAD.GIF If you create your own graphics or find others you want to use, you should save the graphic file in the My Documents \ My Phrogram Files \ Media Files \ Images folder. If you store your graphic files in this location, they will be visible in the Media Files \ Images folder in the File Explorer pane of Phrogram. This will make it much easier to add them to your programs. 1. The best way to learn any programming strategy is to experiment with an existing program. Start by changing just one value in one program statement to discover the affect . By carefully observing, you will learn a great deal about programming and become an expert debugger. Start by changing the graphic image in the UFO program. Make your Sprite move around the screen as if it were on a race track. HINT: You will need 4 separate loops for this actionone for each side of the track. Use 4 different Integer variable names and be sure to include comments so you can more easily remember what lines of code perform what actions. Now you are really ready to create your own animation program. You might consider having more than one Sprite on the screen. You will need to define more than one Sprite and each will need its own name. Professional programmers do a lot of thinking and planning before they start writing code. You will want to sketch your ideas and create a list of moves for the Sprites before you begin. Trust meit will save you great deal of time in the long run. Dont forget to add comment lines to make the debugging easier.
2.
You can continue experimenting and learning about computer programming by playing with the program samples in the Step-by-Step Tutorial folder at the top of the list of folders in the File Explorer pane of the Program window.
A Big Pond Tip Computer Programming is fun and exciting if you remember to: Stay Calm Be Patient Read Carefully Ask Questions Work With Your Friends

PhrogramTutorial KPL

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

PhrogramTutorial KPL

Caricato da

Copyright:

Formati disponibili

A guide for the absolute beginner

Lets Program With Phrogram

By Jon Schwartz Edited by Pat Phillips

Document updated January 2007 website: www.phrogram.com

Lets Program With Phrogram

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Preface: How Should I Use This Tutorial?

Big Pond Tips

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Topic 1: What is Programming?

Lily Pad Basics

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Errors are inevitable!

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

The Phrogram Toolbar

When View Advanced Options is checked:

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Run the program

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Comment selected code**

Uncomment selected code**

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Clear all bookmarks**

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Topic 2: What about Computer Graphics?!

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Using MoveTo and

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

This is a very simple example that creates an X on the screen.

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

When you launch Phrogram, it will look something like this:

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Your code should now look like this:

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Topic 3: Game Graphics Using Sprites

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Using Variables and Loops in Phrogram

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Lets add one final detail to the program:

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company

Beginning Programming with Phrogram Copyright 2007 by The Phrogram Company