Sample code to use mouse wheel events in Processing.

Read the rest of this entry »

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.

To make sure I get your assignments in a way that I can run without problems, you need to follow the following guidelines when delivering an assignment:

• First give your sketch an appropriate name from inside Processing. The name should contain the code of the assignment and your full name. An example would be “EX03_MariusWatz”.
• Make sure all external data files (images, .vlw fonts etc.) are in the sketch, and that you can run it normally.
• If you use a non-standard library (i.e. Minim etc.), please include a copy of the library in your sketch folder.
• Use the “Show sketch folder” menu selection to find the sketch folder in your operating system. Use a ZIP or RAR archive application (WinRAR, Stuffit or similar) to make an archive of your sketch folder,
  giving the archive the same name as your sketch (i.e. “EX03_MariusWatz.zip”).
• Email it to me at marius at unlekker net.

You should always post at least a few screenshots of the assignment on Flickr.

Here is a simple example showing how to use unlekkerLib to output and input 3D geometry in STL format.

// STLBoxes.pde - demonstrates how to use unlekkerLib to
// import / export STL geometry data.
//
// Marius Watz - http://workshop.evolutionzone.com/

import unlekker.data.*;

STL stl;

public void setup() {
  size(400,400, P3D);
  frameRate(25);
  sphereDetail(12);
}

public void draw() {
  translate(width/2,height/2);

  if(frameCount==10) outputSTL();
  else if(frameCount==11) readSTL();
  if(frameCount<12) return;

  background(0);
  noStroke();
  lights();
  rotateY(radians(frameCount));
  rotateX(radians(frameCount*0.25f));
  fill(0,200,255, 128);
  stl.draw();

}

public void readSTL() {
  stl=new STL(this,"Boxes.stl");
  stl.normalize(400); // scale object
  stl.center(); // center it around world origin
}

public void outputSTL() {
  float rad;

  stl=(STL)beginRaw("unlekker.data.STL","Boxes.stl");
  for(int i=0; i<200; i++) {
    pushMatrix();
    translate(random(-200,200),0,-random(400));
    rotateX(((float)(int)random(6))*radians(30));
    rotateY(((float)(int)random(6))*radians(30));

    rad=random(5,25);
    if(random(100)>5) box(rad,random(50,200),rad);
    else sphere(rad);
    popMatrix();
  }
  endRaw();
}

Rapid prototyping objects generated with Processing and output to STL using unlekkerLib.

I’ve just uploaded a new Processing library called unlekkerLib. It is a collection of tools and code snippets I use frequently, and which I’ve now just barely cleaned up enough for other people to use. Instead of releasing them piece by piece, I’ve decided to bundle them together in a package hierarchy.

The main reason I decided to release it now is the STL export code I’ve written for my rapid prototyping projects. Several people have asked for the code, so I wanted to get it out there for you to play with. Obviously, it works as well with Processing as it does with regular Java.

Caveat emptor:There’s not much documentation but I do provide the source code. This is v.0001 - the very first release, so it’s pretty basic. See below for an idea of what the library contains. Right now the most exciting new component is the unlekker.data.STL class, which supports export and import of STL stereolithography files for rapid prototyping. Have a look at the Javadoc for more details.

Updates will appear here: http://workshop.evolutionzone.com/unlekkerlib/.

Read the rest of this entry »

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 »

I just added a Flickr badge to Generator.x using the excellent phpFlickr library. The code to retrieve the images from the Generator.x Flickr group is less than 20 lines. I turned it into a function and put inside a basic WP plugin shell, giving me a new API call for inserting into the sidebar.php template.

/*
Plugin Name: Generator.x Flickr utilities
Plugin URI: http://www.generatorx.no/
Description: Support utilities for Generator.x web
Version: 1.0
Author: Marius Watz
Author URI: http://www.generatorx.no/
*/

require_once("phpFlickr/phpFlickr.php");

function gxFlickrSidebar() {
  $f = new phpFlickr("API_KEY");
  $f->enableCache(
    "dbname",
    "mysql://username:password@host/dbname"
  );

  echo("<div class=\"gxflickrSidebar\">");
  echo("<div class=\"gxFlickrTitle\"><a href=
      \"http://flickr.com/groups/generatorx/\">".
      "» GX on Flickr:</a> Recent images</div>");

  // get photos using the Generator.x group's ID
  $photos = $f->groups_pools_getPhotos('59096658@N00', NULL, NULL, NULL, 12);

  foreach ((array)$photos['photo'] as $photo) {
    echo “<a href=http://www.flickr.com/photos/” . $photo['owner'] .
      “/” . $photo['id'] .”/in/pool-generatorx>”;
    echo “<img border=’0′ alt=’$photo[ownername]: $photo[title]‘ src=” .
      $f->buildPhotoURL($photo, “Square”) . “>”;
    echo “</a>”;
  }
  echo(”</div>”);
}

Once that’s done, all you need to do is insert the function call in your Wordpress template:

[..html..]
  if (is_home() || is_page()) {
    gxFlickrSidebar();
  }
[..html..]

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.

Marcus Wendt has published a new Processing library called libCollada, providing 3D export in the Collada 3D format. Collada is XML-based, and is intended to provide support both for basic 3D geometry and more advanced 3D authoring features like shaders and physics.

The obvious question is why another 3D format? Well, I guess the ones out there still aren’t good enough. Collada looks very complete, but most importantly is not tied to a single software vendor. It comes with a range of Open Source libraries for importing and exporting for various languages, and so could easily become a good choice for Open Source developers.

I recommed subscribing to Marcus’ Infostuka blog for technology- and design-related news. His own projects like Gestures on Sound show a great eye for computational work.

Code for 2D line intersection

I’ve been struggling with finding the intersection between two lines so that the resulting point actually lies on the specified line segments. Most line intersection formulas use an infinite line model, so the point will tend to lie on an infinite extension of the segments. Which is not what I wanted at all.

First I implemented Paul Bourke’s excellent breakdown of the math. Then after much experimentation I realized I could calculate the distances from the intersection point to the end points of the two lines, and then check their combined length against the length of the lines. If the lenghts are the same then the intersection point is actually on the line segment. Quod erat demonstrandum.

The code also checks to see if the two lines are parallel using the dot product of the two vectors. Considering that I’m actually fairly inept at math I feel like I’ve scored a minor victory.

Read the rest of this entry »