teaching graphics programming

[FireGryphon]

I teach in a public school here in NYC, and my tech class does cool stuff like audio editing, learning MS Office, filming and and editing movies, etc. but nothing in the way of programming. I did teach them binary, but that's about as 'difficult' as I've gotten with them this year. I'm curious if I can get them to do some easy graphics programming, even if it's just drawing abstract lines and colors on the screen -- something easy for absolute beginners to pick up, will give a good intro to programming, and will yield rewarding results. Most of my programming experience is in data management, so not really graphics oriented. Oh yes, and getting the language for free is necessary (i.e. I can't purchase 30 copies of Maya and have kids work on that, if that's what you're thinking).

I really know nothing about graphics programming, but it would be great to teach my kids a few things and let their imaginations run wild. I'm looking for some direction here. I'll gladly teach myself a language to then teach to my kids, but I haven't the time to search around for a suitable language to start with. Any ideas here are greatly appreciated!

[UberGerbil]

Well, back in the day you would've started with Logo, but I don't really see the point anymore. How old are these kids?

I'd love to point you at XNA or some of the Java gaming kits, both of which have free development environments, but you fall off the deep end into real programming pretty quickly. Flash might be the most satisfying "real" tool in terms of getting things to happen on the screen with minimal effort, but I don't know if there's a free way to do Flash development. Interpreters are generally easier for beginners than compilers (more feedback, interactive development) which leads to Python and Pygame (there's even a book about game programming in Python).

[Saber Cherry]

I don't think graphics programming is easy, or that anyone should be exposed to it before learning a bit about real programming (numbers, variables, and functions).

That said, I was taught Turtle language in 5th grade and it didn't catch on. Not sure if it still exists. GW-BASIC in 7th grade went much better and I taught myself the graphics once I understood how the actual programming worked.

In my opinion, teaching graphics first is just as backwards as the typical school progression of Biology -> Chemistry -> Physics, when a proper understanding can only be developed by reversing that order. I understand that it is flashier and may catch the attention of more young kids, but I suspect that it will only be more interesting to the ones who won't pursue programming anyway... and less interesting to the ones who would.

As for a nice intro language, I like Java - it is free, very well documented with tons of official tutorials, very capable, very clear, very compatible, etc etc. But it is not at all easy to do graphics in Java like it is in GW-BASIC.

[bitvector]

I really know nothing about graphics programming, but it would be great to teach my kids a few things and let their imaginations run wild. I'm looking for some direction here. I'll gladly teach myself a language to then teach to my kids, but I haven't the time to search around for a suitable language to start with. Any ideas here are greatly appreciated!

Processing is really nice for this purpose, depending on the age of the kids. It's really easy to mock up amazingly slick looking demos in no time at all. See their Transparency example for instance (the page has it running as an applet) -- it's like 10 lines of code.

From Wikipedia: "Processing is an open source project initiated by C.E.B Reas and Benjamin Fry, formerly of the Aesthetics and Computation Group at the MIT Media Lab. It is 'a programming language and integrated development environment (IDE) built for the electronic arts and visual design communities', which aims to teach the basics of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks. One of the stated aims of Processing is to act as a tool to get non-programmers started with programming."

Alan Kay would yell at you loudly to make them use Squeak (it powers the Etoys programming environment for young kids on the OLPC). There might be some nice Python stuff too, but I don't know any off the top of my head.

[just brew it!]

Maybe Python? The Python Tkinter canvas widget is a pretty reasonable way to do basic graphics. It's also Open Source and cross-platform, if you want to use it as an opportunity to introduce the students to those concepts as well. A pre-written skeletal Python app with a method which can be filled in with arbitrary code to draw stuff on a canvas would suit your purposes, I think.

Or install POV-ray, and have them create some basic ray traced scenes using POV-ray SDL? Again, a skeletal SDL script could be provided, with the students filling in the description of the objects to be rendered. (Hmm, how fast are the PCs? They need to be something fairly modern if you want POV-ray to finish rendering a scene in a reasonable amount of time.)

I could probably help with getting the skeletal script(s) set up for either one of these.

[steelcity_ballin]

My honest opinion is that if you're "teaching" them office, any real programming will be above their pay grade. That said, I believe BASIC can draw lines and the syntax is fairly simple as far as complexity goes. Flash has trials but the syntax can be hefty for someone new to programming and most of the animation early on is done with a timeline and the tools within, not so much actionscript (at first).

[JdL]

How about Ruby on Rails? Basics come easy and results come quick. Perfect for kids, and you can easily introduce them to concepts such as servers, databases, and applications.

[ApockofFork]

In high school they started us off by teaching us Netlogo http://ccl.northwestern.edu/netlogo/ It has graphics so its more interactive. Plus you can instantly write code and then see it run. I don't remember the specifics that well but you can very easily make models of systems like wolves eating sheep that multiply or things gathering together. Its all very simple, clear, and easy. Give it a look.

[FireGryphon]

Thanks for the responses, guys.

The kids in my tech class are 9th graders. We're working with Dell Latitude laptops that are about a year old (I forget the exact specs, but they're pretty fast and run Windows XP). Processing, Python, NetLogo, and POV-Ray all look like contenders at the moment. I'll look into them and see if they'd fit my purposes. I learned Logo on an Apple IIe back in the day. I'm curious what I'll find. Hopefully I can design a good unit around one of these and sell the idea to the tech coordinator. If something comes of this, or if I have any other questions, I'll keep you guys updated. Thanks!

[just brew it!]

Thinking a bit about my previous suggestions... Python has the advantage that you can write interactive apps in it. POV-ray -- while it has the incredible geeky coolness factor of ray tracing -- may be less exciting for 9th graders since it is non-interactive (define the scene, then wait for it to render). Heck, maybe you can work both of them in, all the tools are free!

Here's a quickie demonstration of how to use a Python/Tkinter canvas object: http://justbrewit.net/trstuff/canvas.py

Run it, and it brings up an 800x800 square window. When you click the left mouse button in the window, it draws concentric squares; when you click the right mouse button it draws concentric circles. Most of the code is to set up the canvas object and handle the mouse events; the actual drawing code consists of just the Draw1 and Draw2 methods (6 lines of code, not counting comments).

With a little more thought the canvas demo could be modularized better, with all the setup stuff in a module which defines a base class that you just include and derive from. This would allow the application script to be much shorter.

Python interpreter download page: http://python.org/download/releases/2.5.2/

The demo works on Linux too (most distros install the base Python interpreter by default, but you may need to explicitly install the tkinter package from your distro's repository).

[BobbinThreadbare]

Maybe Python? The Python Tkinter canvas widget is a pretty reasonable way to do basic graphics. It's also Open Source and cross-platform, if you want to use it as an opportunity to introduce the students to those concepts as well. A pre-written skeletal Python app with a method which can be filled in with arbitrary code to draw stuff on a canvas would suit your purposes, I think.

There is also visual python which offers a pretty easy 3D API. I did a project with it my senior year where you played pool.

[Corith]

Try and teach them POVRay. Some of the kids will inherently get it, which will be good. I wasn't good at manipulating 3D objects until I took Linear Algebra and finally understood how matricies are used to represent objects in a 3D world.

[Sparrow]

This may just be my own prejudice speaking but I wish I would have been exposed to REAL programming a little bit sooner instead of being spoonfed things like Logo. You hit the wall REALLY fast with something like that and you're left wondering "what do I do now?" So from that perspective I wish I could have had something like Python back then. (Even though Java is free, it's one of the more verbose and pedantic languages out there. Which is fine if your job is to write readable, maintainable code... but not so fine if you just want to experiment.)

I wouldn't worry too much about giving them something "so easy an idiot could do it." Challenge makes things more rewarding. After all, the idea is to not to teach them how to draw squares and circles, but to open their minds to the wonders of programming, right?

[just brew it!]

Fun with POV-ray...

Code: Select all

global_settings { assumed_gamma .9 number_of_waves 3 max_trace_level 10 }

#include "colors.inc"
#include "shapes.inc"
#include "textures.inc"
#include "woods.inc"
#include "stones.inc"

camera {
   location <100.0, 120.0, -240.0>
   look_at <0, 20, 0>
   angle 35
}

light_source { <40.0, 200.0, -200.0> color White }

#declare T_Glass = texture {
   pigment { color red 1.0 green 1.0 blue 1.0 filter 0.99 }
   finish {
      ambient 0.0
      diffuse 0.0
      reflection 0.1
      phong 0.3
      phong_size 90
   }
}

#declare I_Glass =
   interior {
      ior 1.25
      caustics 2
      fade_distance 40
      fade_power 1
   }

#declare Logo = union {
  text {
    ttf "ariblk.ttf" "The" 1, 0
   scale <0.4 0.4 .4>
    translate <-1.6, 0.25, -.3>
  }

  text {
    ttf "ariblk.ttf" "Tech" .3, 0
    translate <-0.8, 0, -.3>
  }
  text {
    ttf "ariblk.ttf" "Report" .3, 0
    translate <-1.7, -.9, -.3>
  }
}

#declare SlabLogo = union {
    object { Logo  texture { T_Stone9 }  finish { diffuse 1 specular 0.5 roughness .1}}
    object { Cube scale < 2.0, 2.0, .15> texture { T_Stone41 }
  finish { diffuse 1 specular 0.5 roughness .05}              }
} 

#declare CrystalBall = intersection {
   object { sphere { <0, 0, 0>, 1 } }
   object { sphere { <0, 0, 0>, 0.9 } inverse }
   texture { T_Glass }
   interior { I_Glass }
}

fog { distance 200 color Black }
                       
plane {
   y, 0
   texture { T_Wood2 scale 7 }
   finish { reflection 0.25  }
}

object { SlabLogo scale 20 translate <0, 40, 0> }
object { CrystalBall scale 10 translate <20, 35, -25> }


[Flying Fox]

Wow that's nice JBI. I don't seem to find "Tech Report" in the code?

May be I should pick up this POV-Ray stuff. I have no idea the code size is that small? Not that I know anything about "Graphics programming" though (at first I thought it's more 2D rectangles, circles and stuff ). Part of the reason I took engineering instead of mathematics is because of the "easier" math.

[Usacomp2k3]

Wow that's nice JBI. I don't seem to find "Tech Report" in the code?

It's split up into the 3 separate words.

[just brew it!]

Wow that's nice JBI. I don't seem to find "Tech Report" in the code?

Look for the section that starts with "#declare Logo = union". Each word is rendered separately, so the complete string "Tech Report" indeed does not appear in the code as such -- the strings "Tech" and "Report" appear separately.

May be I should pick up this POV-Ray stuff. I have no idea the code size is that small? Not that I know anything about "Graphics programming" though (at first I thought it's more 2D rectangles, circles and stuff ). Part of the reason I took engineering instead of mathematics is because of the "easier" math.

As I sort of noted above, POV-Ray is a very specialized type of programming. You don't create interactive applications with it; you code a description of a scene using POV-Ray SDL; you describe solid objects in the scene using a form of CSG (constructive solid geometry), and specify the optical properties of the materials. The ray tracing engine then renders the scene (slowly -- we're talking seconds or even minutes per frame) based on your description.

If you want to do interactive stuff, you need to learn a graphics API... the Python stuff I described previously is a fairly simple example of a (2D) graphics API. At the other end of the complexity spectrum you've got monster 3D APIs like OpenGL and Direct3D.

Edit: I tried to illustrate some of the strengths of ray tracing in the example. Semi-reflective surfaces (polished wood), and optical refraction (glass sphere). Since ray tracing is based on modeling the optical properties of the materials, this stuff comes almost "for free" from a coding standpoint, but is rather computationally intensive to render.

Edit 2: I love how you can see a refracted and reflected image of part of the logo (refracted through the sphere then reflected off the polished wood) at the very bottom of the image. That's the sort of stuff that ray tracing really shines at!

[Flying Fox]

Replace that bubble with a magnifying glass we will have a 3D version of TR's new logo?

[cheesyking]

If free is required then don't forget blender
http://www.blender.org/features-gallery/features/

I've never had the time to learn it properly and it is a little unusual to use (it's a bit like playing an FPS with keyboard and mouse than using a normal application)

I've always been very impressed with how polished it feels.

[Turkina]

I'm gonna throw in Second Life and LInden Scripting Language here. The IT guys at your school may hate me for it, but I am sure you can find someone with some (private) education-reserved land for your class to use (or use the teen grid?). 3D objects can be created quickly and easily, then scripted using LSL (which is an extensible state-based language with tons of built in functions).

~Turkina

[just brew it!]

Replace that bubble with a magnifying glass we will have a 3D version of TR's new logo?

Yup, that's the sort of effect I was going for. Didn't have time last night to model a magnifying glass (I'm still a POV-Ray n00b so it typically takes me quite a few tries for anything more complex than the basic POV-Ray shapes), so I figured a simple glass bubble was the next best thing.

[just brew it!]

...and here it is with the magnifying glass! I know very little about lenses, and crudely modeled the lens as an ellipsoid (flattened sphere), hence the optical distortion at the edges. Note how the magnifier is built up out of its component bits -- ring, handle, and lens.

Code: Select all

global_settings { assumed_gamma .9 number_of_waves 3 max_trace_level 10 }

#include "colors.inc"
#include "shapes.inc"
#include "textures.inc"
#include "woods.inc"
#include "stones.inc"
#include "metals.inc"

camera {
   location <100.0, 120.0, -240.0>
   look_at <0, 20, 0>
   angle 35
}

light_source { <40.0, 200.0, -200.0> color White }

#declare T_Glass = texture {
   pigment { color red 1.0 green 1.0 blue 1.0 filter 0.99 }
   finish {
      ambient 0.0
      diffuse 0.0
      reflection 0.1
      phong 0.3
      phong_size 90
   }
}

#declare I_Glass =
   interior {
      ior 1.5
      caustics 2
      fade_distance 40
      fade_power 1
   }

#declare Logo = union {
  text {
    ttf "ariblk.ttf" "The" 1, 0
   scale <0.4 0.4 .4>
    translate <-1.6, 0.25, -.3>
  }

  text {
    ttf "ariblk.ttf" "Tech" .3, 0
    translate <-0.8, 0, -.3>
  }
  text {
    ttf "ariblk.ttf" "Report" .3, 0
    translate <-1.7, -.9, -.3>
  }
}

#declare SlabLogo = union {
    object { Logo  texture { T_Stone9 }  finish { diffuse 1 specular 0.5 roughness .1}}
    object { Cube scale < 2.0, 2.0, .15> texture { T_Stone41 }
  finish { diffuse 1 specular 0.5 roughness .05}              }
} 

#declare Ring = object {
    intersection {
        object { cylinder { <0, -.15, 0>, <0, .15, 0>, 1.05 } }
        object { cylinder { <0, -.151, 0>, <0, .151, 0>, 1 } inverse }
    }   
}

#declare Handle = object {
    cylinder { <0, 0, 0>, <2.5, 0, 0>, .125 }
}

#declare Lens = object {
    sphere { <0, 0, 0>, 1 }
    scale < 1.0, .05, 1.0>
}

#declare Magnifier = union {
    object { Ring texture { T_Chrome_5E } finish { reflection 0.5 } }
    object { Handle texture { T_Chrome_5E } finish { reflection 0.5 } translate <1, 0, 0 > }
    object { Lens texture { T_Glass } interior { I_Glass } }
}   

fog { distance 200 color Black }
                       
plane {
   y, 0
   texture { T_Wood2 scale 7 }
   finish { reflection 0.25  }
}

object { SlabLogo scale 20 translate <0, 40, 0> }
object { Magnifier scale 10 rotate < 90, 0, -35 > translate <22, 37, -30> }


[ssidbroadcast]

Easy. Just teach them Hypercard… oh wait…

[SecretSquirrel]

...and here it is with the magnifying glass! I know very little about lenses, and crudely modeled the lens as an ellipsoid (flattened sphere), hence the optical distortion at the edges. Note how the magnifier is built up out of its component bits -- ring, handle, and lens.

The simplest lens would be to take a sphere and cut of a section (sphere - cube), duplicate that and sandwich together to give you a spherical convex-convex lens. You still get some distortion around the edges, but you would have to model an aspherical lens to correct that, and I doubt it would be worth it.

Back on topic... I'm afraid I don't have a good suggestion. Most real languages will probably take too much effort to get the basic programming concepts necessary to do any graphics of any sort.

--SS

[just brew it!]

Back on topic... I'm afraid I don't have a good suggestion. Most real languages will probably take too much effort to get the basic programming concepts necessary to do any graphics of any sort.

Hmm... I still think Python would work, provided they are given a skeletal script to use as a template.

[PRIME1]

The first "GPU Gems" book is now available free online.

http://developer.nvidia.com/object/gpu_gems_home.html

GPU Gems is a compilation of articles covering practical real-time graphics techniques arising from the research and practice of cutting-edge developers. It focuses on the programmable graphics pipeline available in today's graphics processing units (GPUs) and highlights quick and dirty tricks used by leading developers, as well as fundamental, performance-conscious techniques for creating advanced visual effects. The contributors and editors, collectively, bring countless years of experience to enlighten and propel the reader into the fascinating world of programmable real-time graphics.

[UberGerbil]

The first "GPU Gems" book is now available free online.

And now we're getting well afield of what you'd use to introduce 9th graders to the basics of programming.

[bryanl]

Biology -> Chemistry -> Physics, when a proper understanding can only be developed by reversing that order.

oh, yes. this one. Forget Piaget. Think only content, not cognitive development. <snide> after all, everyone knows science is just a collection of facts,</snide>

ok.ok. back to k-12 teaching about computer thingies.

As far as cognitive development towards programming, teach algebra and typing. All else is only motivational.

For graphics programming, I'd start with a digital camera and GIMP. The theme is graphic arts for a school yearbook or some such. Along the way the need for learning about color, picture representation, lighting, composition, and so on is stimulated. Then you can get into macros to manipulate pictures. Then you start to get into what is going on. Then you can start to think about graphics programming.

but, then, that doesn't seem to be what the market wants. the market wants magic bullets and sees learning and skill development as mechanical process

whoops, getting cynical again. oh well

[Flying Fox]

Biology -> Chemistry -> Physics, when a proper understanding can only be developed by reversing that order.

oh, yes. this one. Forget Piaget. Think only content, not cognitive development. <snide> after all, everyone knows science is just a collection of facts,</snide>

ok.ok. back to k-12 teaching about computer thingies.

As far as cognitive development towards programming, teach algebra and typing. All else is only motivational.

For graphics programming, I'd start with a digital camera and GIMP. The theme is graphic arts for a school yearbook or some such. Along the way the need for learning about color, picture representation, lighting, composition, and so on is stimulated. Then you can get into macros to manipulate pictures. Then you start to get into what is going on. Then you can start to think about graphics programming.

but, then, that doesn't seem to be what the market wants. the market wants magic bullets and sees learning and skill development as mechanical process

whoops, getting cynical again. oh well

It is "(3D) graphics programming" not "graphics and then programming (macros)", no?

[just brew it!]

Yeah, I was kind of thinking the same thing. Image manipulation and image creation (or interactive graphics) are rather different things.