SkiFree HTML5 clone

Skifree

Play SkiFree HTML5 clone

Gaming, art and coding are three of the my most enjoyable pursuits. So with the rise of HTML5 and growing creditability of JavaScript I've decided to step into the indie-game development scene with this, a SkiFree clone.  It is my first attempt at pulling all the elements of programming, pixel art and simple game mechanics into a single game.

The next steps are to explore different game types such as 2D scrollers and RGP's, with the ultimate ambition of creating my own game creation.

Arduino Uno for Christmas

Img_20101226_193345

I was lucky enough to be given an Arduino Uno for Christmas. For those who haven't heard of Arduino before, it's an open-source programmable electronics prototyping board. It allows you to write code then flash it onto the board and interact with other electronic components such as LEDs or speakers.

For me the Arduino is the perfect combination of software and hardware. It allows me to programme then see that code interact with the physical world. For example, it only took an hour of experimenting to get a little flashing traffic light system working. The code is similar to C++, and while I'm more experienced with JavaScript and Python it was relative easy to get use to. Here's the code:

int redPin = 10;
int yellowPin = 9;
int greenPin = 8;

void setup() {
    pinMode(redPin, OUTPUT);
    pinMode(yellowPin, OUTPUT);
    pinMode(greenPin, OUTPUT);
}

void loop() {
    digitalWrite(redPin, HIGH);
    delay(300);
    digitalWrite(yellowPin, HIGH);
    delay(300);
    digitalWrite(greenPin, HIGH);
    delay(2000);
    digitalWrite(redPin, LOW);
    digitalWrite(yellowPin, LOW);
    digitalWrite(greenPin, LOW);
    delay(300);
}

 

As you can see it's relatively simple. The fun part is wiring it all up the breadboard with resisters and LEDs and seeing the flashed code running.

I'm really looking forward to making more advanced devices, ultimately culminating in a robotic arm which has always been a dream of mine to build.

World Cup Vuvuzelas Bookmarklet

So I'm really not a football fan of any kind, but the Vuvuzelas do amuse me. So, my probably one and only contribution to football is a Vuvuzela Bookmarklet that converts every bit of text on the page into Bzzzzzzzzzzz.

Updated: Now with sound thanks to http://www.vuvuzela-time.co.uk/

Pointless? Yes, but I guess that's my sentiment on football.

Update 2: It would seem Posterous is sanitising links and removing JavaScript from them. While is a very good thing, it makes posting Bookmarklets very difficult. So, for now try copying and pasting the following code into your address bar:

javascript:(function(){b=document.getElementsByTagName('body')[0];e=b.getElementsByTagName('*');for(i=0;i%3Ce.length;%20i++){for(n=0;n%3Ce[i].childNodes.length;n++){if(e[i].childNodes[n].nodeType===3){e[i].childNodes[n].nodeValue='Bzzzzzzzzzzzzzzzzzzzz';}}};s=document.createElement('embed');s.type='application/x-shockwave-flash';s.src='http://j.mp/cVTJJQ';b.appendChild(s)})()

Source code:

Running Bottle Python Micro-Framework on Dreamhost

I've been experimenting with various micro-frameworks for a few weeks now and the one that really stands out is Bottle. Bottle is a single file framework with no external dependencies, this is perfect for my needs and allows for a nice clean application. However, as I chose Dreamhost as my hosting provider (not my smartest moment), running python applications on their environment can be a headache as I found when trying to install Django.

The good news is it's pretty simple to set-up Bottle on Dreamhost and I'm documenting the process here for future reference.

  1. First, manage you domain in the Dreamhost web panel, setting PHP mode: PHP 5 (FASTCGI).
    Note: I know you can use Passenger for better performance but I was just trying to get the framework running.

  2. SSH into your domain and download the latest version of Bottle (0.64 as of this post)
    cd example.comwget http://pypi.python.org/packages/source/b/bottle/bottle-0.6.4.tar.gzmv bottle-0.6.4/bottle.py ./
  3. Create an index page what will be used as your main application. This uses Python 2.5's wsgiref so make use you path to python2.5 in your file header.
    vim index.py
    #!/usr/bin/python2.5import bottlefrom bottle import route@route('/')def index():    return 'Hello World!'if __name__ == '__main__':    from wsgiref.handlers import CGIHandler    CGIHandler().run(bottle.default_app())
  4. Make the Python script executable
    chmod +x index.py
  5. Add a .htaccess file to redirect URLs to your index.py application
    DirectoryIndex index.py<ifmodule mod_rewrite.c="">RewriteEngine onRewriteBase /RewriteCond %{REQUEST_FILENAME} !-fRewriteRule ^(.*)$ /index.py/$1  [L]</ifmodule>
That should be all you need to get going. I've used the above method to get a test application up successfully but it's still early days. The Bottle tutorial is a useful starting point and Dreamhost's wiki page contains useful information about enviroment configuration.

    Facebook Army ID Card Image Generator


    The Idea

    To explore what was possible using the Facebook Connect API, I decided to create a Army ID Card image generator. Users would either visit the Facebook application page or log-in via Facebook connect, then a JPEG image would be generated using their profile photo and details.

    Technology

    The application uses two core technologies, Facebook Connect's API and the PHP GD library. User's information is requested from Facebook via the API, this includes their profile photo, name, age, and home town. The JPEG image is then generated by a process of laying multiple PNG images, TrueType font rendering and a series of colour filters.

    Within Facebook an application is created that ties all the technologies together and allows users to visit, bookmark and discuss the application.

    Code

    The first task was to extract user information out of Facebook. Facebook helpfully provide a PHP library that ties into their API allowing for object-orientated access directly from your own application. Once I had setup a developer account with Facebook and generated the necessary API keys, accessing the gamut of user's data was relatively simple. With the user data to hand, the next step was to generate the image, this is where PHP GD came in.

    The idea was to start with a base image then add layers of text and imagery to create an authentic old looking Army ID card. I PhotoShopped a real World War II ID card, removing the photo and personal details. The coordinates for the photo location and text fields were recorded in preparation for later. Once I had a base background image, I began coding the PHP to load this image and then overlay the Facebook user's profile photo on top. It was then a process of adding additional layers on top, building up a composite image.

    Media_http1bpblogspot_ciibe


    Several colour filters are applied to both the user's profile photo and to the overall image, giving an old worn look. This was achieved using various PHP GD functions, allowed for a high level of customisation and visual tweaking.

    The final stage was to export the image as a JPEG image and render it to the HTML via an IMG tag.

    Conclusion

    I originally thought this project would be difficult. Compositing image layers in code and extracting user information from Facebook connect sounded like mammoth tasks. However, with a combination of well written documentation and access to software libraries, the project turned out to be a lot simpler than I had imagined.

    The code is not production level by any means. There are a lot of improvements that could be made, especially to CPU performance but as a proof of concept it turned out pretty well. I'd like to further this project, adding the ability for users to customise the image themselves, choosing which image to use, setting colour levels and then posisitioning elements via JavaScript drag and drop.

    The live demo can be viewed at:  http://apps.facebook.com/armyidcard/

    Twitter Trends Web App


    Media_http2bpblogspot_lfeae

    The Idea

    Twitter is a fantastic source of real-time information. With millions of active users, receiving information can be difficult. While Twitter does provide search functionality, a site based embedded solution would provide greater flexibility for site owners and could act as secondary information for site visitors. With this in mind I set about coding a real-time twitter application what could filter live tweets and display them in a dynamic waterfall.

    Technology

    At the core of the application is Twitter's API. Search strings are passed to the API and the latest tweets that contain those keywords are returned. The API is polled every few minutes and newer tweets added to a queue.

    Both the AJAX polling and the HTML DOM displaying of the tweets are handled by jQuery. I created an object namespace which contain the variables and methods, this allows for the inclusion of the application with site that has additional JavaScript applications running. The whole application is initiated on page load and the polling starts upon a user search.

    As an added bonus, current trending topics are included on the page. These trends are an additional service of the Twitter API provides.

    Code

    The entire application uses client-side JavaScript to poll a remote server and display the returned results in the client's DOM.

    A unique URL is constructed using the API address and search keywords, this is then sent to the Twitter API via a GET request which is handled byjQuery's getJSON method. While cross-domain JavaScript calls can be troublesome, the jQuery getJSON method happily mitigates this issue.

    Once the JSON has been received, the tweets are added to an array. Then, using a setInterval, the first tweet in the array is removed and added the to DOM with a dynamic show animation.

    To prevent twitter user profile images from 'popping' in due to delayed loading, they are pre-cached upon a successful GET response. To achieve this the images are append to the DOM inside a DIV that is hidden from the users view. Added the images to the DOM causes the client browser to download and cache the image.

    I also added 'pause' function to allow users to pause the flow of tweets. At any time the user can click on a tweet and it will pause the flow, highlighting that particular tweet. Clicking on the tweet again willun-pause and return the flow into motion.

    Conclusion

    Overall I'm happy with how the application turned out. I created it to learn more about the Twitter search API and visualise the real-time nature of the twitter stream, which I achieved. I learnt a lot from the AJAXJSON GET requests, most important was the handling of error responses. Initially I was assuming I would always be receiving 200's but Twitter has a limit to the number of request you can ask from every hour. Therefore, catching error code and gracefully handling them is an important part of any web based application.

    Firebug's Net view was invaluable during development, providing detailed insight into variables passed via HTTP GET request and responses. Additionally, using Firebug's built in console.log() method to print variables to the console window helped speed up the debugging process.

    Going forward the application could be developed further by integration with CMS Widgets for the likes of Wordpress and iGoogle. Additionally, the search results are not being caches, so the hourly API limit is likely to be hit quickly under heavy use. Creating a intermediate layer that stored the results in a database would elevate this issue.

    You can view the application for yourself at http://experiments.coderonfire.com/live_twitter_search/

    In Search of a Simple Web Framework

    I've worked with many CMS and web framework solutions in my time, Wordpress, TypePad, Textpattern, CakePHP, Django to name but a few. And one of the things learnt is that the balance between functionality and complexity is difficult to achieve.

    The problem I've often encountered is websites often start of with limited requirements that grow over time. A four page static website might later want content management, then a blog, comment moderation, photo uploads and so on. Pick a too restrictive solution and you'll end up being locked out of later expansion. Choose a complex solution and you risk making updating content a chore. Solutions that support a plug-in architecture, such as Wordpress, elevate some these issues but they require regular maintenance and can be prone to security woes.

    In the past I would turn to PHP to fill the gap. A couple of includes here and there often gets the job done but the resulting mess is difficult to maintain. Dedicated web frameworks can help in these situations. Django and CakePHP are ones that spring to mind but again, because they aim to cater to a large audience they often feel bloated with a lot of redundancy for simple sites.

    As of now I'm looking at CherryPy and Bottle as lightweight solutions that will abstract the code from design while not being overkill for the simple sites I'm working on. I'll write up my experience with these solutions in a future post.