PhrogramTutorial KPL

7/28/2019 PhrogramTutorial KPL

1/46

Lets Program

With PhrogramA guide for the absolute beginner

By Jon SchwartzEdited by Pat Phillips

Document updated January 2007

website: www.phrogram.com


2/46

Beginning Programming with Phrogram Page 2 of 46Copyright 2007 by The Phrogram Company 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


3/46


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 tounderstand each topic at a beginners level and provide enoughguidance to complete the programming activities in the Leap In section.This section can be used alone to learn computer programming conceptsand is not dependent upon having access to a computer or Phrogram.

The Leap In sections will give you specific instructions forexperimenting with Phrogram using the information learned in the Lily

Pad Basics.

The Dive Deep sections offer more in-depth details on the topic and willlet you stretch your skills to a higher level. Sometimes this section isonly more information to read and sometimes it is another opportunityto experiment with Phrogram.

Throughout the Lets Program with Phrogram tutorial you will find Big PondTips. These tips alert you to important ideas that can be especially confusingto someone just learning programming.

If you are truly a beginner, and have never done any programming, the best way to use thistutorial is to read and study this tutorial topic by topic, making sure you understand each topicbefore moving on to the next. You can study the tutorial without using Phrogram or yourcomputer by focusing on the Lily Pad Basics sections only. If you have access to acomputer and Phrogram, the Leap In sections will reinforce what you learn in the Lily PadBasics. 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.

Big Pond Tips

Idea Round-up: You will find this feature at the end of a description ofimportant concepts. It is a summary of the key ideas that provide a quickreview of youve learned.


4/46


Learning to think this way may be difficult at first, but you can do it! And once you get the hangof 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 questionsof someone who already understands computer programming. Can you think of anyone whocould 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 teamworkhelps everyone learn faster and easier.


5/46


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 noimagination! So when we write programs to give computers instructions, wemust 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. ThePhrogram computer language offers several important advantages for you as a beginningprogrammer:

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 andmany of you who want to program fun things such as animations and games, will find thatPhrogram does everything you need it to do. When you want to graduate to more advancedprogramming, 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 programmingenvironments, except Phrogram is much easier and much more fun!


6/46


OK, Show Me a Program!

When programmers create programs they write instructions for a computer to follow in a specificcomputer language. Below are the instructions written in Phrogram to tell the computer todisplay 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, actuallyused line numbers to process code in the order desired bythe programmer. Phrogram does not do this. Phrogramprograms are normally processed one instruction at a time,starting at the top and moving downward through theprogram. There are exceptions to this which we will savefor a later tutorial.

All computer languages have rules which the programmermust follow so that the computer will understand theprogrammers instructions. These rules are called syntaxrules. 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 understandus, computer languages have syntax rules. In language classes you learn many grammar rules forchanging verbs to past and present tense, and creating plural and singular forms of nouns, so thisis not a new concept.

A Big Pond Tip

The line numbers to the left of thecode in Phrogram have no affecton the program. They are onlythere to help the programmer keeptrack of lines of code.


7/46


One important syntax rule for programming in Phrogram is that each line of Phrogram codeneeds to be on a separate line. For instance, the Phrogram program below has the same words asthe 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 wordseveryday. Computer languages also speak a specific vocabulary. For instance, we dont sayGoodbye 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 forbeginning and ending a program, as well as for every other action it performs. All Phrogramprograms must begin with a line like ProgramHelloWorldas shown in line 1. And allPhrogram programs must end with End Programas shown in line 5.

HelloWorld is the name the programmer gave to this program. Notice that it is just one wordwith no spaces. That is one of the syntax rules that must be followed. You can name yourprogram anything you want, but its best to name it something which describes what theprogram is doing. In this case HelloWorldis the name I chose because that is what it displays.You could just as easily use a different name, like ProgramMyFirstProgram.

The good news is that a computers vocabulary is not very long and you can do powerful thingswith just a few key words. Lets look at a few more key words used in Phrogram:

MethodMain() is the beginning point for every action in a Phrogram program. AllPhrogram programs start by processing the first instruction below the lineMethodMain().MethodMain() 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 languageswork.

End Methodis the key word or programming statement that tells the computer to stopprocessing the commands within this method. In our sample on line 5,End Method

declares the end ofMethodMain(). Notice the indentation of lines 2 and 4. They lineup like bookends, holding between them line 3. Ill bet you noticed the indentation oflines 1 and 5 and immediately thought, Ah-ha! End Programmust be the computerinstruction that pairs with ProgramHelloWorld. You are correct! See how easy thisis! Observing the indentations is another way to locate the beginning and ending of amethod as well as other segments of code which you will learn about later.

Idea Round-up: Every Phrogram program begins with ProgramAName andends with End Program. Dont forget that program names must be written asone word with no spaces.


8/46


Print("Hello World!")is the only line of our program left to analyze. Without anyhelp from me, Im sure you can figure out what that line does; it display Hello World! onthe monitor.

This was a very detailed explanation of a program that tells the computer toPrint("HelloWorld!"). So, lets summarize:

Lines 1 and 5 tell the computer where the beginning and the ending of the program islocated.

Lines 2 and 4 tell the computer where the beginning and ending ofMethod 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 thewindow, the computer has done only one thing. The computer has displayed the words HelloWorld!

The Phrogram program window adds the word Stopped to the title bar when the program hasfinished running. To close that Phrogram program window, you click the orange button on the

toolbar with the Eject icon:

Idea Round-up:MethodMain() is where the action of a Phrogram program

starts. The only line in this first program that displays anything to the user isPrint("Hello World!").


9/46


Leap In

This is your chance to experiment with Phrogram, but you can skip this section if you do nothave access to a computer and Phrogram. If you cannot experiment at this time you might wantto 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 computerby following the directions on the Phrogram Website (www.phrogram.com). Find Phrogram bylocating the short-cut icon on your computer desktop or from the list of programs available fromthe 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 Startmenu.

When you launch Phrogram, it will look like this:


10/46


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 CodeEditor. Phrogram is showing a new program file called Untitled1.kpl in the Code Editorpane. This is the section where your programs will be written. The program you see therenow does nothing yet, but you likely recognize a few lines such as Program

MyNewProgram,Method Main(), and the Endstatements.

Notice the line numbers on the left hand side of the window. You will remember thatthese are for your use as you work with Phrogram and are not parts of the actualprogram written.

The green lines you see in the Code Editor are called comments and provide informationto the reader of the program, but they do not actually contain Phrogram instructions tothe computer. The computer totally ignores these comments when it runs the program.Comments usually start with two forward-leaning slash marks: // You will see manycomments in the Phrogram example programs, and over time will learn to use commentsyourself as you write your own Phrogram programs. Comments help others to

understand what the Phrogram program is doing and can even help you rememberwhat you were thinking when you wrote a program long ago!

Phrograms Code Editor has many of the same features as your word processor or emailprogram. Take a moment to examine the Menus and the Toolbar at the top of thewindow. If you hover the mouse pointer over the Toolbar icons, you will see tooltipsidentifying them.

On the right side of the Phrogram window yousee a pane titled Files. This is called the FilesExplorer. There are many file folders herecontaining programs already written which we

will explore in later sections of this tutorial. Youwill also see your own programs listed at thebottom of the list after you create and savethem.

The pane at the bottom of the window titledErrors is a message area for the programmer. Ifmistakes are made in a program, the computerwill use this area to try its best to explain what iswrong so that you can fix them.

A Big Pond Tip

At the bottom of the Phrogramwindow you will see several tabs.Clicking on them opens variouspanes. Do not concern yourselfwith them at this time. You will usethem when you do more advancedprogramming.


11/46


Lets focus on creating the HelloWorld program which you studied in the Lily Pad Basics of thistopic section. Lets start by clearing out the code which is shown in the program file Untitled1.kpland displayed in the Code Editor pane. To do this, click theEdit Menu then the Select All itemon 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 usethe Code Editor, the Files Explorer, and the Menus and Toolbars for yourwork in this tutorial.


12/46


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 exactlyas 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. HitENTER to go to the next line. You can also hit ENTERagain to create a blank line. Adding blank lines to a longprogram makes it easier to read your code and to locateprogram lines you are looking for. Using indentationand blank lines is not required, but it will help you andothers to read and understand your Phrogram programmore easily.

A Big Pond Tip

Producing readable code is avery important skill for a goodcomputer programmer.Use indentations and blank lineswith plenty of comments toincrease the readability of yourwork.


13/46


After you have entered the program into the Code Editor, click on the green arrow icon orpress the F5 key to run your Phrogram program. But before Phrogram actually displays theresults of your program, you will be asked to save it. A Save your new program dialog boxappears 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 acceptthe defaults and click Save. Later you will learn to create your own folders for organizing yourwork.

Now, finally, if your Phrogram code was entered correctly, you should see a window pop up thatlooks like this, except its a bit larger:

A Big Pond Tip

The programs listed in the FileExplorer pane of Phrogram areactually stored in a folder namedMy Phrogram Files which islocated in your My Documentsfolder. You can create additionalfolders in this location to store andorganize your Phrogram files.


14/46


Thats it! You are now a computer programmer! Way to go! Woohoo! Okay, okay, its a verysmall and simple program, but still you typed that in and made it run!

To close this Phrogram program display window click the Eject icon: on the toolbar.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 toperiodically save your program as you are making changes. Just select Save under the File menuand 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 inthe FilesExplorer 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 codeis still there!


15/46


Click on the little + icon shown on line 3 and all the codewithin Method Main will expand so you can see it.Click the icon, and the code will collapse again. This isnot a very useful feature for such a simple program, butwhen you write larger programs, you will see thathiding and showing code this way can be very

convenient.

Errors are inevitable!Phrogram will let you know if it does not understandthe code youve typed in. In the Code Editor changethe word Print to Prent. Phrogram puts a squigglyred line underneath the code it does not understand.Place the mouse over the squiggly line and youll see apopup, which says Error: Method not found. As Imentioned before, computers are very precise, and theyrequire 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 sayPrent!

If you encounter an error when working on any ofthese examples in this tutorial, just carefully comparethe code you typed against the code shown in thetutorial. When you find the difference in your codeand change it to match the example, the squiggly redline will disappear and you will be able to run theprogram.

All computer programmers sometimes have errors intheir code, so dont feel bad about it when you do. Noone is perfect! When you notice an error, just stay calm,be patient, and examine your code carefully a calmapproach, patience, and careful reading are the keys tofinding and fixing errors. wrong and fix it.

A Big Pond TipIf you are trying to run one of yourprograms but you can not click on

the green arrow because it is

light gray it means you did notclose the running of the lastPhrogram program. Minimize thePhrogram window and any otherwindows that are open until yousee the program that is stillrunning. Close it by clicking on the

eject icon and you will be ableto run your next program.

A Big Pond TipThe accidental errors made inprograms are called bugs. Youwill likely produce many bugs as aprogrammer so learn to take it instride and develop good de-

bugging skills in order to find andfix the problems.


16/46


Dive Deep

Here is your chance to learn more about computer programming. You can skip this section if youwant 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 toexperiment with the Menu choices at the top of the Phrogram window. While some of the choicesare unique to programming, you will recognize many of them from your work with otherWindows applications. You likely know many of the short-cut key combinations for doingroutine procedures such as Control-X for cutting selected text, or Control Z for undoing changesmade to the document. You can learn many more through experimenting or by reading thePhrogram 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 thePhrogram 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. Itis 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, whichmatch the functions in the table below. Note that Toolbar buttons will enable or disable asappropriate. For instance, if no Phrogram program files are open in the Code Editor, nearly allthe Toolbar buttons are grayed-out and disabled since they are only relevant to a selectedPhrogram program file.

The Toolbar items below marked with a ** are not shown nor accessible on the Toolbar unless theView Advanced Options setting is selected on the View menu.

Function Icon Explanation

New Program Creates a new template Phrogram program, which isproperly structured, compiles and runs though itdoes not do anything functional until further code isprovided. This function is also available through theCtrl+N hotkey.

Open Program Launches a dialog allowing the user to locate and opena Phrogram program from a disk. This function is alsoavailable through the Ctrl+O hotkey.

Save Program Saves any code changes that have been made to the


17/46


currently selected Phrogram program. This function isalso available through the Ctrl+S hotkey.

Save All Saves any code changes that have been made to allopen Phrogram program files. This function is alsoavailable through the Ctrl+Shift+S hotkey.

Print Program Launches a Windows-standard Print dialog allowing

you to print the currently selected Phrogram program.This function is also available through the Ctrl+Photkey.

Cut Cuts the currently selected text from the currentlyselected Phrogram program file. Cut text is placed onthe Windows Clipboard. This function is also availablethrough the Ctrl+X hotkey.

Copy Copies the currently selected text from the currentlyselected Phrogram program file without deleting it.Copied text is placed on the Windows Clipboard. Thisfunction is also available through the Ctrl+C hotkey.

Paste Pastes the Windows Clipboard contents into the

currently selected Phrogram program file at the cursorlocation. Pasted text is still available on the WindowsClipboard. This function is also available through theCtrl+V hotkey.

Find This function displays the Find dialog to locate a stringof text in the document. This function is also availablethrough the Ctrl+F hotkey.

Replace This function displays the Replace dialog to replace astring of text with other text. This function is alsoavailable through the Ctrl+H hotkey.

Undo Reverts the last change made to the currently selectedPhrogram program file. This button is grayed if no

changes are available to Undo, blue if there changes arepossible. This command can be repeated multipletimes, each time reverting to the previous change, allthe way back to when the file was opened in Phrogram.This function is also available through the Ctrl+Zhotkey.

Redo Reverts the last Undo made in the currently selectedPhrogram program file. This command can berepeated multiple times, each time reversing theprevious Undo. This button is grayed if no changes areavailable to Redo, blue if there are changes are possible.

Run the program This fastest way to invoke this function is by pressing

the F5 key on the keyboard. This function causesPhrogram to check the currently select program file forerrors, and if no errors are found, Phrogram launchesthe program. The Messages pane will display theresults of the compilation. If the Messages pane is notdisplayed when this function is invoked, it will bedisplayed.

Step In This command is only enabled when Phrogram ispaused at a debug breakpoint. If the current Phrogram


18/46


instruction is a Method or Function and this commandis selected, the Phrogram debugger will run into thatMethod or Function and stop, with the first instructionin it the new current Phrogram instruction. If thecurrent Phrogram instruction is not a Method orFunction, this command will cause the current

instruction to be executed, and will advance thedebugger to the next instruction.

Step Over This command is only enabled when Phrogram ispaused at a debug breakpoint. If the current Phrograminstruction is a Method or Function and this commandis selected, the Phrogram debugger will execute thatMethod or Function and then stop, with the nextinstruction as the new current Phrogram instruction. Ifthe current Phrogram instruction is not a Method orFunction, this command will cause the currentinstruction to be executed, and will advance thedebugger to the next instruction.

Step Out This command is only enabled when Phrogram ispaused at a debug breakpoint. When this command isselected, the Phrogram debugger will run theremainder of the current Method or Function, and thedebugger will move out of that current Method orFunction and will stop on the next instruction after thecall to it.

Comment selected code** This function causes one or more selected lines ofPhrogram code to be commented out so that theywill no longer be part of the compiled and runningPhrogram program. This is done by placing the//comment indicator at the beginning of each line.

Uncomment selected code** This function causes one or more selected lines ofPhrogram code to be uncommented, so that it willagain be part of the compiled and running Phrogramcode for the program if the//comment indicator islocated at the beginning of the line of code. Thisfunction has no effect if the line of code is not alreadycommented out, or if the comment indicator is not atthe beginning of the line of code.

Decrease indent** This function causes one or more selected lines ofPhrogram code to be shifted to the left by oneindented tab stop. If the code on the selected linealready begins at the left margin, it will not be shifted.

Increase indent** This function causes one or more selected lines ofPhrogram code to be shifted to the right by oneindented tab stop.

Toggle bookmark** Toggles a bookmark on or off on of the currentlyselected line of Phrogram code. Bookmarks can beused to quickly return to a particular place in yourPhrogram program.

Go to next bookmark** This function moves the cursor within the Phrogramprogram to the next line of code which is bookmarked.


19/46


This function will wrap to the first bookmark from thetop of the Phrogram program, if there is a bookmarkabove the current cursor but not one below.

Go to previous bookmark** This function moves the cursor within the Phrogramprogram to the first previous line of code which isbookmarked. 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 notone above.

Clear all bookmarks** This function clears all bookmarks in the currentlyselected Phrogram program file.

Time to Experiment

Now that you know your way around Phrogram, its time to experiment on your own. Try theseactivities 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 orideas.:-) 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 ongraph paper before you begin!......... , . - . - , _ , ................ ) ` - . .> ' `( ............... / . . . .`\ . . \ ................ |. . . . . |. . .| ................ \ . . . ./ . ./ .................... `=(\ /.=` ......................... `-;`.-' ........................... `)| ... , ........................ || _.-'| ..................... , _|| \_, / ............... , ..... \|| .' ............

....... |\ |\ , . ||/ .............

.... , ..\` | /|., |Y\, ...........

..... '-...'-._..\||/ .............

......... >_.-`Y| ................

.............. , _|| .............

................ \|| ............

................. || ............

................. || ............

................. |/ ............

.................................


20/46


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 howcomputers display graphics on the screen. The computer screen is made up of thousands ofindividual dots called pixels which are aligned in straight rows across the monitor screen andstraight 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 acoordinate system which is the numbering system for allof the rows and columns of pixels. Its different from thealgebra coordinate system that you might have learnedabout in school. The computer coordinate system is easyto work with. It makes it simple to place graphics at acertain position on the screen by using just 2 numbers.

Computers use an (X, Y) coordinate system for locationson the computer screen in which the left edge of thescreen defines X = 0, and the top of the screen defines Y= 0. This means that the origin, where X = 0 and Y = 0, isthe upper left corner of the screen. Moving to the rightacross the screen increases the X value, and movingdown the screen increases the Y value. So every spot onthe screen has both an X and a Y value; X defines how far across the screen and Y defines how fardown the screen a graphic appears .

A Big Pond Tip

It is common to see numberingsystems beginning with 0 intechnology. This is commonbecause computers rely upon abinary numbering system usingonly 0s and 1s. You willencounter this unique numberingsystem many times in computerprogramming.


21/46


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 youmove from the left to the right. The secondvalue of each pair is the Yvalue of the location on thescreen and as you can see, the Y value increases as you move from the top to the bottom.

Lets write our first Phrogram graphics program, and in the process see exactly how you use thegraphics coordinates system to make cool graphics on the screen with Phrogram. Well start byshowing the full Phrogram program, as well as the graphics it creates when you run it. In theLeap In section you can experiment with creating your own graphics.

Idea Round-up: Positions on the screen are labeled with X and Y values. The Xvalue 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 islabeled as (0,0).


22/46


Notice there are now 9 Phrogram instructions inMethodMain(), 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 bluestar 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 thename of this program is DrawingWithThePen.

Lets examine a few instructions in theMethodMain()in order to understand their purpose.

The first three instructions have been added to the program, but as you see, the program doesntdisplay any graphics yet. The first instruction added is Define myPenAsPen. Thisstatement tells the computer that we are going to use a Penand that were going to refer to thatPen by the namemyPen. Think about this logically: if we tell Phrogram that myPen is a Pen, then


23/46


Phrogram will understand that, and will know that myPen will be able to do things that allPhrogram 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 alsotrue 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 whatmyPen.Color = Blue does. It tells Phrogram that we want it todraw using the color Blue.myPen.LineWidth = 5 tells Phrogram that when we draw withmyPen, we want Phrogram to draw a line which is 5 pixels wide. Remember that a pixel is onetiny dot on your computer screen, so a line which is 5 pixels wide will look just a little wide, as ifyou drew it with a marker. You could, of course, use a different value for LineWidth.myPen.LineWidth = 2would draw a thinner line, like a blue ballpoint pen. AndmyPen.LineWidth = 10 would draw a thicker line, like a crayon.

So far, we have told Phrogram about how it will draw, but we havent told it to draw anythingyet. Now, lets draw our first line in the star:

The first instruction added ismyPen.MoveTo(100, 0). This tells Phrogram to move the pen tolocation (100, 0) on the screen, which is the location for the top of the star. When you define anew pen in Phrogram, it always starts at location (0, 0)the upper left corner. Using the MoveTocommand tells Phrogram to move your pen to a specific position, but NOT to draw a line as itmoves.

The second instruction added ismyPen.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

Idea Round-up: A Pen object must be defined in Phrogram before it can beused to draw. Pens defined in a Phrogram program can have various colors andline widths.


24/46


a moment. Since this instruction tells Phrogram to draw from X = 100 to X = 50, the line moves tothe left. And since we move from Y = 0 to Y = 150, the line also moves down the screen at anangle.

Now lets add one more instruction to Phrogram, which adds the next line to the star:

The next instruction ismyPen.DrawTo(180, 50). Phrogram continues moving the pen fromthe previous point, which was (50, 150) to (180, 50). Have you ever seen an Etch-A-Sketch thosecool red toys which allow you to draw things on the screen by turning two knobs? Phrogramspen is a lot like a computerized Etch-A-Sketch. Look at the additional lines that will finish thestar:

As you can see, three more Phrogram instructions cause Phrogram to draw three more lines. Intotal, our Phrogram instructions have caused the computer to draw five lines withmyPen, andthe result is a blue star.


25/46


The Phrogram program required to do this is small only 9 Phrogram instructions. You mighthave 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 yourown 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 anylanguage.

Look at this final detail in our example. It demonstrates an extra bit of control that you haveusing Phrograms Pen. To change the color of the star we just need to change one line of thecode!

Just changedmyPen.Color = Blue tomyPen.Color = Green. Easy! UsingMoveTo andDrawTo allows you to draw all kinds of objects.

Idea Round-up:myPen.MoveTo(100, 0) relocates the pen tip to a newlocation without leaving a trail of ink.myPen.DrawTo(180, 50)leaves atrail.


26/46


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

A Big Pond Tip

Not all drawing must be acontinuous flow of lines. Use theMoveTo command to start a newline in a new spot to create a newshape that is not connected to theprevious shape.


27/46


Leap In

This is your chance to experiment with Phrogram, but you can skip this section if you do nothave access to a computer and Phrogram. If you cannot experiment at this time you might wantto read this section in order to more fully understand the Phrogram programming environmentand 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 thistopic on Graphics and read through it one more time.

This section assumes Phrogram has already been downloaded and is installed on your computerby 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 fromthe Start menu in Windows.

Launch Phrogram again as you did in the previous Leap In section by double clicking the short-

cut icon or selecting Phrogram program found with in the Phrogram Companyfolders among the list of programs available through the Start menu. Lets create the blue stargraphic that you read about in the Lily Pad Basics


28/46


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

A Big Pond Tip

If then Code Editor pane isdisplaying the code from an earlierprogram, just select New from theFile menu and you will get a newCode Editor pane to work with.

Also notice that this will create asecond tab at the top of the Code

Editor that enables you to moveback and forth between programs.


29/46


Clear the code which is shown in the program file Untitled1.kpl. To do this, click theEdit Menu,and the Select All item on that menu. You will see that all code in the Code Editor is nowhighlighted as shown below. With all of the code highlighted this way, you can either press theDelete key on your keyboard, or select the Edit menus Cut command to clear the existing codefrom Code Editor.


30/46


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? Ifso, correct your work.

To run your program , click on the green arrow icon or press the F5 key to run yourPhrogram 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 gaveyour program in the File name field, and the list of all of the file folders you saw in the FilesExplorer 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.


31/46


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: on the toolbar.

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 pixelsto the right from where it was originally drawn.)

Add 100 to every Y coordinate value. Whathappens? (This should position the star 100 pixelsbelow the last position.)

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 codefor 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 blankline between them.

A Big Pond Tip

When you change the code in aPhrogram program and then run

the program again, the new versionof the code is automatically saved.If you change the code and want tokeep the original version also, youmust select Save As in the Filemenu and give the new version anew name before you run it.


32/46


6. From past experimenting you know that adding to the X value of the coordinates placesa graphic farther to the right, so lets change the values in the second portion of codethe code for the second starby adding 200 to each X value.

7. Change the Color to red and the LineWidth to 10.

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 stard. Now add another comment describing the second star. You code should now

look like this:


33/46


Does your screen look like this when you run your program?


34/46


Dive Deep


Comments

A comment can be a line comment or a block comment. A comment is a part of your programthat is ignored when the program runs, and allows you to leave yourself notes directly in theprogram 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 iAsInteger// i is not a good variable name fix this

Block comments are started by the /* characters and end with the */ characters. Everythingbetween is a comment.

Example:

/*This comment can span multiple

lines. You can leave really big commentsusing 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. Youmight want to create an abstract version with overlapping letters or other artistic flare. Addcomments to the code identifying each letter.

2. Create a blueprint-like drawing of your bedroom. Add additional shapes for furniture. Addcomments to your code to identify each element.


35/46


Topic 3: Game Graphics Using Sprites

Lily Pad Basics

Now that you know about using (X, Y) coordinates for displaying graphics, you are ready tolearn about the type of graphics more often used in computer games. Game graphics arentnormally 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 programsuch as Phrogram, these graphics are called Sprites. In computer programming, aSprite is agraphical 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 acrossthe screen like they do in computer games. In no time at all you will be writing programs like thisyourself.

Here is a Phrogram program that displays a UFO and moves it slowly down the screen. Lookinside theMethodMain(). It has exactly 9 instructions that create all of the action.


36/46


Follow along as we analyze specific sections of the code to learn more about programminganimation. Notice that this program begins and ends the same way as all Phrogram programs doexcept 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 myUFOAsSprite. With this first instruction, we tellPhrogram to use a Sprite and that the Sprite is namedmyUFO. There are many cool things that

Sprites can do in Phrogram, so because myUFO isdefined as a Sprite, myUFO can be programmed to doany of the things a Phrogram Sprite can do.

The second instruction added ismyUFO.Load("UFO.GIF" ). This statement tells the computerwhich graphic to use for myUFO. Load requires onlyone value for it to work; it requires the name of theimage file which Phrogram will use for this sprite inthis case, "UFO.GIF". The syntax rules of Phrogram

require that this value be surrounded by doublequotation marks and parenthesis, as shown.

Idea Round-up: Defining a Sprite gives it many abilities that only Sprites havein Phrogram. The instructionmyUFO.Load( "UFO.GIF" ) tells thecomputer to use the picture file"UFO.GIF" when it displays myUFO on thescreen.

A Big Pond Tip

An important detail to notice is thatthere areno quotation marksaround numeric values. Ingeneral, Phrogram requiresquotation marks around values thatare words, and does not requirequotation marks around values thatare numbers. Other computerlanguages also use this same rule.

See the Dive Deep section formore detailed information aboutthis.


37/46


The computer needs to know where to put the Sprite on the screen, so we use the instructionmyUFO.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 statementmyUFO.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 toShow the UFObefore it displays it on the screen this allows you to set the sprite up carefully before showing itto the user.

Heres the Phrogram program, and what the screen looks like when we run it. Can you find theinstruction that tells Phrogram what graphic to use for your sprite? Can you find the instructiontells 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 orderto accomplish this task, we are going to define and use a variable. Variables make it possible todo most of the action in computer graphics and games so it is worth paying really close attentionto this next part.

The term variable means that a value is changeable. Changing a value such 1 to the value 10 or1 to the value 100 when needed in a program is the real power of using a variable. Because wewant to move the UFO down the screen we need to change the Y value of the coordinates at thespot 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 thecomputer to display the UFO at every pixel down the screen we would have to write a statementfor every step of the way. That would be 100 lines of code to move the UFO only 100 pixels downthe screen! That would be a lot of work, so instead were going to put a variable to work.

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 computerto display the Sprite in the prescribed location.


38/46


To make a variable do the work of moving the UFO we need to tell the computer that we aregoing to use a variable a changing value. We do this by defining a variable in a programstatement that looks like this:

Define ufoYAsInteger

Defineis a Phrogram keyword that letsPhrogram know you are defining a newvariable for Phrogram to use.

The word ufoY is the name we chose for ofthe variable. We chose ufoY as a variablename because the value it stores will be usedto change the location of the UFO Sprite onthe Y coordinate of the screen. It is alwayswise to select a variable name that representsthe value that is going to be stored in it.

AsInteger tells Phrogram that ufoY is

being defined as an Integer variable. Integer variables hold numeric values, like -1 or 0or 43. Integer values are whole numbers only. You are likely familiar with the terminteger from your math classes.

We know that the UFO starts at location (50, 0) on the screen, because that is the point we toldPhrogram to move it to. How do we make it move down the screen? We do that by increasingits Y-axis location from the first location to (50, 1), then (50, 2), then (50, 3), then (50, 4), etc Weare 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 ofthe Sprites location is increasing by 1 pixel at a time, from 0 all the way to 150. Its important foryou to see the pattern before you see how to use that pattern in Phrogram code. So if the patterndoesnt make sense, please read the last paragraph again.

Here is the Phrogram code which tells Phrogram to increase the value of the variable ufoY from1 to 150, 1 number at a time:

For ufoY = 1 To 150myUFO.MoveTo( 50, ufoY )

Next

This is called a loop. Creating loops to do work in programs is another concept for you to applyto computer programming. You are already familiar with loops in your everyday life. Have youever ran around the track during physical education class and kept track by counting to yourselfevery time you passed the bleachers? You counted 1, 2, 3, and so on until you finished the task ofrunning 10 laps. Loops in computer programming are exactly the same. The computer countsand keeps repeating some action until the job is finished.

Lets see how this works with the UFO landing.

Idea Round-up: Define ufoYAs Integer tells the computer to create avariable that will store a whole number.

A Big Pond TipVariable names are sometimescalled identifiers. They must startwith either a letter or theunderscore character, and canconsist of numbers, letters, and theunderscore. They cannot containany spaces.


39/46


For ufoY = 1 To 150 tells the computer to start with the value ofufoY = 1 andend at 150.

The keywordNextdetermines the end of the loop. When Phrogram gets to the keywordNext, 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 theNext 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 tmyUFO.MoveTo( 50, ufoY ) statement.

Since this instruction is inside of the Forloop, Phrogram will perform this instruction eachtime it counts from 1 to 150. This is the real power of a loop! Just counting from 1 to 150 is notso interesting, but if you can do something useful each time you count, you can do all kinds ofcool 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 howMoveTo() works: Phrogram movedmyUFO to the (X, Y) location wegive it which was (50, 0). What happens when we do this in the loop and we use our variableufoY instead of the set Y coordinate of 0? Remember that the first time through the loop, thevalue of ufoY = 1, and the second time ufoY = 2, then ufoY = 3, then ufoY = 4, etc allthe way to ufoY = 150. So, the first time through the loop, Phrogram uses the value ofufoY=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:


And so on like this, until Phrogram has used the loop to count all the way to 150:

myUFO.MoveTo( 50, 3 )myUFO.MoveTo( 50, 4 )myUFO.MoveTo( 50, 5 )


Each time through the Forloop, theMoveTo statement moves themyUFO Sprite 1 pixel downthe screen just the way we want it to!

Idea Round-up: The value of the loop variable, ufoY, is used to change theY coordinate value of the UFO Sprite. This has the effect of changing the Sprites

osition from the to to the bottom of the screen.


40/46


Lets add one final detail to the program:

Add line 12 Delay( 10 ) inside the For loop. Why do we wamt to do that? Becausecomputers count very, very, very fast! For a computer to count from 1 to 150 takes less time thanit takes you to blink your eyes. If we want to actually watch our UFO move down the screen, wehave 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 eachtime.

Think about the strategy you use when you want to count seconds like a clock. Instead ofcounting 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 theseconds. 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 theprogram move at the desired speed.

Idea Round-up: Delay( 10 ) slows the animation down by causing thecomputer to pause for a tiny moment before each move of the Sprite.


41/46


Leap In

Here is your chance to experiment with Phrogram, but you can skip this section if you do nothave access to a computer and Phrogram. If you cannot experiment at this time you might wantto read this section in order to more fully understand the Phrogram programming environmentand the animation concepts you have just learned.

At this point, if the concepts of Sprites, variables and loops arent clear to you, you probablyshould return to the Lily Pad Basics of this topic on Game Graphics and read through it onemore time.

This section assumes Phrogram has already been downloaded and is installed on your computerby 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 fromthe Start menu in Windows.

Launch Phrogram again as you did in the previous Leap In section by double clicking the short-

cut icon or selecting Phrogram program found with in the Phrogram Companyfolders among the list of programs available through the Start menu. Lets create the blue stargraphic that you read about in the Lily Pad Basics


42/46


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 paneinto 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 EditMenu, and the Select All item on that menu. You will see that all code in the code editor is nowhighlighted. With all of the code highlighted this way, you can either press theDelete key onyour keyboard, or select the Edit menus Cut command to clear the existing code from CodeEditor.

We are now ready to apply Sprites, variables, and loops to new problems. If you do not yet feelcomfortable with these concepts, please go back to the beginning of this topic and read it again.


43/46


Lets start by creating the landing UFO.Enter this complete code into the Code Editor pane.

To run your program , click on the green arrow icon or press the F5 key to run yourPhrogram program. But before Phrogram actually shows you the results of your program, youwill be asked to save it. A Save your new program dialog box appears with the name you gaveyour program in the File name field, and the list of all of the file folders you saw in the FilesExplorer 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 thedifferences between your program and this example. When you change your code to match theexample 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 toexplain what each segment of code does.


44/46


Dive Deep


Identifiers

The name we gave to the integer variableufoYin the UFO program is called an identifier. Anidentifier or name of a variable, method, or function, and must start with either a letter or theunderscore character, and can consist of numbers, letters, and the underscore. An identifiercannot be a Keywordone of the words used in program commands.

Valid identifiers:

MonkeyI

_BallLocationXBall2_Position_X

Invalid Identiers:

2WaysToGo is invalid because it starts with a numberBall-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 useany combination of upper and lower case. For example, these are all valid statements whichassign a value to the variableMonkey:

Define MonkeyAsString = "Monkey"

MONKEY = "Small"MoNkEy = "Loud"monkey = "cute"

It is best, and a common programming practice, to use a convention called camel case whennaming variables, and when using them in Phrogram code. Camel case means the first letter ofevery 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 lineswhich use camel case are easier to read, because the camel case helps us distinguish the separatewords in the variable name:

Define MonkeyNameAsString = "George"

MONKEYNAME = "Sophie" These are bad examples!MoNkEyNaMe = "Joe"monkeyname = "Caesar"


45/46


Data Types

Simple Data Types

In the UFO program we used a variableufoYof type Integer. We selected the Integer typebecause 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 needsof the problem to be solved.

INTEGER Any whole number in the range from negative 2,147,483,648 to positive2,147,483,647, inclusive. Here are some examples:

Define iAsInteger = 1i = 5i = -323i= 12345678

STRING A unit of text represented by a sequence of characters surrounded by double quotes.Here are some examples:

Define MonkeyNameAsString = "George"MonkeyName = "Sophie"MonkeyName = "Joe"

MonkeyName = "Caesar"

BOOL A Boolean value which can contain the value TRUE or FALSE. Boolean expressions thatevaluate to 0 are treated as FALSE, all other values result in being evaluated as TRUE. Here aresome examples:

Define bAsBooleanb = True

b = False

DECIMAL A floating point or real number with up to 28 digits of decimal significance. Thisallows 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 dAsDecimal = 0.0d = 0.333333333333333333

d = -123456789.987654321d = 79228162514264337593543950335 // largest possible decimald = 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


46/46

graphics listed in the File Explorer panel of the Phrogram Window. They are located in theImages folder inside of the Media Files folder.

UFO.GIF

QUAD.GIF

PLANE.PNGSPIDER.PNG

BLUEBALL.PNG

If you create your own graphics or find others you want to use, you should save the graphic filein the My Documents \ My Phrogram Files \ Media Files \ Images folder. If you store yourgraphic files in this location, they will be visible in the Media Files \ Images folder in the FileExplorer 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 carefullyobserving, 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 thescreen as if it were on a race track. HINT: You will need 4 separate loops for this actiononefor each side of the track. Use 4 different Integer variable names and be sure to includecomments so you can more easily remember what lines of code perform what actions.

2. Now you are really ready to create your own animation program. You might consider havingmore than one Sprite on the screen. You will need to define more than one Sprite and eachwill need its own name. Professional programmers do a lot of thinking and planning beforethey start writing code. You will want to sketch your ideas and create a list of moves for theSprites before you begin. Trust meit will save you great deal of time in the long run. Dontforget to add comment lines to make the debugging easier.

You can continue experimenting and learning about computer programming by playing with theprogram samples in the Step-by-Step Tutorial folder at the top of the list of folders in the FileExplorer 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

Documents

Transcript of PhrogramTutorial KPL