Jana Frank has posted a really great video on YouTube of the final presentation of the Merz Akademie Pathwaywoche workshop. Thank you, Jana! The projects included print output from generative systems, sound-reactive visuals and particle systems. See my Flickr set for more pictures of the presentation.

Be sure to check out Jana's illustrations, as well as her video of her own workshop.

Various artists and resources:

• Generator.x blog
• Processingblogs
• Visualcomplexity
• C.E.B. Reas: Process series
• Lia: Various works
• Turux.at
• Martin Wattenberg: Shape of Song etc.
• Robert Hodgins: Flight404

Flickr groups etc.

• Group: Processing
• Group: Generator.x
• Group: Digital fabrication
• Insect54: Design references
• Toxi: Labours of love
• FFFFound.com: General visual pornography
• FFFFound.com: My found

Non-digital artists

• Bridget Riley
• Victor Vasarely
• Esther Stocker

The files from this week’s workshop will be uploaded to the following URL:
http://workshop.evolutionzone.com/workshops/071105_merz/

Welcome to this workshop that is part of the Olhares de Outono festival.

We will use this week to look at the principles behind generative systems, and apply them to topics like animation, visual synthesis and practical production of digital media. We will be using the Open Source tool Processing, created by Ben Fry and Casey Reas.

I recommend that you go to Processing.org/books and download the sample PDF from Casey and Ben’s book “Processing: A Programming Handbook for Visual Designers and Artists”. It contains the first 100 pages of the book, and covers most of the basic commands in Processing.

I will post files from the workshop at the following URL:
http://workshop.evolutionzone.com/workshops/071029_porto

Processing links

• Processing.org
• Processing libraries
• Processing Flickr group
• Processingblogs.org
• Processing Hacks
• del.icio.us/tag/processing.org

Recommended blogs

• Generator.x
• Daniel Shiffman: Teaching at ITP / Blog
• Flight404 aka Robert Hodgins
• Toxi aka Karsten Schmidt

OOP tutorials

• Dan Shiffman: Particle systems
• JavaRanch: How my Dog learned Polymorphism
• The Java Tutorials: Object-Oriented Programming Concepts

ZZap! 64: Magazine covers

It’s maybe too close to the deadline of the computer game assignment to give much additional inspiration, but I found an interesting link to an online archive of ZZap! 64. A magazine devoted to Commodore computer games with an obvious focus on the C64, it’s now a treasure trove of retro computer game culture. In particular, the magazine covers are a sight to behold.

Another site I only found after giving the assignment is Dot Eaters, an excellent overview of classic video game history.

[ZZap! 64 link via the excellent 30gms.]

A little history
Since the first very computers, there have always been computer games. Games are in many ways the ultimate icons of computer culture. The computer excels at the kind of interactive simulation that games require, giving the user immediate response to her actions.

Early computer games tended to be iconic in their representations. Restricted by limited CPUs and low quality graphics, their worlds were often comprised of the most basic shapes: Lines, squares and dots. As a result, the focus was purely on gameplay: How do the elements interact, and what makes for an interesting game?

Examples of classic games are Tetris, Snake, Space Invaders, Spacewar and Pong. These are all visually primitive, but remain among the most addictive games around. They are quick to engage with and learn the principles of, but typically feature scaleable difficulty that means that even experienced players will find a challenge.

Later, pixel sprite games became popular, giving more potential for representation. The platform game model became more common. The focus was still on basic gameplay, but the visual environment became richer and there was more of a sense of a landscape in the games. Examples from this era include Dig Dug, Forbidden Forest, Gauntlet, Donkey Kong and Lode Runner.

Increasing computing power produced new genres of games, from advanced platform games (Prince of Persia) to new models like god games (Sim City, Populous etc.) Today, games are practically unlimited in their graphic complexity, and often tend to have strong narratives and advanced spatial environments. Meanwhile, 2D games are having a renaissance on mobile terminals.

Why you’re going to make a computer game
Computer games are perfect examples of interaction design. Games are interactive applications that potentially demonstrate a range of interesting qualities: Visual sophistication, advanced interaction and psychological aspects of experience design. A good game is usually immediately recognizable as such,

Games also present a complete model of a functional application. They take user input, process it against an internal model and output a visual (or multisensory) result in response. You’ll be able to use everything you’ve learned so far and put it to good use in an interactive situation.

A good game consist of several elements:

• A game model: What does the game challenge consist in, and how can the user win?
• Gameplay: What does the user control, and how does that control influence the game?
• Visual elements: What is the environment the game takes place in? Is the “world” constant, or does it develop over time?
• Scaleable difficulty: How does the game get more challenging as the user plays it?
• Addictive aspect: What will make the user come back for more?

Process

1. Find a group you want to work with. You should be two or three people per group.
2. Do some research on games. Look up some of the games mentioned in this introduction and see how they worked. Try to understand what makes them into classics.
3. Come up with a concept sketch. Describe the game idea on paper, explaining what the components are and how they will interact.
4. Do initial code sketches, not focusing too much on details but showing the basics of interaction.
5. Present these ideas to Marius and Mosse in individual talks on the morning of Friday 28.09.
6. By Wednesday 03.10 you should have a basic prototype ready. Marius will be available all the days Wednesday to Friday, but you will be working individually and there will be no proper teaching.
7. Final presentation is Friday 05.10 at 13:00. You should have sent the assignments to Marius on email before then.

After suggesting to my AHO class that they consider using RSS feeds in Processing, I realized that there is actually no built-in functionality to do so. The XML class built into Processing is too basic to handle feeds, it seems. To remedy the situation I’ve cooked up a quick hack using the ROME library for RSS / Atom syndication.

To run the code below you’ll need to download ROME and JDOM. Make a “code” subfolder in your sketch and paste “jdom.jar” and “rome-*.jar” into it, then run the code as given. The FeedReader and FeedEntry convenience classes take care of parsing the feed and returning the entries with the most common fields included. Error checking is rudimentary, however.

Read the rest of this entry »

Smart screensavers: SETI@home / Electric Sheep

After last week’s assignments you should be ready to tackle a more complex application. Our test case will be a screensaver. What is the essential nature of the screensaver? Is it just pretty graphics, or could it be a medium for information?

Screensavers serve several functions:

1. They save screens. Literally, they prevent phosphor burnout on CRT screens. On LCD screens they’re not quite so useful in this respect, since it’s healthier for the screen to power down than to stay on.
2. They lighten up the office environment, and even entertain people with their endless animations.
3. In a well-regulated office or school environment with little room for self-expression, having a special screensaver can be the equivalent of wearing a T-shirt with a band name on it. People customize their technology because it’s an expression of their identity.
4. For more information on screensavers, see Wikipedia: Screensaver and Wikipedia: After Dark

Generative screensavers
To the frustration of many digital artists, screensavers have much in common with generative art. They often rely on some kind of ruleset to allow infinite animation and to avoid burning a single image into the screen because of repetition. Many classic screensavers use mathematical formulas like Beziers or Lissajous curves. But most screensavers are created by programmers, not designers, hence the bad reputation they have as cultural artifacts.

Smart screensavers
Recently, screensavers have gotten a whole lot smarter. The SETI@home screensaver is in reality a client for a distributed computing platform trying to find signs of intelligent life in outer space. Scott Draves’ Electric Sheep is also a distributed computing client, but it aims to create life rather than find it in space. By letting it run on your computer you’re taking part in a massive genetic algorithm aiming to produce interesting fractal animations.

Widgets: Apple’s Dashboard and Yahoo Widgets

What about widgets?
Widgets are simple mini-applications that have been gaining in popularity since the introduction of Apple’s Dashboard. Many widgets are interactive, such as calculators or notepads. But others are information gathering devices, listening to RSS streams and other forms of online information and delivering it to the user. Could we mix our screensaver metaphor with the idea of a widget? What kind of information gathering device could a screensaver be?

Coding tips

• If you’re making an animation that is meant to run forever without obvious repetition, you need some kind of random behavior. Consider using state counters with random intervals.
• Even better: Try using noise() instead of random(). noise() produces a continuously fluctuating random value that can be used to produce smooth animations.
• If you’re interested in doing information gathering, take a look at this blog post. It shows how to use the del.icio.us API with Processing. The openStream() function can also be used to read web pages from URLs, it’s not well-documented but there is an example here.

Next week I’m not teaching, so instead I want you to work on the exercises given below. You will have a teaching assistant and maybe sometimes Mosse to help out. Also, the Urban Interface conference is warmly recommended. It’s free, but you should sign up for it in advance.

1. Social software: Sign up for Flickr. Join the AHO Interaction Design group. Post a link to your blog there.
2. Social software: Find 3 blogs you like that are related to interaction design. Post the links to the AHO Interaction Design group. Set up a feedreader like Google Reader, Newsgator or similar and subscribe to the feeds of those blogs.
3. Random composition (EX02): Create two compositions. One should be based on principle of order and regularity. The other should manifest chaos. Be particular about color. Consider transparency as a way to add depth. Save a representative image from each sketch and post them to Flickr. Prefix the filename with “EX02″.
4. User interaction (EX03): Create a drawing tool where the gesture of the user is used to draw images. Don’t be literal, but rather interpret the user’s input to control a dynamic drawing system. The user should still have a sense of control, however. Draw a representative image and post them to Flickr. Prefix the filename with “EX03″

For the next month I am teaching a foundation in computational aesthetics at Oslo School of Architecture and Design (AHO). Files from the lessons can be found here:
workshops/070905_aho/

There is also a new Flickr group that we will use to support the work:
Flickr: AHO Interaction Design.