Pulsus
For the past few months I’ve been hard at work building a flash game. As my first game (but hopefully not last) it was a bit of an adventure, but worthwhile in the end. There are certainly still details to be worked out and some extra features to finish off, but overall it’s come out pretty well.
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.
Filaments
On my way to developing my 3d tree script I first added a function to my basic particle system to cause the particles to branch. I went back and polished up the rendering of this as it looked interesting in 2d.
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.
Particles and Springs
Back at the old particle system I’ve been enhancing the interaction. In the applet you can now easily create and remove particles and links. Particles can be dragged and multiple particles can be selected. Right now everything is controlled with keypresses, but I plan to build an interface to easily switch between tools and to modify particle and spring properties as well as environmental properties. When its a little closer to finished I’ll post it into my interactive site.
In these images, springs are drawn in purple and forces are drawn as blue lines, stronger forces are darker. Drawing the forces is a little unnecessary but it creates interesting patterns. Which is, at this point, all this application really does.
What is particularly interesting is the way structures move. In the image below, a radial structure is dragged by its central point. The whole mass distorts into a cardioid shape. It eventually collapses into chaotic motion. Moving any particle in an interconnected set creates waves through the rest of the system.
Particle Generated 3d Tree
I cracked open the old Processing Particle System again and tried something a little bit different.
Beginning with particles moving through a Perlin Flow Field I moved them into 3d. Since my particle system is built on the PVector class, adding the third dimension was a simple matter of adding a third parameter to every call to a new PVector and adding either the P3D or OpenGL (used for all the images here) rendering engine. An extra force pushes the particles up through space an array stores the previous locations for each particle. As particles die an instance of another object is created, exclusively for storing and rendering these paths.
Another addition causes the growing strands to bud. The budded particles inherit the properties from the parent. Changing the forces between particles, the branching rate, and the environmental properties creates many different structures.
As the script runs, a cloud of particles drifts up through space leaving behind a colorful twisted shrubbery. Using the mouse and keyboard the camera can be moved around the structure while it generates itself.
Posters for the Ligetisplit Ensemble
I created this set of posters for a performance by the Ligetisplit Ensemble. The images are created with Processing. I had to finagle things a little to get high resolution rendering of my processing sketch. I set the screen dimensions to the pixel dimensions I needed, scaled up my inputs to interact with the whole screen, and had to enter expose or save the image to see what it looked like. It actually worked better than I expected.
Tubes
Another little experiment with my particle system. Each particle is rendered very large with a slightly darker stroke than fill, and each frame is drawn over the previous one. This along with the color shifts creates some nice pseudo three dimensional effects. The effect is especially interesting when particles overlap as they move.
Cell Cluster Circles
I built this script which creates circles budding off of circles. What better to do with it than put it in a circle? I could give some lofty symbolism for circles, and some if it might even be half true, but to be frank I just like them. They look nice. Not to mention it’s much too late to be coding anyway (or blogging).
Perlin Flow Ribbons
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.
Particle Flow
In addition to interparticle forces, all the objects in this script are effected by a Perlin Flow Field. Two dimensional Perlin noise evolves through time and sits behind the particle system as a grid of forces. These forces are applied to each particle based on it’s exact coordinates each frame, before any other functions. The system creates some very elegant effects as smaller (lighter) particles get sorted out and complex force structures create swirling spirals and channels of flowing particles.
proudly powered by wordpress v2.8 & jquery javascript library.
View all resources in the colophon.
website & all work creative commons by-nc anthony mattox (2007-09)
pragmatically validated xhtml 1.0 transitional & css thanks w3c