Make The Moon

Make the Moon is a simple, single button game based off of a Processing example coded by Ira Greenberg.

Make the Moon

It's lonely in the dark.

• Left Click - Pull the Moonling Down
• Help! - Make sure to click the applet space before you start your command.

Water Drops

The Water Drops Suite was originally a series of Processing applets with various booleans toggled to create unique versions. Due to the sound, this applet might take longer to load. Wait until the background is black before you start to play.

Water Drops

Water Drops was designed using only circles (though admittedly one of the toggles is to use triangles instead). Line weight variation, transparency variation, and hue variation can all be manipulated in the Processing file, but I've chosen my favorite to display and given interactive control over the shape and styling of the ripples.

• Left Click - Create a new ripple.
  
• Right Click - Clear the canvas.
• Z - Toggle circular ripples.
• X - Toggle triangular ripples.
• C - Toggle ripple centers.
• V - Toggle background fading.
• B - Toggle widescreen
• Help! - Make sure to click the applet before you start your command.

Stria

This week's processing applet is called "Stria" for its parallel, linear filaments and design.

Stria

This piece was designed around the idea of flocking algorithms, similar to Rainbow Shards, using low opacity and only a single flock to create the flowing, mesmerizing color patterns.

• Q/A - Each top letter pair, from Q/A to Y/H act as "volume adjusters" for the max and min red, green, and blue values. Each boid in the flock will adjust its color to be within those bounds.
  
• Up / Down - Use the arrow keys to control the number of white striations in the pattern.
• Help! - Make sure to click the applet before you start your command. Color differences can take several seconds to start appearing, as the flock gradually fades to the new color bounds.
  

From Processing to Google Gadget

Somewhere in my various informational cubes on this page you should see an embedded Processing applications that was turned into a Google Gadgets. Now you can do the same - and it's easy! All you need is a place to host your .jar file.

1. Get .jar and .html files from processing

First, open your processing sketch. Make sure the canvas is sized to fit a gadget (not too big!) and click the export button. This should create a folder with your classes, loading.gif, a .jar and a .html file. All you need are the .jar and the .html files.

2. Upload .jar

Upload the .jar to a website and open up the .html file in a text editor. You'll need part of that code later. If you just click the .html file you'll open it in a web browser, in which case you'll need to do a "View->Page Source" to see the actual code.

3. Create the .xml

The .xml file is the heart of the gadget. Have a look at my file here:
http://portfolio.manojalpa.net/rainbowshards.xml.

Note that it doesn't take you to the gadget. It just takes you to a rather bland page with some text on it. That's because you can't directly link to a gadget. Gadgets need to be embedded and processed by google (Someone please tell me if I'm wrong).

Here is the basic code, which you can also find at Google's tutorial.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Processing App Name Here">
<Require feature="wave" />
</ModulePrefs>
<Content type="html">
<![CDATA[
COPY+PASTE HERE
]]>
</Content>
</Module>

Copy and paste the code block above into a blank .xml file. If you don't have a server or can't make an .xml file, google has one for you.

4. Copy Paste Processing code into Gadget code

Now, open up the .html file that processing made. You'll see some text that says <!--[if IE]>-->. Copy from that tag (the first one; it appears twice) to the SECOND instance of the <!--<![endif]--> tag. Now paste it where it says "COPY+PASTE HERE" in the .xml file. Save!

Aside: If you're unconcerned about browser compatibility or just want to see the gadget work for personal use, try only using the block of html code for your specific browser. You'll see that the .html code is divided in half - one within the "if IE" (for Internet Explorer) and one outside of it. If you're using Internet Explorer, only take the code that appears between both sets of <!--[if IE]>--> and <!--<![endif]-->. If you're using any other browser, delete that code and keep the rest.

IMPORTANT: To make sure your gadget doesn't fail out on you after a few hours (like mine did the first time), search the code for anything that references your .jar file and make sure it contains the complete url. By default, Processing will only make the url local (ie, it will just say "RainbowShards.jar" instead of "http://portfolio.manojalpa.net/RainbowShards.jar"). Change all of these to be absolute links.

5. Embed your Gadget!

Blogger, Google Wave, and several other sites let you upload your own Gadget via URL. If you're hosting the .xml file yourself, use that URL. If you went through google, click on "Publish" and it will give you a link (after a few warnings).

Note that this is an incredibly basic implementation and seems to still have some trouble in Internet Explorer. I'll continue working on fixes but at the very least this should give you a good place to start and a cool glimpse at what you can do.

Update!

Updated the "Copy+Paste" section to correct for a caching issue.

Rainbow Shards

While studying abroad in New Zealand I was introduced to the wonder that is Processing. I often use it to prototype game mechanics but am more intrigued by the artistic works it can generate.

Rainbow Shards

This piece was designed to express the concept of "stylish" using only lines. It incorporates an evolving hue, low opacity, and interactive flocking algorithms.

• Click - creates a new triangle
• Move the Mouse - pushes the corners of triangles
  

To the End of Efficiency

Because 140 chars is not enough for rambling me -

Lives, and entertainment part of them, all feel extremely efficiency driven. Even flow is a theory on optimizing experience, like we're seeking some perfect algorithm to be Super!Productive Beings of Advancement. We're on a high-gear march to the future and extremely excited to get there, but we're starting to act like machines.

In games, when was the last time you 'stopped and smelled the roses' - that is, you played without (or took pause from) objective-driven actions to actively consume, contemplate, or observe the state or system a game presented. When was the last time you explored for exploring's sake - to see if you could reach the edge of the world or watch how the CryEngine handled clouds at sunset - and not for 100% map completion, item collection, or hidden bosses? Although games as a whole are usually intrinsically motivated (we play them for playing them's sake), the WAY that we play is still very much mechanical. We mark achievements off our check list, fill up our collection books, and try to reach the 'end' of the game like so many rats traversing a developer-created maze.

That's because most games are motivated by efficiency - a design model that demands clear goals, unambiguous direction, and 'weenies' that lead us from point A to point B. Donald Norman has been deified in this world, but games are not everyday things. We've mixed up the confusion of poor design for the ambiguity of art. In moving for complete clarity we're eradicating those wonderful little playful details that make the world so enchanting.

Why is the Roomba so intriguing? It is a machine that circles around, dancing across our carpet laden with whatever LEDs or lifeform cargo we can think of. It has no apparent purpose or goal. We are mystified by its path, because it is illogical, motivated by nothing other than seemingly random whims. That mystification is what we are losing, and the Roomba illustrates one way of getting it back.

Application: Even in game creation we are motivated by efficiency - deadlines require hasty production with limited quality reduction, a dangerous line. All but the necessary elements are cut. Features are removed or sliced away from conception. Characters are deemed superfluous, quirky levels extraneous. Not only do we normalize our designs, but we cut out opportunities for easter eggs - those special locations, characters, items, or otherwise that are irrelevant to the overarching storyline, redundant in terms of collection or completion, and, colloquially termed, "pointless". Because simply being there isn't enough of a point.

I loved Xbox achievements until I considered them as another way of making games extrinsic. Players always want more pieces of cheese in their maze. They want to be rewarded; they want their pats on the back, they want to finish their collection. They rarely traverse and explore for its own sake. They're acting for the cheese.

The Roomba could have buzzed back and forth, gridlining its world with clean carpets. It could have - but it didn't.

And we don't have to, either. In the end, I'm advocating an adjustment to the current balance in games between hasty, efficient, clear products and mystifying, intriguing, thought-evoking products. Enchanting products. I think we should dare to do things that might not be the most efficient, if they are things that will make people look differently at their preconceived notions, consider, think, apply, and enjoy. We should add content to the game that doesn't give you extra points, doesn't unlock hidden achievements, and isn't actually extremely important later in the game when you have to backtrack.

Oh, and backtracking ;)

Let's backtrack a bit from efficiency, and take a brief respite amongst the metaphorical roses.