So, we thought about taking part in the alternative demo competition. The platform is mostly free choice there, but the compo name itself directs you to think about something different. I thought that maybe it could be interesting to make a demo which would consist of only a single static line with changing colors, and try to take most of that limitation. That is, to make a “1-Dimensional Demo” (at least by my definition).

Early on I decided there is no need to try showing technical mastery with such a hard limitation, and decided that it is enough to just make a vertically big image and small amount code which shows that image one line at a time, until the image ends. I made a few effect prototypes with Photoshop, synced to music by checking music positions in milliseconds and converting those to Y-pixel coordinates in the image, after deciding on a frame rate.

It became clear that there should be a good piece of music to go with the effects, because good audio can add so much more to the experience. I asked my friend !Cube if he could make up a composition starting with some piano playing, since I thought it could make a nice start to show just white bars on black background, flashing with colors synced to the piano.

To get beyond my tests (still accompanied by my own music), I asked stRana to help me with the actual production and design. That and just a few days later, most of the pieces started coming together, and we ended up finishing it nicely in time, a day or two before the event started.

For the tech part, I actually just expanded on my first proto tests a bit more. The production is built with Processing. It was mostly fine for the task, except that using the accompanying “minim” library for audio playing didn’t seem to be a perfect choice. I’m not sure of the contributing factors, but it seems the audio latency varies by computer and maybe even some times on the same computer. It didn’t seem to help much to ask for playing position from the audio system, since that seemed to be a too granular value not really telling where the actual audio play “head” is going. But, I didn’t want to rewrite the whole production just to fix this thing since it worked fine otherwise.

In the end we did really fine; Scanline by Rustbloom ended up winning the Alternative Demo competition. The weird thing is that the prizes in Alternative Party are usually strange obsolete leftover stuff donated by companies; we got two huge rack-mountable servers which were probably really good in their heyday, back in 2003. :) But we also got a bit of actual money on top of that (yay!).

You can download the executable version here: (.zip)
Download for Windows & Mac OS X (hint: source code is also there if you look for a source/ folder)

Or just watch it from the YouTube right here:

That’s why this page has always been subject to relatively long pauses without updates, even if I have felt like I’d like to share something. Thinking about alternative solutions, the social media websites, I’ve had a Facebook and Twitter account for quite a while now. I have always felt that Facebook suits best for personal friends and not for public stuff. Twitter is ok for public stuff, but the 140 char limit means that you’ll share only some tiny things, like a little anecdote or just a link to somewhere.

When Google+ came around, I started using it as well. By nature it is like a combination of good things from both Facebook and Twitter, and seems to fit my usage patterns quite well. It allows really easily to select per-post who I’m sharing it with. It doesn’t limit me to short posts when I want to say a little more. Each post is automatically a discussion thread, and since it isn’t hosted by me, I have less to worry about approving posts / preventing spam entries.

So I realized I tend to write there a bit more often – the smaller things, findings and even some more light-hearted observations go there. So, if you want to follow smaller updates from me, join Google+ if you aren’t yet there and add me to your circles. Today, I was originally going to write about my latest findings regarding prototyping with Processing (again), but decided I probably do that in my Google+ stream later and write this endorsement post here instead! ;-D

As usual, I spent a little bit of time to make some entries to the event competitions. Read on for videos and a bit of info.

–
Together with stRana we created Grandma by Rustbloom, for the Assembly 2011 event’s demo competition. It is an experiment of using Autodesk Photo Scene Editor to author content for real-time use, with only a minimal amount of tech to get the thing up and running. I made a simple custom editor which made it possible to move and orient the objects, and create & synchronize camera tracks to put together the demo. For music we used an antique phonograph recording from 1910′s, now in public domain, featuring Adele Rowland singing about Granny.
Grandma even ended up taking the 5th place in the demo competition, which was a very nice surprise. I guess it had unique enough style to stand out from the other entries.
Click here to download the executable version for Windows, or watch the video below.

–
I also helped out XMunkki to create a little humorous entry for the Assembly event’s 4 KB intro competition, Nelejän Kilon Nakki by XZM & tAAt. Technology-wise it interestingly the 2D effects in the production are actually running inside a complex pixel shader written by XMunkki. I mostly tweaked some of the visuals/movements and created the audio track using 4klang.
Click here to download the executable version for Windows, or watch the video below.

–
For the Evoke 2011 event I also took part in the 4 KB intro compo, with Excess Geometry – Ylijäämägeometria by tAAt 2011. This production was an experiment which started with the thought “what if I precalculate a big static bunch of vertex positions, and make a production which only shows a sliding window of those vertices”. That is, the effect code basically boils down to: glDrawArrays(GL_POINTS, array_pos_in_time, 50000);. Since the demo features a planar ground as a context to show other objects, it actually has to be “refreshed” all the time by re-inserting more vertices to the plane. So, the silly design choices largely dictate what kind of things are featured.
Click here to download the executable version for Windows, or watch the video below.

Here’s the 2011 promotional trailer for the game:

The game is free, with option to purchase extra levels and ragdolls. Go get it from the Android Market now! And tell your friends. :)

Or check out more info about the game from www.StairDismount.com. (Just in case you have missed it before, it’s also available for iPhone, iPod touch and iPad.)

• relatively high-quality anti-aliased lines (better than subsampling or postprocessing)
• simple low-tech solution extendable to wide range of platforms (e.g. not relying on availability of shaders)
• visually better consistency than what you get if you just ask graphics API to anti-alias lines for you, and you might not even get any if the hardware is lacking
• try to solve issue of anti-aliased lines showing a “roping” effect
• concentrate on case of single lines without yet going to additional complexities such as line caps or joins between multiple lines

I set to test out stuff with Processing, and decided first to do a comparison of what anti-aliased lines look by default in it. Here’s an animation showing my simple test pattern with P2D, P3D and JAVA2D renderers:

As you can see, the results vary a bit, which is no surprise since those different renderers surely have differing precision/performance goals or just a different way to render the lines. For lines close to perfectly horizontal/vertical lines they’re pretty similar, showing clearly the “roping” effect I mentioned above. For lines close to 45 degree angles the JAVA2D renderer seems to look a bit better.

So, to move forward, here’s a magnified illustration of the technique how I’m drawing lines using two quads having a gradient going from 100% in center to 0% towards edge. In actual rendering that gradient ramp is done in alpha channel, but for these example images I’m using green background and a ramp from white to black to show more clearly what’s being done.

I’m basically just building on top of somebody else’s basic idea about how to render hardware accelerated lines by constructing polygons with gradient fins yourself instead of using a call to draw line primitives. I don’t know whose idea this is originally, having heard this a few times from different sources, but to fully research this subject you’d need to go back 30 years or so (check the short list of related links at end of this post).

When you use this technique to draw a line with “1 pix” thickness (although the fins cover total of 2 pixels), it yields pretty identical result with what you see in the above examples from Processing’s P2D/P3D/JAVA2D renderers. Well, not quite – for some reason, it actually depends a bit on the hardware. On low-end Intel GMA950 that statement of looking the same holds true. When I try that on my desktop PC with nVidia video card, the lines actually look much better (slightly fatter but without the roping). I found this out only later though, since I did all of my initial tests about this on a mini laptop which has the GMA950. :)

When the roping issue of anti-aliased lines is discussed, I have noticed that often somebody knowledgeable enough says it’s actually a gamma issue. The problem here being of course the fact that there are many ways to tackle the gamma thing, where none of them are a silver bullet solution which wouldn’t bring a host of other problems with it.

I got the idea that I could modify the above technique to draw two 0.5 unit wide fins per side, and apply gamma correction at the halfway. This would be still very simple and low-tech way to draw gamma corrected lines.

So here’s an illustration of what’s modified compared to the previous example:

The magic value of 0.72974 comes from 0.5^(1/2.2), assuming that your display gamma is 2.2. I also tried 0.707107 which comes from 0.5^(1/2), which is equal to sqrt(0.5), i.e. a good approximation which is “close enough” if you want to simplify the equation. Here is an animation showing the differences with no gamma correction, and then gamma correction with values of 2 and 2.2:

As I said above, the “no gamma” case looks very close to the gamma corrected one on different hardware, but the gamma 2.2 corrected case looks identical on the few machines I tried this on. I’m not sure what’s going on with that, hopefully somebody can explain it to me. I don’t have any explicitly enabled “gamma correction” features from drivers.

A few observations from the images. With the above technique even the perfectly horizontal and vertical lines get a small halo to nearby pixels. What’s good though is that the perceived brightness stays same very well regardless of line angle.

Perhaps one of the most annoying side effects of this technique is the fact that now the lines look fatter than normal 1 pix wide lines. I have done a few tests of reducing the fin width and/or decreasing the brightness. You can’t reduce the fin width much without the result quickly getting ugly, but decreasing just the brightness doesn’t really make the line look much thinner, it looks just darker. I don’t know what would be the optimal way, but I think maybe it involves a combination of both to some extent. Here’s one test image where I have reduced the fin width slightly as well as the brightness:

I think a bit of the roping effect has crawled back in, but the perceived brightness between angles is pretty much ok.

Here’s test code, runnable inside Processing. What’s additionally not visible in the example images above is the fact that the default renderers clamp coordinates to integers, while this method allows you to draw lines with perfect sub-pixel precision. The test code is modified to offset the lines by time slowly so you can see that in action. If you want to try the regular lines reference test case, replace the renderer in initial size() call to P2D/P3D/JAVA2D, and replace the call to testAALines(…) in draw() with the commented call to testLines(…).

Related links:

• Anti-Aliasing Through the Use of Coordinate Transformations (K. Turkowski, 1982).
• Prefiltered Antialiased Lines Using Half-Plane Distance Functions
• GPU Gems 2 chapter 22: Fast Prefiltered Lines
• OpenGL Invariance: Texture AA (with glAArg library)

Additional credits/thanks: I think I learned first time about using simple gradient instead of other tricks (like textures) from Mikko Mononen. Raigan Burns noted that the line being a bit fat and “bleeding” into adjacent pixels is actually a feature, since that way the lines actually look a lot better in motion. Alex May told me that most of Eufloria game’s drawing works like this, except for using texture for drawing the lines and having a bunch of textures with different gradients to get different visuals. The gradients are circular and lines are drawn using a cross section of the texture, with rest of the texture used to make caps for round-ended lines.

20th Ludum Dare contest was held a few weeks ago. The given theme was “It’s Dangerous to go Alone! Take this!”. I created a little platformer where the player character has a temporal projection sidekick. Check out Guinea Pig Warrior.

19th Ludum Dare contest was held already back in December. Since I managed to make an entry this time, I figured out I could post about it before the next one is held, which will be probably next month.

The theme was “Discovery”. Description, downloadable Windows build and source code of my game Drill Warrior can be downloaded from the separate page about the game.

Some time before the event I also spent a moment to wade through Box2D physics engine documentation, and made a little prototype game called Luomuheinäseipääntapinheitto (a.k.a. Organic hay pole peg throwing), entering it also to the gamedev contest (placed 8/19). Background music is Test Drive by Zapac. Check out a video from Youtube, or download and try it (only for Windows).

Here’s links (mostly Youtube) to some other highlights from the event: XMunkki’s gamedev entry Raya Racer for N900, Evoflash’s winner Flash demo from wild compo, Archee’s 4k intro with physics and AI, winner 4k, Pier 64k from Hedelmae, Tricky truck – Archee’s winner entry from gamedev, 64k intro compo 1st and 2nd, Fairlight’s demo (2nd in compo), and finally ASD’s winning demo.

A common technique for me has been to just make zip files of whatever I want to backup. Simple snapshots of a project, so I end up with bunch of “projectname-YYYYMMDD.zip” files. Or altenatively a common zip of certain folder which gets updated over time. For example, before I moved to using cvs or svn for source code version control, I used a batch file like this to backup all my little coding projects:

backup.bat
@zip -u -r d:\backup\prog_c * -x *.ilk *.pdb *.idb *.ncb *.opt *.plg *.bsc *.sbr *.pch *.obj *.zip *.dll


As you can see, this just updates an existing zip and excludes bunch of unnecessary files which I didn’t want to keep bloating up the backup zip. A worthy note is that I have usually made sure I have two separate hard disks in a computer and put the backups on the other one from the original data. At some point I also tried to switch to using dar instead of the zip files, since it would have had some advantages over the zip files. I didn’t end up using that for long though.

Like I hinted above, nowadays I’m using version control for source code, so I don’t make such zips that frequently anymore. Instead I have made sure that the version control repository gets backed up somehow.

My first solution was to make nightly snapshots of the repository using a script on the server, and then occasionally copy a snapshot file back to my main computer. I used this solution for many years. Below is copy of the backup script I used, which creates a .tar.gz backup file with given prefix from a specified file mask, adding YYYY-MM-DD timestamp to the backup file name, and also keeps only given number of snapshots around cleaning up any older ones.

dobackup.sh
#!/bin/sh

if [[ ! $1 || ! $2 || ! $3 || ! $4 || ! $5 ]]
then
echo $0 destdir name execdir mask backups
echo $'\t'destdir = directory to put backups in
echo $'\t'name = file prefix name of this backup
echo $'\t'execdir = directory to run the backup tar command in
echo $'\t'mask = filemask to give for tar
echo $'\t'backups = number of backups of name to keep in destdir
exit
fi

DESTDIR=$1
NAME=$2
EXECDIR=$3
MASK=$4
BACKUPS=$5

DESTFILE=$DESTDIR/$NAME-`date +%F`.tar.gz

cd $EXECDIR
tar zcf $DESTFILE $MASK

EXTRAFILES=$((`ls $DESTDIR/$NAME-* | wc -l` - $BACKUPS))

if [[ $EXTRAFILES > 0 ]]
then
rm -f `ls -t $DESTDIR/$NAME-* | tail -$EXTRAFILES`
fi


I had then another script which called the above one to create backup files from a few places in the system, and was put in a cron job to be run once per night. The backup script looked something like this:

allbackups.sh
#!/bin/sh
# All automatic nightly backups
cd /home/user/bin
BACKUPDIR=/var/backups/user
umask 007
# /home/share (includes version control repository)
./dobackup.sh $BACKUPDIR share /home share 7
# misc stuff
./dobackup.sh $BACKUPDIR misc /home/user "bin bookmarks.html code" 7


More recently I have also moved to mirroring stuff over to another computer using rsync. This was something I needed to do to create an off-site remote backup for my workplace’s version control repository. To do this, I have simply put ssh-keys in place to allow automatic remote ssh login from a certain machine to run rsync over it, and then I have a cron job line like this to update the mirror every night:

nightly rsync mirror for cron job file:
30 5 * * * /usr/bin/rsync -avz -e ssh user@server:/path/* /backup/mirror/ > /backup/log/last_cron_mirror.txt 2>&1


Additionally I’m also backing up some paths of this web server every now and then using simple tar commands in a script, and the following command to back up a dump of the mysql database:

compressed mysql dump, must be run as root:
/usr/bin/mysqldump --defaults-file=/etc/mysql/debian.cnf -A -Q --opt | /bin/bzip2 > ~/db-mysql-`date +%Y%m%d`.sql.bz2


Finally, since there are multiple computers in our household, we have also been simply copying manually some files over to a share in another computer to have at least a single duplicate. These days I have also set Windows 7 backup software to maintain a backup of certain folders and system state to a share in my home Linux server. In the past I also sometimes made manually a backup of my Windows XP computer’s system state using the OS backup tool. Also recently when a brand new hard disk failed for me, I bought another one and after getting the warranty replacement I put the two into a mirrored RAID disk.

I have experienced so many hard disk crashes over time so I have learned to pay at least some attention to backing up the most important stuff, even if I really still tend to be a little bit lazy about it.

I remember hitting against this problem numerous times, always remembering that I have solved it previously but always seem unable to find the previous solution. And I still can’t just write it out by heart.

Once again I had to solve this, so this time I tried to Google for it (“angle wrap delta”), and found out that somebody named Jason S had posted a nice generalization to a related question in Stackoverflow.com.

For your convenience, I’m posting a modified C version of the code here.


// Fancy generalization for wrapping below (e.g. for angles).
// Original code found from:
// http://stackoverflow.com/questions/2500430/calculating-rotation-in-360-deg-situations

// Unwraps a value, used for e.g. angles.
// Caveat: Doesn't handle negative input values correctly.
// Workaround: Wrap original value prev to [0..range) before applying this.
//       e.g.: prev = fmodf(fmodf(prev, range) + range, range);
static float unwrap(float prev, float next, float range)
{
  return prev + smod(next - prev, range);
}


There’s one caveat: it doesn’t seem to work correctly for negative angles. Just now I don’t have the time now to figure that out. But an easy workaround is to wrap the original angle first with angle=fmodf(fmodf(angle,2*pi)+2*pi,2*pi) and then transition from that angle to the destination. If somebody posts a better version I’ll update the post. :)