Tag Archives: Processing

Freezing Time at SIGGRAPH

Andrew Glassner and I are running a fun little workshop called “Freezing Time” this Sunday, as part of Making @ SIGGRAPH. Details: 12:15-1:45 PM, South Hall G – Studio Workstation Area

We’ll be teaching how to use T2Z, “Time To Z”, a program that lets you generate a 2D animation and then turn it into a 3D printable sculpture. Participants will be provided workstations, and there will be high-speed 3D printers available after the workshop. Can’t make it? Read on… Can make it? Get the code now and have fun on the plane ride to Los Angeles.

T2Z takes the frames of your animation and stacks them to form a 3D sculpture. This three.js program shows the transition for a number of animations – use the mouse to change the camera’s view. It’ll also get your cooling fan cranking, if your GPU is like mine. Turning “cycles” down to 1 keeps it sane.

Here’s a simple example. This animation:

squib animation

gives this sculpture when you stack the frames:

The (self-imposed) challenge is to create an interesting, looping animation that also creates a visually-pleasing and printable sculpture. This example is pretty good, though the animation doesn’t quite perfectly loop. It would be easy enough to make it loop, but then we lose the base it can sit on. Tricky! If you want to hack on this code, it’s the Wobbly animation in T2Z.

There are many more examples in our gallery. I’ve been playing with the idea of data translation in general; you’ll see some experiments there. It’s been a great excuse for me to learn to use various tools at the local makerspace, Artisan’s Asylum, though I’ve not worked up the courage to actually use the plasma cutter yet. There are also plenty of fun & free tools for data manipulation, such as 123D Make, third-generation Photosynth, Sketchfab, 123D Catch, and on and on.

Even if you can’t attend the workshop, you can easily do this sort of experimentation at home. The T2Z code is free and open source, and well-documented. Companies such as Shapeways give you the ability to print high-quality models. We have lots of little animations in Animations.pde – go mess with them! There are also super-hacky “animations” at the end of this file: AnimatedGifReader turns a GIF into an STL 3D print file, FolderOfFramesReader does the same for a set of PNGs, and HeightField takes a grayscale image and uses the gray as a measure of height, e.g.

Skull3dRelief

skull_relief

Processing is entirely fun to hack on (Debugger? We don’t need no stinkin’ debugger, println() is our only friend). It’s Java plus stuff to make graphics easy. I like the fact that to run the program you are faced with the code – the system invites you to start poking at the program from the outset. Andrew wrote most of the code, being a Processing pro (he wrote a book and teaches a course in it; the first half of his course is free). Me, I translated the Marching Cubes code to Processing: each pixel of each image is treated as a voxel, the 3D model is from the isosurface formed between the objects and the background.

We hope to see you on Sunday! Or better yet, online, where we hope to see you sending us animations for the gallery and pull requests for code you’ve added.

Where did all this come from? Last year around May Andrew started making a series of looping GIFs using Processing, taking after the Bees & Bombs Tumblr feed. His goal was to make animations worth posting. These can now be found on Andrew’s Tumblr feed. Steve Drucker and I were the critics, over more than half a year.

During this time I was attending and organizing 3D printer meetups in the Boston area. Mark Stock pointed out a fascinating way of modeling: instead of explicitly using union operations on 3D models, the traditional CAD approach, he instead deposited objects into a large voxel grid. It’s much simpler and faster to figure out if a voxel is inside some given primitive vs. performing a union or other constructive solid geometry operation on a set of models. For example, computing the union of thousands upon thousands of spheres will bring most CAD modelers to their knees. Voxel in/out functions are trivial to compute for spheres, and Marching Cubes then guarantees a watertight, well-formed model with no geometric singularities, precision problems, etc. 3D printers themselves have limits to precision, so using voxels is a good match. Here’s an example of Mark’s work:

Dendrite by Mark Stock

So, for me, these two things combined: animations could be used to define voxels, and Marching Cubes used to generate 3D representations. I made an exceedingly slow GIF to STL converter in Perl and ran a bunch of Andrew’s GIFs through it. A few interesting forms turned up and that got me started on playing with what I call “323,” converting from some three-dimensional form of data (an animation being 2D plus time) to another (a sculpture).

Seeing the call for Making @ SIGGRAPH, we decided to go further and give a workshop on the process. The T2Z program that resulted is massively faster than my original Perl program, generating sculptures in a few seconds. It’s also much more usable, allowing you to make your own animations, hook up sliders to variables, and easily export them as GIFs, a set of PNGs, or a 3D STL model. Programming all this sucked up way more time than expected, and of course was highly addictive. Andrew made this Processing program do things that Nature did not intend (e.g., binary STL output and multi-window UI).

Personally, I find this whole design process entertaining. In idle moments (or at the dentist) I imagine what might make both an interesting animation and a worthwhile sculpture. It’s a fun way to think about modeling and animation, and one where my intuition doesn’t always pay off. The more I play, the more I learn.

Here’s a screenshot, to whet your appetite – click it for the full-size readable version:

screenshot

So download the thing, install Processing and three little libraries (easy!), and start sliding sliders, pushing buttons, and hacking code! And let us know what you find.

BTW, if you want just one link to bookmark, it’s this: http://bit.ly/t2zspot

Free/Cheap Processing Course by Andrew Glassner

Andrew Glassner has made an 8 week course about the graphics language Processing. The first half of the course is free; if you find you like it, the second half is just $25. Even if you don’t want to take the course, you should watch the 2.5 minute video at the site – beware, it may change your mind. The video gives a sense of the power of Processing and some of the wonderful things you can do with it. My small bit of experience with the language showed me it’s a nice way to quickly display and fiddle around with all sorts of graphical ideas. While I dabbled for a week, Andrew used it for half a decade and has made some fascinating programs. Any language that can have such a terrible name and still thrive in so many ways definitely has something going for it.

glassner1

“Processing” course from Andrew Glassner

Processing” is a Java-based language that has many built-in 2D drawing functions. It gives you all sorts of artistic control of what’s put on the screen. Andrew Glassner is now teaching an online course all about it:

Course page

Even if you don’t sign up for the course, you owe it to yourself to visit just for the eye candy, both the works at the top and the video itself. “Processing” could be the worst name for a language ever (try Googling it, for example), but it also produces some of the most lovely results with just a few lines of code. I played with it – fun! It’s also a great first programming language for non-programmers.

This course costs actual money, and I’m betting it’s worth it. Andrew is one of the best computer graphics lecturers out there. He’s also a bit of a perfectionist when it comes to the quality of his presentations. He wrote a book about Processing, so knows his subject extremely well and knows how to teach it. Finally, as part of the class, he’ll (and this blows my mind) create a video each week for each student of expert, personalized feedback on their work. What?!

It’s sort of a funny thing to have MOOCs get most of the attention lately. Online courses that cost money have been around for some time. Paying money makes a certain sense from a commitment standpoint, both on the part of the student and the teacher. If you seriously want to learn Processing (and along with it, the principles of 2D modeling, rendering, and animation) and value your time, this looks like a great place to go.

Processing screenshot, from Wikipedia:

Tools for Teaching

Today’s question: what tools are there for teaching about computer graphics and/or computer games? I don’t have a definitive answer, but I have a little experience with a few resources and know of others. That said, I haven’t sat down with more than two of them for any serious amount of time. Comments are most welcome, especially for pointers to better overviews than this!

I’ll list these roughly from the more basic to those for budding programmers and indies. That said, I think some languages, e.g. Processing, are easier to get into than the UI-driven systems, but some understanding of programming is needed. I’ve also ignored some famous examples like Logo, as it feels a bit crusty and limited to me. But, that’s me—let me know if you have a great counterexample.

Game Maker: My experience with this one is trying it with my younger son, and later Cornell using it in a 20 hour digital game design workshop for high-school students. It’s much more about games than graphics, graphical elements are 2D sprites and backdrops. Most of the focus is on events and constraints, as you might guess. Very UI oriented, no programming language involved per se – the UI controls are essentially a programming language of a sort. I have The Game Maker’s Apprentice, which is good in that it gets the person involved quickly, but bad in that little understanding gets transmitted early on (“now set this UI control to do this, now load that file there, now hit ‘run’; if it doesn’t run, walk through all the instructions carefully again”). From Amazon reviews, the book Getting Started in Game Maker might be better. There’s lots of example games and web support. Cost: free Lite version and trial Pro version, cost for Pro version (which you want) is $20.

Multimedia Fusion 2: this is an expanded and rebranded version of the company’s “Games Factory 2” product that includes all its functionality. It looks similar to Game Maker, but targeted for a somewhat more professional audience (and at a higher cost) overall. That said, there is a book for it, Game Creation for Teens. Cost: free trial download from 2008, lowest street price I saw for Multimedia Fusion 2 was $83.

Flash: Adobe’s popular animation & game programming system, famously unsupported by the iPad. Back some years ago the local science center used Macromedia Flash to teach grade-school kids about basic Flash animation. Now Adobe Flash Professional CS4 is used to create Flash. From what little I’ve read, the interface is daunting, but it’s actually pretty easy for beginners to get going. Animation is something that can be done purely with graphical tools, Actionscript 3 is a language for serious interactive applications. There’s of course a huge number of books, forums, and other online support. Cost: as low as $200.

Flixel: I’ve heard this mentioned twice as a worthwhile development resource for Flash. It provides some useful base classes in Actionscript 3 for making games, along with tutorials, a forum, etc. Cost: free.

Pygame: This is the first of a few language-oriented resources. Pygame is a bunch of modules to help in writing games in Python. One friend said he got a simple game running in less than two hours from download (but that’s him…), another acquaintance wasn’t so wild about it as he hit its limitations. 2D oriented, though there’s a few 3D experiments. This sounds like a pretty good, and super-cheap (free!), way to introduce kids to programming. I recall an article in CACM or IEEE Computer a year or so ago about Python, and it made an excellent point: Python is one of those great languages that is made for people who have never programmed before. Like Perl, it provides the ability to program and get something done quick without a lot of clutter, and so is a better candidate for the first programming language taught, not Java. Let the programmer have fun getting things done, then teach them about more elaborate computer science concepts and why these are useful. Python is pretty easy to learn: Andrew Glassner has a great introductory page – in a few hours you’ll know the basics. But I digress… Anyway, Pygame has lots of users, many of the projects are open source, there’s even a second edition of a free professionally-produced book about Pygame. Cost: free.

Processing: OK, if you’re sick of hearing about game programming resources, here you go. This is a little language suited for making cool 2D images. Key basic graphics concepts—transforms, curves, image manipulation—are encapsulated. Basic interaction is also a snap. It has a 3D component, but that part is fairly weak. I’ve played with it, it’s fun. Not meant for games; nonetheless, it’s possible. Much online support, and there are two popular books, here and here (the second has lots of additional material online). Cost: free.

Blitz Basic: I’ve heard of this one from a few people but have no direct experience. Definitely about programming, it uses BASIC, but enhanced with functions and types. It looks pretty full-featured, e.g. there’s joystick and networking support. BlitzPlus is the Windows 2D version, BlitzMax also runs on Macs and Linux, Blitz3D adds 3D support: camera, lighting, texturing (including bumps), CLOD terrain, etc. There’s an SDK for interfacing the 3D engine with C++, C#, etc.  Manuals are online, and there looks to be a healthy user community. There’s a German version of the website. Cost: free trials of all, prices range from $60 to $100 per product, with more for add-ons.

XNA: This is something of the 800-pound gorilla for programming-related graphics education. As an example, some teen programmers in the Cornell workshop were using XNA as the next step beyond Game Maker. A Microsoft initiative, it’s partially aimed at students and hobbyists. The base language is C# (Java on steroids, if you haven’t used it). There are lots of element and audiences for XNA, Wikipedia also covers the area well. There are many XNA resource sites and books out there (though I was sad to see Ziggyware is no more). Cost: free for the most part, depending on what you’re doing.

Ogre: Begun about a decade ago, this is from all reports a pretty nice graphics engine. It supports a huge number of effects and areas (I know developers who have consulted the codebase for ideas). There are lots of add-on libraries. It’s great for deep-down serious graphics education; Ogre is entirely open source (MIT license), so everything can be examined. Cost: free, and free licensing.

Unity: You’ve now definitely entered the Indie game developer zone. A 3D games development system I’ve heard mentioned by others as a way of learning. Multiplatform, now including the iPhone. Cost: free base version and trial of Pro version, which costs $1499; other pricing for iPhone version. There’s a book. Licensing for Indies has become free.

UDK: The Unreal Development Kit is the most popular game engine used for game development. Cost: free to download full version, 530 Mb of fun. Licensing cost: if you have to ask, you can’t afford it.

Torque: Torque is the second most popular development platform for game creators. For Torque, two versions exist, 2D and 3D. Three books are available on this engine. Cost: $250 for 2D, $1000 for 3D version, but educational pricing can be arranged.

Whew! OK, what did I forget? (Make sure to read the comments—some excellent additions there.)

Update 2/6/2010: Kodu, from Microsoft. For grade schoolers, it uses a visual language. Surprisingly, it’s in 3D, with a funky chiclet terrain system. Another interesting graphics programming tool is NodeBox 2, now in beta. It uses a node graph-based approached, see some examples here.

7 Things for July 18th

Well, I have 69 links stored up, wade through them here if you want unedited content. I’ve decided that getting 7 links out per post is a good round number, so here’s the first.

  • This is my screen-saver du jour: Pixel City (put the .scr file in your Windows directory). It’s fully described (along with source) in this great set of articles; if you’re too busy to read it all (though you should: it’s an fun read and he has some interesting insights), watch the video summary on that page. If you feel like researching the area of procedural modeling of cities more thoroughly, start here.
  • The book Real-Time Cameras, which is about camera control for games, now has a sample excerpt on Gamasutra.
  • NPR: Forrester Cole has two worthwhile GPU methods for deriving visible line segments for a set of edges (e.g., computing partial visibility of geometric lines). He’s put source code for his methods up at his site, the program “dpix“. Note: you’ll need Qt to compile & link.
  • The author of the Legalize Adulthood blog has recently had a number of posts on using DirectX10.
  • DirectX9 is still with us. Richard Thomson has a free draft of his book about DirectX 9 online. He knows what he’s about; witness his detailed pipeline posters. The bad news is that the book’s coverage of shaders is mostly about 1.X shaders (a walk down memory lane, if by “lane” you mean “horrifically complex assembly language”). The good news is that there’s some solid coverage of the theory and practice of vertex blending, for example. Anyway, grist for the mill – you might find something of use.
  • Around September I have 6 weeks off, so like every other programmer on the planet I’ve contemplated playing around with making a program for the iPhone. The economics are terrible for most developers, but I’d do it just for fun. It’s also interesting to see people thinking about what this new platform means for games. Naturally, Wolfenstein 3D, the “Hello World” of 3D games, has been ported. Andrew Glassner recommended this book for iPhone development, he said it’s the best one he found for beginners.
  • Speaking of Andrew, he pointed me at an interesting little language he’s been messing with, Processing. It’s essentially Java with a lot of built-in 2D (and to a lesser extent, 3D) graphics support: color, primitives, transforms, mouse control, lerps, window, etc., all right there and trivial to use. You can make fun little programs in just a page or two of code. That said, there are some very minor inconsistencies, like transparency not working against the background fill color. Pretty elaborate programs can be made, and it’s also handy for just drawing stuff easily via a program. Here’s a simple image I did in just a few lines, based on mouse moves:
    Processing output
That’s seven – ship it.