Phrogram as presented at SIGGRAPH 2006

This is a quick introduction to the capabilities of Phrogram, including the demos (in the form of screenshots and video clips). I will add some of comments. These demos are comments are effectively what I presented to SIGGRAPH 2006 last Thursday – though of course, that was a live demo.

This content is also available as the home page at www.phrogram.com while we finish implementing that new site for a September release.

Kid’s Programming Language was initially designed for 10 to 14 year olds to get started with programming. Phrogram is a new product based on KPL, which is appropriate for anyone 10 years or older, from beginning programmers to experienced, as you will see from the examples below.

The KidsProgrammingLanguage.com site will remain up and cross-linked with this new Phrogram.com site. Both products will continue to be available, and will be supported from this site.

Phrogram is a fully functional programming environment, and is far more fun, productive and easy to use than any other programming environment in the world today. It’s designed specifically to help beginners get started – but as you’ll see below, it is very capable, and even experienced programmers will be able to write fun programs more quickly in Phrogram. There are years of learning and development of computer science skills available in Phrogram!

The freeware version of Phrogram will include all examples you see below as open, educational and reusable source code – as well as over 100 other open source examples. These particular examples are the ones I presented at SIGGRAPH 2006 in Boston.

Let’s start with a screenshot of the IDE (KPL v 2 is being rebranded to Phrogram for the September release). This screenshot also shows the complete code of a simple program to display a graphical UFO sprite on the screen.

Phrogram IDE and code exampleAs you can see, Phrogram code is as much like English as we could make it, so that it is as easy as possible to learn and to use. Even so, this is a real class-based programming language that can be compiled into executable programs that you can share with others. Making it as much like English as possible is one of our most important features – and it is the feature with most makes it possible for us to say that anyone who can read and type can learn how to program with Phrogram. Tutorials are available to help beginners get started – and much more tutorial, curriculum and learning material is under development.

This first example below shows a sprite in action. This particular program is only 19 instructions in length, but it displays a graphical sprite and allows keyboard control of that sprite by the user. You can click on the screenshot to view an AVI movie of the program in action (3 megs in size). This particular movie is larger than most below because the spider is moving rapidly around the screen:

Phrogram Logo Style SpritesThe next example required 34 instructions, and displays an animated, rotating UFO sprite on the screen, and again allows for keyboard control of the UFO. The screenshot doesn’t show much, but clicking on it will display the AVI video that does (390K in size):

Phrogram Keyboard-Controlled Animated SpriteNext is where a lot of people get really excited about Phrogram! This example requires only 37 instructions, and displays a 3D spaceship model and again allows for keyboard control of the spaceship as it flies. Clicking on the screenshot will show an AVI video of the moving spaceship (10M in size):

Phrogram Keyboard-Controlled 3D ModelOur more complicated 3D example includes 2 complete castle models, randomly generated terrain, and a first-person 3D avatar who can move, climb, fly and fall anywhere in the scene. All that is done with only 125 English-readable instructions! Clicking on the screenshot will display the very large AVI video of this in action (50M in size):

Phrogram Big 3D SceneAllow me to make an important point about those last examples before moving on. Each of those examples uses GIF files or .X 3D model files to display what you see on the screen. Each of those files is specified by file name in one simple code instruction. If you have your own GIF or .X file, all you need to do to make your own art work in these examples is to change the file name in the code to match your file. That’s it! Click run, and that will be your sprite or your 3D model. This is the point and power of having source code available for well over a hundred useful and reusable examples within Phrogram.

Our next example is important for demonstrating that Phrogram is capable of much more than just the usual violent, male-oriented, explosion-filled death-and-destruction computer games. 😀 It’s capable of dynamic digital art, of interactive storytelling, of cartoons, and much more. This particular example was drawn, scripted and programmed by Jamey Friend. Jamey is a retired high school teacher, and has contributed many great example programs to the KPL / Phrogram community. She has a specific goal to help make sure that we include examples and content which are interesting to girls as well as to boys. Note that Phrogram supports sound files as well, so this could just as easily have been done with recorded “voice-overs”. Clicking on the screenshot will display the AVI video (1M in size):

Phrogram CartoonHere’s another example from Jamey Friend, which amazes me with how much functionality it provides for such a small number of lines of code. This program is a functional-if-simplified version of a Paint program – and it only requires 84 instructions!!! Clicking on the screenshot will display the AVI video (177K in size):

Phrogram Freehand DrawingPhrogram, since it is running on a computer after all, is also good for all things math and science. Here’s a Phrogram rendering of a Mandelbrot set. The great story about this one is that in Kid’s Programming Language – which is an interpreted language – it takes over 90 seconds to render this fractal. In Phrogram, which is a fully compiled language – this takes less than 2 seconds. Yes, going from interpreted KPL to compiled Phrogram resulted in a performance increase of over 6000%. Clicking on the screenshot will display the AVI video (243K in size):

Phrogram MandelbrotPhrogram includes dozens of other math- and physics-oriented examples. Here’s one which requires only 54 instructions, and allows a mouse-controlled circle to realistically push another circle around the screen. Guys and girls who want to write physics engines for cool games don’t start by doing that – they start with cool examples like this one. Clicking on the screenshot will display the AVI video (719K in size):

Phrogram Circle PhysicsSpringy Thingy is a more complicated and interesting example of making physics work realistically in Phrogram. It’s also a lot of fun! Clicking on the screenshot will display the (large) AVI video (5.2M in size):

Phrogram Springy ThingyHere’s an example which shows that Phrogram is completely capable of being used in real Computer Science curriculum at the university level. In my second year of computer science study, I took my first graphics course, and learned about defining models as points and lines, and using matrix multiplication to resize, rotate and move them. This example does exactly that, using models much more complicated and interesting that my cube and pyramid were. This is not using DirectX to render this 3D, as the examples above did. This is Phrogram as a 3D rendering engine. The program loads the point-and-line information from a text file, and uses matrix multiplication to spin it on the screen, doing those calculations and rendering in real-time. And as with all other Phrogram examples, the open source code is there for learning, tinkering and reuse. Clicking on the screenshot will display the AVI video (628K in size):

Phrogram as 3D rendering engineHere’s an example contributed for our use, but copyright (c) Matthew Wormington 2006. It proves the point that Phrogram has lots of applicability for modeling, simulation and visualization, because Phrogram makes it so easy to program graphics. This is a very nice implementation of Conway’s Game of Life in Phrogram. It again shows just how much Phrogram is capable of – note the drop shadow and click animation on the buttons. Clicking on the screenshot will display the AVI video (247K in size):

Phrogram Game Of LifeLast example, and all about fun! This was originally written by Larry Serflaten in Kid’s Programming Language, and was easy to port over to Phrogram’s new and improved mouse handling. It’s a clone of the old arcade hit Missile Command. Much more important news is coming soon about the use of Phrogram for casual and even professional game development. But for now, you’ll hopefully agree this is a good example of what Phrogram is already capable of in the game development space. Clicking on the screenshot will display the AVI video (224K in size):

Phrogram Missile Command

Advertisements

5 thoughts on “Phrogram as presented at SIGGRAPH 2006

  1. […] Go Will! Reminds me of someone trying to come up with a programming environment with the power of Visual Studio, but that a casual beginner can approach. WW: Because it’s procedural, we can reduce what players do to a fairly small number of parameters, so your creature is, maybe 3 megabytes in size, and you can compress that down to 3 kilobytes. Which means that we can send it over the Net very cheaply. We also store a huge database on [players’] local hard drives, or cache them very cheaply as well. So, when players make these creatures, we’re actually sucking [the creatures] up onto our server and using them to repopulate everyone else’s world. […]

  2. Zach says:

    Hi, I just tried to copy the code from the spider movement demo you have higher up on the page and it didn’t recognize the Define Spider As Sprite part, can you please help me out and tell me how to make it work? Thank you.

  3. theschwartz says:

    Hi Zach – you can email me at jons@phrogram.com if you’d like, or go to the support forums at http://www.phrogram.com. If you tried typing the example shown, you’ll be missing part of the right end of the instruction you mention. I’ll paste it below as well, but allow me to mention that this example is number 10 in the “Step by Step Tutorial” folder in Phrogram. Here are the instructions, but I’m not sure whether comment will make a mess of their formatting:

    Program LOGO_Style_Sprites

    Method Main()

    Define Spider As Sprite = LoadSprite( “Spider”, “SpiderDown.png” )

    Spider.MoveTo( 275, 0 )
    Spider.Visible = True

    Define speed As Decimal = 4 // Change the to suit your style 😉

    While Not Keyboard.IsKeyDown( Keys.Escape )

    If Keyboard.IsKeyDown( Keys.Up ) Then
    Spider.Forward( speed )
    End If

    If Keyboard.IsKeyDown( Keys.Left ) Then
    Spider.TurnLeft( speed / 2 )
    Else If Keyboard.IsKeyDown( Keys.Right ) Then
    Spider.TurnRight( speed / 2 )
    End If

    Delay(1)

    End While

    End Method

    End Program

  4. […] world’s most powerful supercomputer is now a video game consoleWhat the heck is a Vitruvian Phrog ?Phrogram as presented at SIGGRAPH 2006Study says: There are SIX different types of gamersVideo Games Conquer […]

  5. […] – bookmarked by 4 members originally found by cmduke on 2008-08-23 Comment on Phrogram as presented at SIGGRAPH 2006 by Schools’ Tech … https://theschwartz.wordpress.com/2006/08/05/phrogram-as-presented-at-siggraph-2006/#comment-10414 […]

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: