From the category archives:

Programming

Basic 3D Engine Design

August 23, 2007

Ray Casting is a extremely fast method of generating 3D images using high-school level mathematics.

Remember playing Wolfenstein 3-D? This was one of the first games made using the ray casting technique.

Wolfenstein 3d

The graphics in Wolfenstein don’t even come close to today’s gaming standards; but it was still impressive for it’s time. It was also fast, considering the speed of the hardware it ran on.

Although ray casting is an outdated method, it’s a good introduction to 3D imagery and game design. It’s also quite easy to recreate yourself (if you can remember pythagoras theorem).

The basic idea of ray casting is very simple. To transform a 2d image map into a 3d representation, “rays” are projected from the viewer towards the light source. If a ray hits an object on the 2d map, a vertical line is drawn on our “3d” image to represent this section of the wall or object. Think of the image as vertical slices.

This diagram might do a better job of explaining.

Ray Casting

Textures can be applied using texture maps but unfortunately other effects like reflections aren’t so easy to create. They can be faked though.

If you’ve got nothing to do for a few hours, consider creating a simple ray cay caster in your favourite language.

Here’s a few resources to get you started.

{ 0 comments }

Facebook Code Analysis

August 16, 2007

Facebook Code Analysis

Most developers have now heard about Facebook’s leaked index.php source code, which was anonymously posted here. If you haven’t seen it already, there are a number of links listed on Techcrunch.

I’ve seen a few bloggers criticize Facebook developers for using procedural programming rather than classes and object oriented techniques. I’m not exactly sure why they’ve chosen to develop the site like this; but I am going to take a guess and say it was to improve speed and efficiency.

Object oriented programming was first introduced to PHP in version 4. However, the language wasn’t originally designed around objects and classes, so the implementation was clunky and awkward. This meant that procedural code was often much faster than object oriented code.

Considering the size and popularity of social networks, I’m not surprised they chose procedural code over objects. That tiny boost in performance would easily outweigh the advantages of using classes.

Fortunately, most (if not all) issues with objects have been solved in PHP 5, which is now closer to a truly object oriented language.

{ 0 comments }

Check Username Availability

August 8, 2007

The goal of a signup form is to quickly convert visitors into registered users. The easiest way to increase your sign up form’s conversion rate is to lower the amount of time it takes to complete.

One way to do that, is to add a “check username availability” feature. Users will often choose conflicting usernames, especially on large community websites.

Rather than reporting the error on the next page, give the user a quick and easy way to check their username availability. This will speed up the sign up process.

As always, start with your interface. A simple form with a text box, a div, and a “Check Availability” button is all that’s needed. You can copy the HTML from the demo.

Check username availability

Using the prototype javascript library, we will send an AJAX request to a seperate checkuser.php page, which will print either 1 for “available”, or 0 for “not available”. Our javascript function will print the appropriate message in our div, then highlight the textbox with green (available), or red (not available).

Here is the checkUser() javascript function. Don’t forget to include the Prototype Javascript file.


function checkUser(user)
{

  var url = encodeURIComponent('checkuser.php');
  var params = 'user=' + escape(user);

  new Ajax.Request(url, {
    method: 'get', parameters: params,
    onSuccess: function(transport) {
      if(transport.responseText == 1){
        $('userstatus').innerHTML = 'Your username is available.',
        $('user').style.backgroundColor = '#caffd5'
      }else{
        $('userstatus').innerHTML = 'Sorry, that username is already taken.',
        $('user').style.backgroundColor = '#ffd4ca';
      }}});
}

View the Demo.

This is only a small way you can increase the effectiveness of your sign up form. I will be writing about other methods in the near future.

{ 0 comments }

Building a Website for your Application

August 2, 2007

So your project is nearly finished, now all you need is a website to get the word out. PownceUnfortunately this stage of the project is often neglected, which is understandable. Programmers want to work on the actual application rather then the website. However, your visitors aren’t going to download your application if they can’t find the download page.

As a developer (and as a consumer), I see lots of software websites that could be improved. Here are a few tips for making a good application website.

  • Show a screenshot of your application on the homepage

    Most of the time, this is what I look for first. At a quick glance I can see if the application is going to do the job I want. I often download software based solely on the screenshot.

  • Make sure the user can get to the download/purchase page within 1 click

    Firefox has done this part right. Nothing works better than an eye-catching “Download Now” button. The goal of your website is to convert visitors into downloads, so it’s wise to get your users to the downloads page as soon as possible.

  • Explain in 2-3 sentences what your program is and how it helps people

    This should be the first thing your visitor reads. Make it short and to the point. Crimson editor has an excellent description on it’s homepage…

    “Crimson Editor is a professional source code editor for Windows.This program is not only fast in loading time, but also small in size (so small that it can be copied in one floppy disk). While it can serve as a good replacement for Notepad, it also offers many powerful features for programming languages such as HTML, C/C++, Perl and Java.”

  • Host a demo of the application or the application’s admin section

    Dont make your visitors type ‘admin’ and ‘demo’ on the demo login form, it’s annoying, auto fill the fields.

  • Don’t use bad stock photography

    Personally, I prefer software websites without any photos. But if you have to use them, don’t include cliche photos of people in suits or talking on cell phones.

    People associate these type of photos with faceless corporations.

  • Include a news bit

    Often one of the first things I do when looking at an application’s website is scan for the latest news to see how active the project is.

  • Screenshots and gallery

    If possible, have a screenshots page with at least 5 – 10 good screenshots of your application.

{ 0 comments }

← Previous Entries

Next Entries →