[abandoned] Procedural Aesthetics

Last summer I attended the Berlin Indie Game Jam 2011. It consists of a weekend of non-stop 3h hour mini-jams, one after the other.  Unfortunately, I wasn’t very inspired to make games, at least in such a short time span, so I couldn’t manage to even start any project.  After some very busy months at work, I was going to take my holidays the week just after the event.  That’s why I mostly ignored the 3h mini-jams and took a more relaxed approach.

Instead of actual games, I made some small experiments using Javascript / HTML5, which I called “Procedural Aesthetics”.  They are a couple of small exercises in procedural generation, aimed at creating some simple visuals.

Circle Squids

I was talking with a friend of mine who was working on a space shooter.  He explained to me how he was designing the bosses of his levels, one of them being something like a snake moving in circular and spiral patterns.  That gave me the idea of writing this experiment with a rotating figure made of circles emerging from a center.  I was inspired by the patterns in crop circles that aliens supposedly leave after visiting us in their flying saucers.  The shape is generated randomly, but there is no actual interaction.  Consider it a screen-saver of sorts.  If you want to change the figure, you can reload the page.

Running Brushes

I took the algorithm for the swimming fish of Carassius Auratus and came up with the concept of a painting that paints itself.  It’s a collection of circular brushes that run along the canvas on a more or less random fashion, changing color and size dynamically.  If you wait for a while, an abstract picture slowly materializes.  It’s also a screen-saver without actual interaction.  I took some inspiration from something I read about Jackson Pollock some time ago, but I forgot exactly what was it.  I thought it might be interesting to port it to a shader language and use it to generate animated textures for some 3d labyrinth game.



During a discussion with the friend I mentioned earlier, I started wondering about how to make level selection in a game more interesting.  In many games where you have levels and progress is saved, there is a menu where you can select any of the levels you have already unlocked and play it again.  I had the idea of making a game with single-screen levels where all would be unlocked from the beginning.  But there would be some sort of dependency between the levels, you would have to clear a given level first to be able to finish another one.  I was thinking about expressing those relations by laying out the levels in some sort of spatial arrangement, and the first thing that came to my mind was a grid, since that would give the player two dimensions to explore, instead of the usual arrangement of all the levels in a single line, one after the other.   What I implemented here is just a proof of concept where you would have an overview of all the levels at first, then you would be able to zoom into the one you’d be interested in, and then zoom out of move around at will.

After sketching out the concept in the span of a 3h mini-jam, I couldn’t go much further than this.  Unfortunately there is no levels or game to play here, the “levels” are just plain colored rectangles.  The thing that annoys me the most is some very visible tearing in the animations, which makes me very skeptical about the capabilities of HTML5 for real games.  Or maybe there is something wrong in my code, that explanation is more likely.  But this is, after all, a rather simple application where I’m only drawing a handful of rectangles.  I wonder how bad it would go if the rectangles had actual content that would have to be zoomed and animated.


Onion Doodler

This is the typical “Hello world” when you are reading some tutorial about HTML5 canvas.  Drawing doodles with the mouse.  The particularity of this implementation is that each new stroke that you draw makes the older strokes slowly fade away.  I was wondering how a tool which such a feature, that could be considered a hindrance if it was meant to be a general purpose tool, could influence the actual result when drawing pictures.  The point here is having the user trying to take advantage of this “fading” feature to control the color of the strokes, by carefully choosing the order in which to draw them.  Unfortunately, I’ve had no access to a real artist who could try this experiment, so the question remains unanswered.

What I find entertaining while testing the prototype is to start drawing something and as it fades away start drawing something unrelated on top of that.  It’s kind of hypnotizing for me to see how the picture evolves over time as I draw more stuff on top of the old stuff.

If you try the Onion Doodler, feel free to take a screenshot of your result and link to it in the comments section of this post (although unfortunately I have virtually no readers in this blog).

This entry was posted in Abandoned projects, HTML5, Other Jams. Bookmark the permalink.

3 Responses to [abandoned] Procedural Aesthetics

  1. qubodup says:

    Heh, fun!

    Running Brushes nearly creates a tileable image: http://imgur.com/dMaZu

    Onion Doodler reminded me of Alchemy, which allows to enable a modifier, that allows you to only have N strokes on the screen and replaces the last with the new one when you reach the limit.

    • Christiaan says:

      Thanks for pointing that out :). I fixed the running brushes, now it’s tileable.

  2. Pingback: Running Brushes update « Just for fun

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s