Life & much, much more

Competitive weight loss with WeightRace.net

So last year (or perhaps even the year before, time flies!) two people close to me participated in a friendly weight-loss competition. To do this, they used WeightRace.net.

WeightRace is a small web application I built a while ago for fun, which allows up to four contestants to compete towards a weight goal which they would set. They would be prompted daily for weight updates, and would set a reward for the winner. It also used some lightweight gamification so contestants could earn bonus “wobbly bits” when achieving things like their BMI.

But enough talking about the application — applications are boring! Much more interesting are results! Let’s see:

WeightRace - competitive weight loss

The two contestants — whom we shall refer to as Rob and Julie, which may or may not be their real name — and their results are shown in the graph above. Julie is red, Rob is blue, and their linear trajectories towards their weight goal is shown via the corresponding coloured dotted line.

If I could hear a sped-up commentary of the results, it would truly be exciting! Rob makes an excellent head-start well ahead of his trajectory, whereas Julie is having trouble beginning. As we near the holiday (Christmassy) season, we see Rob’s progress plateauing, whereas Julie gets her game on and updates with a rigorous discipline. Also great to notice is the regular upward hikes in Julie’s weight – those correspond with weekends! As the holidays pass, Rob makes gains and is unable to recover.

In the end, although Julie wins the Race, neither Julie or Rob met their weight goal (note that in terms of absolute figures, Rob actually wins). However, this was all not in vain. Given that almost another year has passed since this race finished, and I can see that Rob’s weight is now well under control and has indeed achieved his goal, I’d like to think that the WeightRace has played a role.

In particular, the WeightRace helped raise daily awareness. I believe that it was this daily awareness of the current weight that helped most in the long-term. In addition, the WeightRace helped Rob’s body to stabilise around 90kg for half a year! I suspect his body figured out that it could manage at that weight, which made it easier for him to (after the WeightRace) continue to lose weight at a healthy pace.

For those interested in playing with the WeightRace, you can check it out online at WeightRace.net. Note though that it is not actually complete, but works good enough for a competition. For those interested in the source, it’s up on my GitHub.

Creative

Architectural visualisation renders with Blender

It’s been a while since I’ve made a post. Although there are posts in the queue, I figured I might post this as it’s a quick one. Let’s see the pictures first.

Visualisation 1

… and the other …

Visualisation 2

Images done with Blender and Cycles. Piano in second render done by RegusTtef. These images are 50% of actual size, together these images took a day and a half. Second image is a panoramic shot.

The building is a proposal for the Sydney Museum of Profligate Steel Welders. The rest writes itself :)

Technical

Building REST APIs with auto-discoverable auto-tested code

For the past few months, one of the projects I’ve been working on with SevenStrokes involves building a REST API for a service. REST APIs are tricky things to get right: they’re deceptively simple to describe, yet play host to plenty of interesting topics to delve into. Such topics can be statelessness, resource scope, authentication, hypermedia representation and so on.

However I’m going to only talk about the very basics (which many people overlook), and demonstrate how the Richardson Maturity Model can help with automated testing and documentation. If you haven’t heard of RMM yet, I recommend you stop reading and go through it now (especially if you’ve built a REST-like API before).

Let’s say our REST API conforms to a level 3 RMM: we have a set of standardised verbs, querying logical resources, receiving standardised status codes, and being able to navigate the entire system via links. We’ve got a pretty good setup so far. All these items in the RMM help our REST API system scale better. However what is doesn’t yet help with is keeping our documentation up to date. This is vital, because we know that the holy grail for REST API is an auto-generated, always up-to-date, stylish documentation that promotes your site/product api. There’s a bunch of tools that help you do this right now, but I think they’re all rather half-baked and used as a bolt-on rather than a core part of your application.

To solve this, I’m going to recommend one more addition: every resource must have the OPTIONS verb implemented. When invoked, it will respond with the following:

  1. An Allow header, specifying all the other verbs available on the invoked resource.
  2. A response body, containing the verbs, and under them in the hierarchy of the body (in whatever format), a description of:
    • Their input parameters, including type, and required boolean
    • A list of example requests and responses, detailing what headers, parameters and body are included in the request, and what headers, status code and body is included in the response.
  3. A list of assumptions that are being made for each example scenario (if applicable)
  4. A list of effects on the system for each example scenario (if applicable)
  5. A list of links to any subresources with descriptions

Let’s see a brief example:

# OPTIONS /user/

{
    "GET": {
        "title": "Get information about your user",
        "parameters": {
            "foobar": {
                "title": "A description of what foobar does",
                "type": "string",
                "required": false
            },
            [ ... snip ... ]
        },
        "examples": [
            {
                "title": "View profile information successfully",
                "request": { "headers": { "Authentication": "{usersignature}" } },
                "response": {
                    "status": 200,
                    "data": {
                        "id": "1",
                        "username": "username1",
                        [ ... snip ... ]
                    }
                }
            },
            [ ... snip ... ]
        ]
    },
    [ ... snip ... ]
    "_links": {
        "self": {
            "href": "\/makkoto-api\/user"
        },
        [ ... snip ... ]
    }
}

Sound familiar? That’s right. It’s documentation. Better than that, it’s embedded documentation. Oh, and better still, it’s auto-discoverable documentation. And if that isn’t great enough, it’s documentation identical to the format of requests and responses that API clients will be working with.

Sure, it’s pretty nifty. But that’s not all! Let’s combine this with TDD/BDD. I’ve written a quick test here:

Feature: Discover
    In order to learn how the REST API works
    As an automated, standards-based REST API client
    I can auto-discover and auto-generate tests for the API

    Scenario: Generate all tests
        Given that I have purged all previously generated tests
        Then I can generate all API tests

That’s right. This test crawls the entire REST API resource tree (starting at the top-level resource, of course), invokes OPTIONS for each resource, and generates tests based on the documentation that you’ve written.

Let’s see a quick demo in action.

Auto-documentation for REST APIs in action

It’s a really great workflow: write documentation first, generate tests from it, and then zone in on your tests in detail. This ensure that your code, tests and documentation are always in sync.

I hope someone finds this useful :) For the curious, the testing tool is Behat, and output format used is application/hal+json, using the HAL specification for linking, and link URI templates.

Technical

Using Sahi, Mink and Behat to test HTML5 drag and drop file uploads

For those that don’t know, Behat is an excellent tool for testing the business expectations of an application. In other words, it’s a behavior-driven approach towards full-stack application acceptance testing. Mink is a browser abstraction layer, allowing you to easily control different browser emulators through a common interface. Combining the two together brings us a mean bag of tricks when it comes to testing web applications.

This morning I had set myself the task of writing the tests for a spiffy HTML5 drag and drop file upload script that is all the rage nowadays. Needless to say it took far longer than I had thought it would. Let’s get started.

Testable elements of the HTML5 drag and drop

Drag and drops work by triggering the drop event of an element. This drop event contains a list of files in a format defined by the HTML5 FileAPI. The Javascript can loop over these file objects and perform client-side file validation checks. This data is then posted via AJAX to another URL. After the server-side processing is done, we get a response object with the results, and we parse these to give feedback to the user whether the upload finally succeeded. As you can see, there are various places we can begin to test.

Attempt 1: Just test the AJAX POST

Because the data is finally POSTed via AJAX, one option is to just test that and leave the rest to manual QA. In fact, we can forego AJAX altogther, and use PHP with cURL to make the request and check the response. Easy. Actually, too easy – we’re ignoring what makes our app cool – the drag and drop!

Attempt 2: Test the legacy file input fallback

Bah. This isn’t why you’re reading this post. You know how to do this already. And anyway, you’ve probably already got a legacy test but now you want to test the spiffy HTML5 one. Moving on.

Attempt 3: Use Sahi to run your test

Hello Sahi! Sahi is a web test automation tool with fully fledged GUI. But more relevant is that it supports Javascript, unlike its faster headless relatives (yes, there’s PhantomJS, but I wouldn’t mind seeing what’s going on in a drag-and-drop widget).

Before we even hit Mink and Behat, try recording the events to turn into a Sahi script. You’ll quickly notice that Sahi (unsurprisingly) doesn’t properly record the event of dropping a file onto the page.

The issue here is that Sahi has no concept of files outside the emulated browser window. There’s a sneaky trick around this. In our Behat definition , we’ll run evaluateScript to dynamically add a file input field, then attach our image file to that field. Now we can grab the file object from that!

$session = $this->getSession();
$session->evaluateScript('$("body").after("<input type=\"file\" id=\"sahibox\">")');
$session->getPage()->attachFileToField('sahibox', '/home/dion/image.png');
myfile = $("#sahibox").get(0).files[0];

If we run the Javascript manually, it works fine. And it also creates a good opportunity to stop and peek at exactly what’s your File object built from. However in Sahi, we don’t have the file object. Why? Because input file field values cannot be manipulated by Javascript for security reasons. But then why does Sahi even provide a function for this? Because “Sahi intercepts the request in the proxy, reads the file off the file system and inserts it into the multipart request”. So Sahi just does a sneaky slide into the form submit at the end.

Taking a peek at Sahi’s setFile documentation, they note they have a _setFile2 function – which essentially converts the input field into a text field in the process. This isn’t going to work either, because we actually need the file object to test.

Finally, Sahi provides a third alternative to selecting files to uploads by emulating native events in the process of selecting a file. It’s at the bottom of their setFile documentation. It basically walks through the steps of opening up the file browse dialogue, typing in the file path with keystrokes … on and on until we get what we want. It’ll work!

Yes, it’ll work. But not nicely. It’s slow. It’s littered with _waits(). Wouldn’t it be nicer if we could create the file object ourselves rather than emulate browsing our filesystem?

Attempt 4: Grab a file object from an image already on the server

Aha! We’ve already got images in our app, let’s just try to upload one of those. We’ll need two things: an image source, and a way to create a file.

For an image source, we’ll grab one with an XMLHttpRequest() in Javascript. We need to make sure that this image source is within Sahi’s proxy, though. This is because otherwise we’d run into cross-domain issues. That’s fine, we’ll upload the Sahi logo as our test image.

To create a File, we’ll create a Blob instead. Files inherit from Blobs, and so we can swap them in an out. Right, let’s see.

var xhr = new XMLHttpRequest();
xhr.open( "GET", "http://sahi.example.com/_s_/spr/images/sahi_os_logo1.png", true );
xhr.responseType = "arraybuffer";
xhr.onload = function( e ) {
    var arrayBufferView = new Uint8Array( this.response );
    window.myfile = new Blob( [ arrayBufferView ], { type: "image/png" } );
};
xhr.send();

Great! So window.myfile will be populated with our file object now. But a test that relies on the existence of a Sahi image? Nasty.

Attempt 5: Create our file object from a base64 string

Simple but effective and none of that extra request messing around. Let’s create an image first. I made a black 100px square image for testing. The simpler the image the better, as it’ll make your base64 string smaller. Now let’s turn that image into base64:

$ base64 image.png 
iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAAAAABVicqIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
B3RJTUUH3gIYBAEMHCkuWQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUH
AAAAQElEQVRo3u3NQQ0AAAgEoNN29i9kCh9uUICa3OtIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJ
RCKRSCQSiUTyPlnSFQER9VCp/AAAAABJRU5ErkJggg==

Great. Now as it turns out, the folks at Mozilla have already worked out how to decode a base64 string into Uint8Array. Steal their functions and we’re good to go :)

So our test script will:

  1. Convert a base64 image into a Uint8Array
  2. Use that Uint8Array to construct a Blob with the mimetype of image/png
  3. Set various metadata that file uploaders need, such as file name and last modified date
  4. Create a new list of files, and put our Blob in there
  5. Create a new “drop” event.
  6. Add our list of files to the dataTransfer attribute of that drop event
  7. Trigger our on-page element with the drop event
  8. Wait for the AJAX call and server-side processing to be done

And here is the full script in action from our Behat definition (with the base64 string snipped out because it’s very long):

$session = $this->getSession();
$session->evaluateScript('myfile = new Blob([base64DecToArr("...snip...")], {type: "image/png"})');
$session->evaluateScript('myfile.name = "myfile.png"');
$session->evaluateScript('myfile.lastModifiedDate = new Date()');
$session->evaluateScript('myfile.webkitRelativePath = ""');
$session->evaluateScript('sahiFileList = Array()');
$session->evaluateScript('sahiFileList.push(myfile)');
$session->evaluateScript('e = jQuery.Event("drop")');
$session->evaluateScript('e.dataTransfer = { files: sahiFileList }');
$session->evaluateScript('$("#dropbox").trigger(e)');
$session->wait(1000);

Great! It’s testable!

Technical

A short and simple beginners look at Markdown

At SevenStrokes, we forego email support and go straight to a forum / discussion-based system based off Vanilla. This is great, because we can organise client discussions much better, focus discussions on certain topics, split and merge topics as they spin off from original topics, and through an intuitive interface that takes no time to learn. Best of all, we can escape from those badly formatted client emails with the annoying 10-line signature and get to the point. That’s the reason our discussion post formatting is based off Markdown.

Too bad it’s not obvious enough how to use Markdown.

I wrote this very short, basic, and purposely omitting details guide to What is Markdown? – I hope you like it :)

Creative

Eight rotary phones – an art installation

Late last year, I helped run the University of Sydney annual graduation exhibition for the Architecture faculty. One of the things I was responsible for was helping set up an “artistic” installation. Architects have strange concepts of what is and isn’t art, and apparently an isolated network of eight rotary phones qualifies.

An old rotary phone

The concept was simple: throw eight hipster phones around with a few numbers and see what happens. You could call each other around the building. I’m sorry, were you expecting more? Nope. That’s art for you.

It did, however, give me an opportunity to learn the basics of traditional phone systems – from things like pulses, tones, VOIPs, PABX, switchboards, right down to the physical labour of installing more than 200 meters of phone cable across a building.

On the night itself, I’m happy to say that the installation (in both the technical and artistic sense) was a success. I’ve never heard such creative instant role playing or even inappropriate words said to would-be employers.

… I wonder how long I can keep that phone network running before people realise it’s not a legitimate part of their system?

Technical

Installing Gentoo on Android with chroot

Note: recently edited 8th Nov 2014

Installing Gentoo in a chroot alongside Android is easy, so if you already use Gentoo and have an Android phone, there’s really no reason why you shouldn’t do it. With a ginormous phablet like the Samsung Galaxy Note 2 and a bluetooth keyboard, you can get a super-mobile full Linux workstation everywhere you go.

Before we begin, let’s see the pretty pictures. Here’s Larry saying hello :) (Installing a talking cow should be the top priority once the base system is up and running)

Larry saying hello on Android

… and of course a shot of emerging stuff …

Gentoo on Android compiling stuff

… and finally we’re running Enlightenment 17 with the Webkit-based Midori browser with X, accessed via (Tight)VNC …

E17 on Android with Gentoo Linux

Installing Gentoo on Android

Prerequisites first: you’ll need a rooted device. You’ll also need a terminal with busybox. I recommend Android Terminal Emulator and busybox by stericson. I would also recommend installing Hacker’s Keyboard, which gives you a full keylayout.

Installing is rather straightforward: modern Android phones usually run on ARMv7 so just follow the appropriate handbook. If you are installing it onto your internal storage (not on an external SD), you can skip to chapter 5 :)

You will need to be root to install, so su - in your terminal emulator of choice. Similarly, remount Android into read-write so that you can create the necessary files for Gentoo with mount -o remount,rw /. Finally, remember to install in /data/gentoo instead of /mnt/gentoo so to not conflict with Android’s mounting preferences.

Since we’re only installing a chroot and not booting alongside android, you can safely skip configuring the kernel, configuring fstab, configuring networking, and setting up the bootloader.

When mounting, you will need to do so as root user, and use the busybox implementation for --rbind support, as so:

$ su -
[ ... superuser access granted ... ]
$ cd /
$ mount -t proc proc /data/gentoo/proc
$ busybox mount --rbind /dev /data/gentoo/dev
$ busybox mount --rbind /sys /data/gentoo/sys
$ chroot /data/gentoo /bin/bash
[ ... now in the chroot ... ]
$ source /etc/profile

This is assuming you’ve put Gentoo in /data/gentoo

Android quirks

There doesn’t seem to be a /dev/fd on Android, so let’s fix that:

[ ... in Gentoo chroot ... ]
$ cd /dev
$ ln -s /proc/self/fd`

Portage won’t be able to download files as it doesn’t download as root, but instead as another user by default. No problem:

[ ... in /etc/portage/make.conf ... ]
FEATURES="-userfetch"`

Sometimes I’ve noticed that on bad reboots the /etc/resolv.conf can get reset. This will cause host resolving issues. Resolving is as easy as:

[ ... in /etc/resolv.conf ... ]
nameserver 8.8.4.4
nameserver 8.8.8.8`

It will be a good idea to set your main user to the same UID as the Android normal user. Also, running id -a in android will show you that your user is part of various reserved Android groups. To fix issues such as your Gentoo user’s (in)ability to go online or use bluetooth, just create these groups in your Gentoo install with matching GIDs, and add your user to these groups. Here’s a list of Android UIDS and GIDS. For example, I needed to add my Gentoo user to groups with GIDs 3003 and 3004 before it could successfully go online.

If you want an X server, VNC will do the trick. I recommend android-vnc-viewer 24-bit colour seems to work, and perhaps change the input method to touchpad rather than touchscreen so it’s relatively usable.

Finally, with no fan and big heatsink on a mobile phone, you might find yourself running hot. So even though monsters like the Galaxy Note 2 have 4 cores, I recommend sticking it to MAKEOPT="-j2"

Creative

USyd Architecture Exhibition website released

Today I’d like to officially release the Usyd Architecture Exhibition website.

USyd Graduation Exhibition Website Homepage

USyd Graduation Exhibition Website Catalogue

Taken from the site itself:

The University of Sydney Architecture Faculty puts together an annual exhibition for its graduating Bachelors and Masters students. This gives students an opportunity to showcase their best projects. An event is held to exhibit these works, and along with this a hardcopy curated catalogue and a digital catalogue is released.

So as expected, the site hosts this year’s digital catalogue, and will continue to host future year’s submissions. There are currently about 100 submissions listed across five diverse project briefs. Feel free to look around, but I’d like to issue a word of warning to my readers that you might find the project descriptions more affiliated towards the romantic and social science-esque narrative.

If you’re wondering why a lot of the work is more art than design, I’d like to highlight that we aren’t incapable of making functional, logical and real-world problem solving designs. However it does seem that a lot of students aren’t taught how to write, and end up romanticizing the design into an artwork. That said, some designs do aim to be utopian and speculative, but I guess if you’re going to be spending the rest of your life looking at glazing and bolts, you’re excused for a little fun during university.

I’d also like to get the chance to highlight my own submission on the website.

Flinders Street Hotel Proposal Render

My project this semester involved proposing a Flinders St Hotel. It’s a rather large scale project, and would take too long to explain fully, even for the generous space that the online catalogue allows. I recommend viewing my project page and reading the full description there. It gives an overview of the project.

Finally, I’d like to quickly highlight the under-the-hood of the website. The website runs on vtemplate, is responsive, and has it’s technology colophon visible at its humans.txt. In particular, it was designed to be quite generic and highlight the work itself, and function on a phone or iPad as you scanned QR codes during the event itself. The entire website is open-source (view repository), and I’ve just tagged 1.0.0 today :)

Technical

vtemplate 1.0.0 released

Today I’d like to release vtemplate 1.0.0. I’ve blogged about vtemplate before, but now I am relatively confident about its maturity to make an official release. Jeff Atwood has spoken about The Rule of Three in Reusable Software, and I’m happy to say that I’ve used vtemplate in far more than three sites since then. Oh, and if you are not a web developer, this post is probably not for you.

What is vtemplate?

The Git repository says it well enough: vtemplate is a boilerplate setup for starting new [web] projects which combines various industry standards. There are a few tweaks here and there, but otherwise it’s loyal to upstream. You’ll recognise many favourite technologies used in vtemplate, ranging from Stylus to Kohana to Behat. But before I run through these technologies, I’d like to highlight the ideals behind vtemplate:

  1. Favour industry standards over proprietary and personal hacks
  2. Promote standards that emphasise readable, maintainable, and simple code
  3. Don’t restrict or govern your desired code architecture

Let’s take a brief tour over the awesome stuff we get with vtemplate.

HTML5Boilerplate

You really can’t go wrong with HTML5Boilerplate. It’s a great piece of collaboration by very experienced frontend web coders and very well documented. This is a great first step to writing responsive, cross-browser, HTML5-valid code. This also brings in so many other frontend joys like HumansTXT, Modernizer, JQuery and so on.

Stylus

If If you’re using another CSS preprocessor, this’ll show you just how clean your CSS can really be. If you’re not yet using a preprocessor … well, you’ll soon find out why it’s so awesome. Admittedly Stylus isn’t as popular as the big boys like LESS, but it has a very lenient syntax and is easy to swap out.

Mustache

Learn why writing logic in your templates is evil! Stop writing Model-View-Controller and start writing Model-View-Template-Controller. Don’t let the backend team hold up the frontend or vice versa.

WYMEditor CMS

Why are your clients modifying their site with bloated CMSes and complex, unsemantic rich text WYSIWYGs? Keep things simple, and let your code govern the CMS, not the other way around. WYMEditor reads and writes directly to clean segments of frontend files and understands your CSS. Best of all, it makes it easy to review changes with version control. Read more about the simple CMS approach here.

Kohana

Modular (quite literally split into many Git submodules), PSR-0 compatible, forward thinking and high coding standards PHP web delivery mechanism with extremely flexible routing and HMVC architecture.

Composer

Composer is everything you wished PEAR could’ve been, and more.

Swiftmailer

Most webapps need a mailer library. Swiftmailer is a great one.

PHPSpec2

We all love TDD, right? BDD is even better because it’s semantic TDD! PHPSpec2 provides a really simple (but powerful) BDD tool complete with clean mocking and stubbing.

Behat and Mink

Another great tool from the same guys who brought PHPSpec2. Whereas PHPSpec covers all your unit testing, Behat is excellent for full stack and UI testing, with the beauty of a semantic Gherkin syntax. Mink is just icing on the cake, giving an easy to use abstraction to emulate browsers.

Phing

Test. Configure. Build. Deploy. Do it again!

So if you’re developing a web application with PHP, check out vtemplate :)

What’s new in vtemplate 1.0.0?

Well, apart from being the first release, where by definition everything is new, there have been a few more tweaks since my last post on it.

  • Phing building, deploying and quality control with all sorts of goodies
  • UTF8 and URL replacement bugs fixed in CMS
  • Sahi comes to Behat
  • New “Photoshopper” driver for image manipulation needs
  • More Behat feature definitions as defined in my post about behat
  • Improved humanstxt
  • Default encourages variable page titles and metas
  • moult/contact form bundled
  • Kohana bumped to develop version
  • Simplified installation / configuration

Feel free to fork :)

Life & much, much more

The Architecture Graduate Exhibition – University of Sydney

On the 5th of December, there will be the Architecture Graduate Exhibition at the University of Sydney. Yes, that’s right, my Bachelors degree is over! But before I move on to Masters, other projects, and life, I would like to dedicate a post to the exhibition itself.

The Architecture Graduate Exhibition is an annual event which showcases the work of all the graduating students. This year, it’ll feature the the graduating Bachelors, who show projects tackling the controversial redevelopment of Flinders Street Station in Melbourne, and the graduating Masters, who’ll showcase three distinct projects. Our organising team of five including myself are happy to present “ANALOGUE” (that’s an artsy theme, in case you haven’t guessed).

Architecture Graduate Exhibition - USyd - Logo

If you are available in Sydney on the 5th of December, be sure to drop in at the Wilkinson Building at 148 City Road around 6PM for live music (which I shall participate), free booze (which I shall graciously donate), and perhaps some design here and there.

This year shall also feature the release of the first online graduate exhibition catalogue. This’ll be reused in future years. It’s still under wraps but will be released at UsydArchExhibition.com once I have enough entries. You may also follow our Analogue Architecture Exhibition Facebook page where we post ongoings – you might witness the 200 plinths we built (don’t mind the mess in the backdrop, that’s the natural state of a creative environment).

Analogue Architecture Exhibition Plinths

Back to work!

Life & much, much more

A bullet point blog post because I’m back in business

What a hectic month. Will post about projects later, but here’s a bit of here and there:

  • Final exam on Monday 18th then I will truly be free.
  • All servers and boxes updated to latest software after several months.
  • Amarok is an amazing app, but that it took me this long to wrap my head around is a little sad. The MusicBrainz tagger is a lifesaver.
  • New GPG keys. It’s been 3 years since my old one.
  • Finally got around to talking to the registrars upstream to remove the hold status from WIPUP.org. It’s back online, still running the old Eadrax, but has some hotfixes applied.
  • The KDE Connect GSOC project is great.
  • The Sydney Architecture Revue went very well. Can’t wait for next year.
  • Oh, what’s this?

More posts later.

Life & much, much more

Architecture IRC channel on Freenode

Most of my readers will know that despite the majority of my blog posts being about technical content, I actually study architecture. The crossover between these two fields from my experience seems to be rather minimal. The computer geeks know a little about buildings, but not enough to do much about it. Similarly, the architecture folks dabble with computers, creating fields such as algorithmic architecture and parametric design. This dabbling rarely turns into anything serious from either party, and it’s quite hard to find an online community of those who are interested in both. I hope to change that with the new architecture IRC channel on freenode.

I recall lurking with the hopes of meeting another architect in #architect for a while. Occasionally someone would come but never stay, and the original channel founder left and hasn’t been back for a year or so. For this reason I have now registered ##architect (the double hash prefix due to Freenode’s channel rules) and will lurk yet again. I hope by writing this blog post other architects might notice and pop in.

What is IRC and how do I join the architecture IRC channel?

I realise that many architects might not be so familiar with what IRC is. IRC can be thought of as an online chat room divided into channels, which represent common topics of discussion. These channels are grouped into networks, which are simply organisations that provide these channels. So the full access details you need are as such:

Network: Freenode
Channel: ##architect

Just like you need a program such as Skype in order to chat with others using Skype, you will need an IRC program to chat with others on IRC. I recommend using downloading Quassel – it works on Windows, Mac and Linux.

If you don’t want to use a program, you can easily chat using the online Freenode webchat service. It’s super easy to get started, just type in a nickname for yourself and put ##architect in the channel box, and press connect.

Finally, don’t worry if nobody seems to be around, just stick around and we’ll respond when we’re back at a computer.

See you in the architecture IRC channel!

Edit: some people have popped up but leave quite quickly. Small IRC communities are frequently inactive but need people to stick around for it to grow. Please consider waiting a few hours, or just connecting frequently and when somebody else is also around we’ll have a chat.

Life & much, much more

Sydney revue coming up from the architecture faculty!

As some might remember, I was involved in a Sydney revue last year by the university of Sydney architecture faculty as the musical director. It was called Game of Homes (a shameless pun on the Game of Thrones series). Not only was I involved with music, it also gave me the wonderful opportunity to create a 3D animation for its opening sequence based on the original (and very well done) Game of Thrones sequence. You can view the animation sequence and corresponding revue poster in this post.

As this is an annual event, I’m happy to say that I’m again involved in it this year (as music again) and would like to present Floorless, a spaghetti western with a particularly complex pun for a title. It’s a joke on both the film Lawless, and on Flawless with an architectural twist. Get it? Nope? That’s alright. Me neither.

Sydney revue architecture

Anyway, you can tell that this is a quality Sydney revue because it has a quality poster. This means that if you’re in Sydney on the 5th, 6th or 7th of September, you should buy a cheap ticket and watch it.

Sydney revue poster alternative

It contains all the right ingredients for a successful western. These include bandits, sherrifs, the town stranger, the town drunk, the fastest shot in the West (which may sometime be the town drunk), the banjo brandishing hillbilly, the lonely harmonica player, a whip*, the mayor, Mexicans, the fine lass, and a Final standoff with capital F.

Also, there used to be an official revue website somewhere but as I can’t find it I assume that someone forgot to renew the domain and the site no longer exists.

Cheers, and see you at the event!

  • the whip may or may not be used at the actual event, and audience are recommended to not buy tickets for the front row.
Creative

Blender panoramic renders howto and demonstration

Doing a Blender panoramic render isn’t easy. This is because you can’t actually see what you’re going to create in the regular OpenGL-shaded 3D view. In fact, even when looking through the Blender camera, you won’t see what you’re going to end up with.

Blender panoramic renders with Blender Internal renderer

The technique is actually rather simple: just select the camera. Then in the object data settings panel, just click the panoramic button and play with the focal length until you get something you want. You can see an example of how to create a simple Blender panoramic render in the screenshot below:

Blender panoramic settings

You’ll soon discover is that you can only actually see what you’re going to get when you hit the render button. If you’re using the internal Blender renderer, this’ll become a pain really quickly. This is because you’ll have to constantly hit render and wait for the image to come up.

Blender panoramic renders with Cycles renderer

However if you switch the scene to Cycles Renderer, things become easier. This is because Cycles provides a real-time rendering view. Just set one window open to rendered view and you’ll see what you’re going to get (roughly) in real time. At the same time, you’ll notice that Cycles opens up new options on how your panoramic render should be like: the type of panoramic – whether it’s fish eye, equidistant, or rectangular, and how many degrees the field of view is.

Blender cycles panoramic camera settings

Now comes the fun part, actually building your scene. The best strategy is to have planned out your scene beforehand on paper so you know its composition. With panoramic renders, if you haven’t already got a scene built, now is your chance to bend reality in a Dali-esque manner and have fun with perspective.

Once your composition is planned out, create simple cubes and planes as proxy objects for the rough locations of where your scene objects are going to be. Then slowly replace them with the more detailed meshes of what you want to make.

Another useful tip is to use the Blender preview window. In Cycles, when in camera view, just press shift-b and drag and drop a cropped portion of your screen, and it’ll only render that area. This keeps rendering times low. There are plenty of other tips on how to reduce rendering times, so I won’t repeat them all here.

Below you can see a panoramic render I did a few months ago which uses the above techniques. As you can see, I’ve blended several scenes together with varying perspectives, which was only possible with a panoramic render.

Blender panoramic render

Good luck, and create those awesome renders!