Hackszine.com: Software Engineering Archives

Archive: Software Engineering

Page 1 of 2 1 2 >>

May 9, 2008

Processing.js - visualization library for Javascript

John Resig, of jQuery fame, released a port of the Processing visualization language for Javascript. Seriously, John is on fire:

The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. This involves a lot of gnarly regular expressions chewing up the code, spitting it out in a format that the browser understands.
It works "fairly well" (in that it's able to handle anything that the processing.org web site throws at it) but I'm sure its total scope is limited (until a proper parser is involved). I felt bad about tackling this using regular expressions until I found out that the original Processing code base did it in the same manner (they now use a real parser, naturally).

The full 2D API is implemented, with the exclusion of some features here and there between browsers (Firefox 3 is pretty full featured). You can interact with the Processing API directly from standard Javascript. This lets you make use of these drawing features by simply instantiating a Processing object, and then calling its various drawing methods.

Another capability is to write code natively in the Processing language. This allows you to make use of extended language features such as method overloading and classic inheritance, though it looks like type information is pretty much ignored.

John has many of the demos from processing.org working. Most of them are going to peg your CPU, but this is some seriously cool stuff to see working in a first release.

Javascript just got a lot more interesting.

Processing.js
Processing: open source data visualization language

May 8, 2008

DIY multi-touch on OS X

Bridger Maxwell has been blogging his progress on creating a homebrew multi-touch platform in OS X. Prior to this, there's been a lot of activity around building multi-touch systems on Windows using the Touchlib library, but this is the first time I've seen a concerted effort on OS X.

The basic hardware is the same for both environments: LEDs surround a sheet of acrylic, causing a backscatter of IR when fingers are pressed to the screen. On the software side, though, the multi-touch interface is provided through Pawel Solyga's OpenTouch library. From the sounds of things, though, it's not super simple getting the interface messages from OpenTouch to your multi-touch enabled Cocoa apps:

Both OpenTouch and TouchLib send the touch data to other applications by sending Tangible User Interface Object (TUIO) network messages. TUIO is a protocol that is designed for transmitting the state of multi-touch systems. TUIO is built upon another protocol, Open Sound Control (OSC). While libraries for receiving TUIO messages are available in a few languages such as C++ or Java, there was not a solution for Cocoa applications. My first step was to build a library for receiving TUIO messages in Cocoa.
Because TUIO is built upon OSC, I looked for a library that could parse OSC messages. Unfortunately, I could not find one that would fill all my needs. WSOSC was a library that came close though. There were a few issues to work around (use NSData instead of NSString), but eventually I was able to use WSOSC to parse the OSC packets. When finished, my framework had the ability to parse TUIO messages and had a method to delegate the TUIOCursor objects it created to another application.

From the blog comments, it sounds like Bridger is planning on releasing this middle layer when it gets a little further along. At the moment, though, he's released a demo comic viewing application that uses his multi-touch project framework. If you're interested in developing multi-touch apps for OS X, some of the discussions on Bridger's blog would be a good place to start.

Bridger's Multi-Touch Blog
OpenTouch Library

April 23, 2008

Scriptographer - Javascript for Illustrator

My friend Barrett sent along a link today to an Illustrator scripting plugin called Scriptographer. I'm sort of a slouch at Illustrator, so I had him give me the quick 411 and I must say, this is pretty cool.

If you're familiar with Javascript, Scriptographer will enable you to crank out little scripts that can generate illustrations procedurally. As an example, the bubbelbubbling script, show above, tuns your pen tool into a fountain of random bubbles that follow your drawing path. There are certain styles of artwork that could really lend themselves to a procedural drawing tool: fractals, patterns, random "particle" effects. These things would take forever to generate manually, but by defining the effect programatically, you can quickly experiment with your work in a more dynamic fashion, tweaking variables and fine-tuning your work as you go.

The project website also has a growing library of user-contributed scripts that are worth checking out. It's a good place to start for your own creations, or you may just find exactly what you're looking for, already crafted for you by another designer-coder.

Scriptographer

April 22, 2008

Encoding JPEGs client-side in AS3

I've been doing a bunch of Flash Actionscript 3 development lately at work, and one of my favorite features with the new drawing API is the ease and speed with which you can rasterize vector data and manipulate image bitmaps.

What's killer is that Adobe's as3corelib addon library finally gives us some essential tools that have been sorely lacking, none the least of which is a client side JPEG encoder. With this, you can turn any drawable object like a sprite or a movieclip into a ByteArray holding the compressed JPEG data in just a few lines of code. It's as simple as this:

import com.adobe.images.JPGEncoder; var clipbmp:BitmapData = new BitmapData (aclip.width, aclip.height); clipbmp.draw(aclip);
var jpgEnc:JPGEncoder = new JPGEncoder(90); var jpgbytes:ByteArray = jpgEnc.encode(clipbmp);

This turns the "aclip" sprite or movieclip into a rasterized, flattened, BitmapData object. The BitmapData is then run through the JPEG encoder with the quality setting of 90 and you're left with the raw JPEG-compressed image in a ByteArray object. The as3corelib also provides a PNG encoder, with which you can just use the static method PNGEncoder.encode(clipbmp).

This is perfect for saving a capture of user-generated artwork to the server. Just set the data member of a URLRequest object to the ByteArray and post it. For more detailed information on how to put all the pieces together, Henry Jones has a really thorough post of compressing JPEG data and pinging it off a server to force an image download.

Unfortunately, to trigger a JPEG download, you still need to post the image data up to a server script and have it echo it back to the browser. The difference now, though, is that you can do the compression on the client end, saving both server CPU time and the time to upload the image data. This means saving a large image is a few second process instead of taking a minute and a half.

Actionscript 3 Core Library (as3corelib)

April 8, 2008

Relational database using jQuery and HTML tables

Here's a novel use for the HTML <TABLE> tag: storing client side database tables. Nick Kallen came up with a slick hack that uses the jQuery syntax to perform simple selects and joins on HTML tables. By using CSS3 selectors, you can easily target fields which match or contain your search terms, and Nick's jQuery-based API provides a simple query language, similar to a rudimentary SQL:

Today I was thinking aloud about Tree Regular Expressions and how they might make a nice query language for document databases like CouchDB. Someone pointed out that CSS3 selectors might make a great concrete syntax for this. One thing lead to another and I thought, why not build a relational database in HTML? So I did. I even got inner joins working.
Let's start with a few tables:
<table class="users">
  <tr>
    <td class="id">1</td>
    <td class="first_name">amy</td>
    <td class="last_name">bobamy</td>
  </tr> 
  ...
</table>
<table class="photos">
  <tr>
    <td class="id">1</td>
    <td class="user_id">1</td>
    <td class="url">http://www.example.com/foo.png</td>
  </tr> 
</table>
Now we can express some queries:
$('.users')
  .where('.id:eq(1)')
  .select('*')
This is equivalent to SELECT * FROM users WHERE id = 1
$('.users')
  .where('.id:eq(1)')
  .select('.id, .name')
This is equivalent to SELECT id, name FROM users WHERE id = 1

How cool is that? Check out Nick's blog post for an example of text search and an inner join. The API in his jquery.db.js is quite straightforward and only about 50 lines of code. Adding a sort function shouldn't be too difficult.

I'm pretty much convinced now that jQuery is black magic.

Building a relational database using jQuery and <TABLE> tags
Download the jquery.db.js library

April 7, 2008

Javascript marker clustering for Google Maps

Everyone who works with large data sets in Google Maps has come across the problem of displaying a bunch of markers in a small area. Not just an eyesore, displaying anything more than a hundred marker icons at a time can bog the browser down on a lot of platforms, Safari on PPC Macs delivering the most pain.

The solution is to cluster nearby markers into an aggregate marker when there are too many markers being displayed, or when markers are so close at a particular zoom level that they completely overlap. For extremely large datasets this is most efficiently done on the back-end, with successive AJAX calls refreshing the marker set from a PHP script that filters out the visible markers from the set.

You can also handle the clustering on the client side, using javascript to scan the entire set of locations and dynamically determine what's visible and what should be clustered. The downside is that you have to download the entire set and store it in the browser's memory, but unless you start getting well into tens of thousands of markers this isn't a big deal. The benefit to the client side method is that it's less complex, it lets you work around large result sets from back-end APIs that you can't control, and with ACME Labs' Clusterer javascript library it's extremely easy to code.

To use Clusterer, first download and include the Clusterer2.js file from the link below in your maps page. Then you need to instantiate a Clusterer object, passing your map object to its constructor:

var clusterManager = new Clusterer(map);

From there, you use it in place of the traditional MarkerManager or any addOverlay calls by calling the Clusterer's addMarker method. It takes two parameters, the marker to add, and a text string that will be listed in the cluster's contents when it is clicked:

clusterManager.AddMarker(marker, "Marker Description");

The cluster manager will take care of all the dirty work, only displaying items when they are within your view, and dynamically clustering them appropriately when there are too many on the screen at once. When one of the clusters is clicked, it will display a list of the locations inside of it. Most of what you'd want to tweak, like the threshold at which to start clustering and the icon used for representing a cluster, are all adjustable through the API via some self-explanatory methods such as SetMaxVisibleMarkers(n) and SetIcon(icon). Follow the link below for more information, or read the source for a few of the less-documented options.

Clusterer documentation
Clusterer source

April 3, 2008

Practical fluid mechanics

Mick West from Cowboy Programming posted a two part series to his blog titled Practical Fluid Dynamics. Originally written for Game Developer Magazine, it covers a number of clever (and down-to-earth) techniques for simulating the movement of fluids in games and other software environments where real-time speed and visual authenticity matter most.

Special attention is paid to the simulation of particulate matter being carried around within a fluid volume—think effects like smoke, fire, and bubbles. I know I've seen a number of people using particle systems to do this sort of thing, but the methods Mick describes are all based on a grid model where you represent the system with a velocity field and a density field. Unlike a particle system, these fields represent a continuous fluid surface, allowing you to measure the density and velocity of the fluid at any location on the surface by interpolating the values from the nearest cells in the field array.

Practical Fluid Mechanics

March 19, 2008

From Nand to Tetris in 12 Steps

Shimon Schocken gave a really interesting Google Tech Talk titled From Nand to Tetris in 12 Steps. In the video, he describes a course where students design a complete virtualized computer system from scratch, building from the humble nand gate, to a functional cpu and memory architecture, to compiler software and an operating system, all culminating in a simple game that runs on the virtual hardware.

The hardware projects are done in a simple hardware description language and a hardware simulator supplied by us. The software projects (assembler, VM, and a compiler for a simple object-based language) can be done in any language, using the APIs and test programs supplied by us. We also build a mini-OS. The result is a GameBoy-like computer, simulated on the student's PC. We start the course (and this talk) by demonstrating some video games running on this computer, e.g. Tetris and Pong.

Building a working computer from Nand gates alone is a thrilling intellectual exercise. It demonstrates the supreme power of recursive ascent, and teaches the students that building computer systems is -- more than anything else -- a triumph of human reasoning.

It looks like most of the course materials are available online. The necessary hardware emulator and simulator software is open source and available from Shimon's website.

CS101 Digital Systems Construction
Video - Building a Modern Computer from First Principles [via Slash7]

March 10, 2008

SketchUp has a Ruby API

I guess it's been available for a few months, but I just noticed that there's a Ruby API for Google SketchUp. Looks like a cool tool for extending the building interface, integrating SketchUp entities with external software, and building procedural stuff, like making terrain or stairs.

Here's a video of SketchUp developer Mark Limber talking about some of the possible ways to extend the software with the Ruby API.

Google SketchUp Ruby API - Link
SketchUp API Blog - Link

March 6, 2008

Microsoft Excel 3D engine

Peter Rakos wrote an article for Gamasutra today which demonstrates how to hack yourself a simple 3D engine by subverting an Excel worksheet. It's not going to win any FPS awards, but the fact that you can even get Excel to draw raw shapes blows my mind.

In his demo, the worksheet is used to calculate values for all the polygon vertices and a very small macro loop draws the resulting mesh to the screen.

After downloading the source XLS, run the demo by hitting alt-F8 (option-F8 in Mac Excel). You'll find the code under the "Tools->Macro->Macros" menu.

Microsoft Excel: Revolutionary 3D Game Engine - Link
Peter's Example 3D Excel files - Link

February 29, 2008

Single character commenting

It's a pretty common practice to comment and uncomment big chunks of code during the development and testing of software. Here's an odd little hack from the ajaxian blog that can make this a little easier for blocks that you're constantly flipping on and off during development.

For C style comments, the following will be commented out:

/* if ( foo == bar ) { dosomething(); return(); } // */

And the addition of a single '/' will uncomment the block:

//* if ( foo == bar ) { dosomething(); return(); } // */

In languages that don't have the single line comment, such as CSS, you can do the same thing with only the block level comments.
Commented:

/*/ min-height:100px; /**/

Uncommented:

/**/ min-height:100px; /**/

You are probably talking to your screen right now, saying, "hey Jason, that commenting trick is marginally useful at best." I can only respond by reminding you that every keystroke is a beautiful and unique snowflake that must be cherished and never wasted.

A neat commenting trick - Link

February 10, 2008

Extracting GTA3 art assets for use in your own game

One of the most frustrating things about homebrew game development is that there's almost an insurmountable amount of work that needs to be done just to get something decent to display on a screen. You can roll your own complete graphics and physics engines and still have nothing to show for it if there are no art assets to load.

QuantumG's solution to the problem was to focus on developing the game engine using the model data from GTA3. Knowing that the art is already functional in another game allows you to focus on your code, and it's more fun when you can see the immediate results of your work.

The blog entry walks you through his experience with extracting and using the mesh, texture, city, and character data and making use of it with the OGRE graphics engine. If you've ever played around with making a game before, but got discouraged for lack of art assets, this is really worth a read.

Using GTA3 art assets in OGRE - Link
OGRE 3D graphics engine - Link

January 23, 2008

Accelerometer motion analysis

There's an article over on the WiiLi Wiki that goes into great detail describing how to translate 3D accelerometer measurements into an estimation of the position, rotation, and velocity of a device like the Wiimote. By making a few assumptions—people's arms have a limited range of motion, most Wii play doesn't take place in moving vehicles, etc.—it's quite surprising what you can get away with with just the accelerometer data.

The amusingly named (but rarely used) term for the rate of change of acceleration is jerk. The jerk term for the remote shows up in the time derivative of the force recorded by the sensor, along with the rotation term that contains the angular velocity of the remote. We can extract both rotation and linear acceleration if we assume a few things:
We know the "up" direction before the motion starts.

Throughout the motion, the jerk on the remote perpendicular to the current direction of gravity is small.

Then we can assume the time derivative of the force component which is perpendicular to our current estimate of the up direction is caused by the user rotating the controller only. This allows us to update our estimate of the up direction for the next time step. In each time step, we can also get the linear acceleration of the remote by subtracting our estimate of from the current force sensor report. In effect we are integrating up a coupled set of ordinary differential equations. (Note, need to review the math here. Beware.)

The main problem with this technique is error accumulation in our estimate of "up." Since it is unlikely the user can keep the controller in constant linear motion without injuring themselves, the TV, or their opponent, we can look for times when the total reported force is close to g = 1.0 to recenter . You have to be careful when doing this because it is possible and probably common for the Wiimote to report an acceleration close to g = 1.0 while it is accelerating. When this happens your acceleration vector does not actually point "up" and you will recenter to an incorrect R. This can happen anytime you are accelerating both downward and in the horizontal plane.

I keep thinking that there should be some class of flying vehicle that, when operated under fairly restrained conditions, might be able to get by with just accelerometer measurements to obtain reasonably accurate state information. You could integrate the acceleration data through very limited motions that are within some margin of error, recalibrate, and repeat. This is probably a pipe dream, but I really want a solution for a $50 6DOF IMU. :/

Accelerometer motion analysis - Link

January 17, 2008

Mouse wheel programming in Javascript and Flash

It's an underused feature, but you can give your Flash and AJAX/Javascript applications basic mouse wheel support that works across most common browser platforms. Google Maps' mouse zoom feature is a good example of how useful this small addition can be. If you're programming an application where zooming or scrolling is a common task, give your users a break and don't overlook this one.

On the Javascript side, Adomas Paltanavicius has put together a thorough overview and some example code for making this work in your application. You can capture wheel scroll events in IE, Safari, Firefox and Opera.

For Flash, you need to do some Javascript to Flash communication to capture mouse events on the Javascript side, and then make the data available from within the running Flash application. The SWFMacMouseWheel library provides the necessary glue to do all of this, bundling the Javascript listener code and an Actionscript event object into an easy to use package.

Mouse wheel programming in JavaScript - Link
SWFMacMouseWheel: use the mouse wheel in Flash - Link

January 2, 2008

Open source game development

One of the more interesting recent news items is the announcement of Apricot, a new open source game development effort that is promising to produce a complete 3D game and development/production stack by the end of July 08.

The team will work on a cross platform game (at least Linux, Windows, OS X), using Blender for modeling and animation, Crystal Space as 3D engine and delivery platform, and Python for some magic scripting to glue things together. It is not only the purpose to make a compelling 3D game experience, but especially to improve and validate the open source 3D game creation pipeline, with industry-standard conditions.

I've only monkeyed with Crystal Space and Blender in the past, but I'm really impressed to see how far both of these applications have come and how they are now able to integrate with each other. There's a plugin for Blender called blender2crystal which makes it possible to develop maps and characters within the Blender 3D modeler, then export those models (including their physics and animation properties) into scriptable entities that can be used directly in the Crystal Space 3D engine. Tying the functionality of these two applications together is such a good move. Hopefully Apricot will help develop a solid model and some best practices for producing an entire game using these two tools.

If you can't wait until July to start digging through the Apricot code, there are several demos that have been made using Blender and Crystal Space that you should check out. The general outline is that you develop your game's 3D artwork within Blender, use Crystal Space as the underlying 3D engine, and then write your game logic in Python scripts which can control the underlying 3D engine via the CEL (Crystal Entity Layer) API.

Resources:
Project Apricot - Link
Crystal Space (3D Engine) - Link
Blender (3D Modeling Tool) - Link
CEL (Python Scripting for Crystal Space) - Link
blender2crystal - Link
Blender 3D: Noob to Pro WikiBook - Link