Most photographers seem to want the most minimal of sites, a white or dark grey page with their work in the middle. I felt it was more appropriate to give it just a little bit more color and give visitors a good impression of Rachel’s work as soon as they open the page, something few photographer’s sites do. WIth that in mind, her portfolio is on the front page with large images linking to sets of images.

www.rachelverhaaren.com

Some nice javascript touches are built with jQuery and the site is powered by WordPress.

First go play it! Then come back here if you’d like to know a little more about how the game was created.

I’m not one to preface my work, but I would like to mention that I am not a gamer in any respect. This being said, I may not be aware of all the game conventions I should be following, despite a good amount of ‘research’. If you have any tips for this or future games, feedback is always appreciated. You can leave public comments here or send me feedback through the Pulsus contact form.

Recently, thanks to a class with Jason Corace, I’ve become interested in games as interactive systems. In the same class I developed a card game and created Pulsus for my final project.

The Game

The game, Pulsus, is a puzzle game about particle systems. Players have to place objects to direct particles from emitters into goals. While it is a puzzle game, it is also about exploring a dynamic system.

In the game, players solve puzzles by placing objects onto the stage which effect the way the particles move. In each level the particles must be moved from particle emitters into goal points. Different colored goals accept only particles of that color. Particles must hit the goal quickly enough to fill it up, but once it is complete is will remain filled. The colored force objects will attract their own color while repelling others. Grey objects interact with all particles in the same way.

Development

Designing the game, I went through many aesthetic possibilities and through many nuances of the gameplay and the interaction of the game’s components. The general trend, while developing the game, was to simplify the system as much as possible. Initially I planned on a number of different objects that could be used to manipulate the system, but it was evident in early user tests that there was enough that could be done with only the most basic objects.

In this collection of objects I explored many styles to try and construct a cohesive look for the game and interface elements, including some objects which were ultimately taken out of the game.

The various menus and screens were story-boarded and designed. Somewhat atypically, the game was designed and built simultaneously. The function of most elements evolved with testing through various iterations of the game and the visuals had to reflect the function.

The Sound

All of the sounds within the game were created in Pure Data with a few simple synthesizers I created. For most of the sound effects I used a patch with which I could control the envelope different harmonics and overtones of a basic pitch. For the background tones I used a polytonal synthesizer (pictured above). On the left side, keyboard inputs are mapped to a set of midi notes. Each note is passed into a sub-patch which generates the tone. In the middle are controls for the octave, pitch shift, and amplification. On the right (click on the image to enlarge) are graphs of the output, envelope, and waveform.

Some Early Prototypes

My first prototype was a simple set of paper icons. I played the computer. This was a simple test to see if the functions of the game were understandable and if basic puzzles could be solved.

This early prototype included the basic particle system upon which the game is based as well as the basic game elements, goals, emitters, and forces.

As usual, the script is built in Processing. Particles are generated by clicking on the screen and then they spread out pushing each other away. A slight perlin noise field gives the strands a more interesting motion and texture. Each frame is drawn successively on the screen, tracing the particles motion, without clearing the background. Each particle is rendered as a filled ellipse with a lighter transparent outline, creating a slightly 3d feel as the outlines get denser toward the edges.

To render the images with a higher resolution I created a global scale variable. The width and height of the applet are multiplied by this variable and then the scale function is called with that variable at the beginning of the draw loop. This lets me switch quickly between a manageable size to see what’s going on and the high res version. On my mac, entering expose fits the oversize window onto my screen. It’s far from a perfect system but it works. Exporting vectors is a much better rout, but this application is to complex for that to be feasible.

Now pictures. Click to see them bigger.

The result is a stack of rippling points flowing between each other. I first just rendered each wave as a thin bar, to make sure everything was working properly, and then added a color property to the wave class. I dropped the symmetry to avoid some unintended interpretations. The script runs much slower, as I should have expected. I’ll try and streamline things a little (although it’s already very simple) and put it onto my interactive site. I might just have to put some limits on it so people don’t crash their.

Now a bunch of pictures!

www.anthonymattox.com/interactive is a little site I’ve made to display my interactive works in one place. Take some time to explore the projects. I’ll keep adding more work as I create it as well as a number of other projects that still need to be cleaned up and put into the site.

Enjoy!

Most of the projects in it are created with processing and your browser will have to have the java plugin installed to run them. To run the 3d applets you will have to click trust in the dialogue box that appears. There still might be some bugs in the site so let me know if you have any issues.

I decided to write a script to add in the necessary HTML to color the code, which I could then paste into my site. Although this does add a fair amount more to the size of the HTML files on the site I decided it was the best way to go. A server side script, probably built into a WordPress Plugin, would be nice and easy to use, but it would be run every time the page was loaded and would be a load on the server. A JavaScript highlighter would also work well, but it would still be a large script anyway and it would add the hassle of browser inconsistencies and run time on slower browsers.

Since I was building this script I wanted to make it available to others. The Processing and Arduino communities, which the script is built for, are both great about sharing code, and this will make sharing just a little bit easier.

The script is built into a simple site at www.anthonymattox.com/code_formatter. You can paste your code into the page, adjust the settings, and format it. The script returns the HTML and a chunk of CSS based on the styles you selected on the first page. Paste the HTML into your site and either add the given CSS or use it as a model to write your own.

In my blog its styled to look something like this. Unfortunately it’s still black in rss readers.

/* sample processing code */
/* analog clock */
PVector mid;
float sc, mn, hr, s, m, h;

void setup() {
  background(20);
  size(400,400);
  noFill();
  stroke(200);
  smooth();
  frameRate(1);
  mid=new PVector(width/2,height/2,0);
}

void draw() {
  background(0);
  s=float(second());
  m=float(minute());
  h=float(hour());
  sc=(s-15)/60*TWO_PI;
  mn=(m-15)/60*TWO_PI;
  hr=(h-3)/12*TWO_PI+mn/12;

  strokeWeight(2);
  stroke(200,0,0);
  line(mid.x,mid.y,mid.x+100*cos(sc),mid.y+100*sin(sc));
  stroke(200);
  line(mid.x,mid.y,mid.x+110*cos(mn),mid.y+110*sin(mn));
  strokeWeight(4);
  line(mid.x,mid.y,mid.x+60*cos(hr),mid.y+60*sin(hr));

  stroke(50);
  ellipse(mid.x,mid.y,240,240);
}

I’ve been working for a while on this project with Stem Cell Resources for the new cell exhibit at the Maryland Science Center. The exhibition, including the Stem Cell Map and some other fun interactive works, opened yesterday and was received very well. If you’re in Baltimore its worth checking out. Developing this project has a been a great opportunity to do some great educational work with some great people. I enjoy being able to maintain a connection with the sciences despite focusing myself on art, and I always love creating data visualizations.

The Map is scripted in Actionscript 3 and takes all the data from an xml file exported from a spreadsheet making it easy to update. The research is broken down into three categories and each location is colored accordingly and scaled based on the number of facilities. It’s displayed on a large touchscreen in the exhibit and will also soon be online.

In the installation people can zoom in on countries and states and navigate around the map by dragging it. Categories can be hidden to get a better view of where different types of research. There are also four different styles of visualization to choose from: color blending, bar graph, and rectangular and concentric area graphs.

Martin Mick and myself in front of the display at the Maryland Science Center. Martin invested a lot into the project building the database for the map.

Although I am happy with how my initial Ribbons script turned out it still wasn’t exactly what I was trying to create. After playing with Perlin Noise based forces in my straightforward particle system and creating outstanding fluid motion, I thought I might go back to the Ribbons and add a Flow Field to that as well. The result is much more dynamic than the original and quite graceful.

And a little technical stuff. The ribbon is just a strategically rendered particle system. I created a particle system class with particles and springs. As new particles are added (on mouse press) new springs are also created connecting each particle to the one before. Each particle repels all nearby particles and springs pull them together. The result is a string of connected particles which would, if the forces extended infinitely, eventually straighten itself out into a line. To render the structure all particles and springs are hidden and a curve is drawn by wrapping the rendering loop in beginShape(); and endShape(); with a curve vertex for each.

In the previous version the wobble was created by a slight random force applied to each point and a wind vector of the particle system. Because of the varied weights of the particles and spring lengths the wind wobbled the structure more convincingly. In this version the same Perlin Flow Field I’ve been using in many of my recent projects pushes the ribbon around much more dynamically. Different parts of the string are pulled in different directions making it writhe back and forth. The color is an attribute of the particle system and ‘randomly’ shifts over time.

In this Drawing Machine a series of particles spawned when the mouse is pressed move through a morphing Perlin noise flow field. They also slightly repel each other. The netting algorithm is applied to the particles to create the dark lines and their colors slowly shift. Many different factors effect the size and transparency of the points and lines in order to keep everything moving smoothly. Lines fade out as they get longer and fade out with the points they join.

It’s not exactly what I had in mind, but I like how it turned out. I have a few different variations I may post and will keep playing with it. I’ll also have a few desktop wallpapers available from this script soon as soon as I decide how to set up and organize a wallpaper section on my site.