You may have noticed a 3D effect to my website. This will appear if you're using up-to-date versions of Google Chrome, Safari or Firefox, among others. It works best in Webkit (Chrome/Safari), but if it isn't working smoothly, it should turn itself off. Or you can control its effects using the options at the bottom right.

Older or non-standards compliant browsers (yep, that's you, Internet Explorer) can't do the effect at all. Even mobile browsers do it to a degree, although because of the lack of a hover I've disabled the effect by default on mobile browsers just so it doesn't confuse the users, but it can be turned on manually.

I've wanted to create an effect like this after being impressed at the Crysis 2 game menus, which had a pleasing 'wobble' to the screen as you moved the mouse across its interface. I've seen sites doing similar things before, but in Flash, which I prefer to avoid.

How the magic happens
Have a look at the source javascript file and look for 'updateScene()'. This is called every time the mouse moves, passing to it the new coordinates of the mouse. Depending on what options are enabled, it will then tilt and/or scroll the page appropriately. A quick calculation is performed based on the window width and mouse position to work out how much to tilt by. The tilt then happens by updating the CSS of two containing divs - one across the X axis, one across the Y axis. Two divs were required because the CSS 3D transform cannot update both X and Y simultaneously, so I just decided to move the outer div in X, and the inner div in Y to achieve this effect. It also moves the background in the opposite direction.

If 3D scroll is enabled, it will call a jQuery plugin which enables CSS transformations to be more easily called by jQuery. A 3D scroll to this script then happens based on the class name of any element named 'layer' on the page. Each element with a 'layer' class also contains a number to say which layer this element should be moved as if it is contained within.

What next
Opera and IE interpretations of 3Dness appear to differ from other browsers, so I'd like to get something working in these. The whole thing is a trial at the moment - mainly to see if it could actually be done in any browser, and it could certainly do with some optimisation and tweaks. But I'm fairly happy with it... for now.

This is a website designed to share motorsport news and videos.  Once logged in, you can view feeds from various websites and have the option to share them on the home page to comment and rate.  

There is also a countdown calendar to the next race for sports covered, as well as relevant Twitter feeds.  A mobile view allows content to be displayed seamlessly - whenever the screen is detected to be less than a certain width, mobile view is enabled by adding a class to the main container.   Items are then selected through CSS based on this new container to switch dynamically between views when required.

The content for the feeds section is dynamically retrieved from public RSS feeds after a fixed period of time, and the first 200 characters of the feed are stored in a local database, so as not to keep pounding external servers each time a page loads.  The URL of the original article is also stored, so a link is displayed to view the whole article - the website acting as a kind of advertisement for multiple relevant websites.

View site

I'm refreshing everything on my site, and so older blog posts may now have links that point to places that no longer exist.  For history's sake, I'm keeping the old blog posts as they are, as all the content within them should still be fine, but links may not be!

This application is all about managing tasks. To begin with, click the 'create new task list' at the bottom. This then opens a panel in which the list can be named, and items inserted into it.

If logged in, changes are saved automatically so when you revisit the page, your previous settings remain, including the name and state of each task.

Click here to use

An interactive motorsport calendar. It contains events for 2011, and displays the status of each event - whether past, present or future - and highlights this in the interface.

For F1 events, there's also the option to view an archive of races from the BBC website's Classic F1 series.

Click here to use

A game created in JavaScript for your entertainment. Containing retro style glowing graphics - assuming you're using anything better than evil IE8, otherwise you don't get the pretty glows and nice rounded corners. This is an update of the last JavaScript Game I made - I said I'd update it at some point, and here it is. Runs much smoother, although visually I preferred the lighter background looking back, but that's just an easy CSS change.

The idea is to guide the ball through the holes to reach the bottom. The arrow keys, mouse, or a touch screen can be used to control the ball. It technically works on phones as it's not Flash based and widths are set as percentages, but it depends on your screen resolution and graphics provider as to how well it will work.

It heavily uses the jQuery animate tool, as well as the jQuery Rotate plugin, and took around 3 hours to make. The rows are generated randomly with PHP, so the difficulty can also vary slightly between refreshes. A difficulty trigger is activated when the ball reaches the bottom of the screen - when this happens, it speeds everything up as it assumes it has been going too slowly for the player until this point.

High scores are kept locally and per session, but in future it would easily be possible to have them saved in a database. Try it for yourself, it demonstrates itself better than I can explain in words!

Click here to use

A quick app to read RSS feeds from external sources and display them on the page. Three sample feeds are included as demos, along with the ability to add a fourth (which isn't saved).

When clicked, links are expanded to reveal the additional content contained in the feed, as well as a link to the original article. Any images in the feed are displayed directly in the page with styling to prevent them taking over the screen.

A web-based "instant" messaging system - not quite instant because there's a 1.5 second delay while checking for data, since browsers don't have push facilities to be told to retrieve data from the server.

This app requires registration, and from there you can add friends to talk to (assuming they're already registered). An upload function is available to share photos and files, which are then displayed in the page, as well as recent messages. The option to view the past week or day's worth of chat with one particular friend is available, along with email notifications.

It works by sending a request to the server to detect whether an update to a chat has been posted. If it has, the data is then retrieved and instantly animated into the chat window. It's really much more clever than I can put into words - give it a try!

Decided it was time to update again. It's built with a PHP framework with a MySQL database and jQuery. In the webapps section, there are several things to play with, some of which are enhanced by registering, and so there is a log and registration function added.

The design is built in a way that it should scale down nicely to mobile phone screens without the need for a separate site. Widths become percentage in the CSS based below a certain threshold, and a little jQuery animation helps the style along, but it isn't necessary to enable JavaScript - it only adds to it.

Clicking on a video will play in the browser if the screen width is high enough for it to safely assume the page is being viewed from a PC. If not, the video will be linked to as a normal file, so the device can play the video in whatever player it likes. I didn't want to go down the route of PHP or JavaScript browser detection, and rather keep everything nice all on one page without thousands of if statements. Also, click on images in the blog section, they whiz about before your eyes.

Not a lot more to say really, just have a look around. It'll probably change next week when I'm bored of it again anyway.

Only had tickets for the Friday this year (which I'm glad about given that Alonso won...) - here are some pictures.

There was also a cool camera on a wire at Luffield, which used to be the final corner until they changed the layout for this year.

They opened up the old track for us to wander onto:

And here's the new pit paddock:

Kobayashi made a mess of his Sauber in FP1:

Hamilton:

Button:

The safety car, which at this point of the season had led the second most amount of laps this year, after Vettel:

Moved to Luffield for FP2, and saw this GP2 driver getting a sneaky tow:

For a long time only the Toro Rossos were out:

And then more came out, including Rosberg, which produced a crisp photo:

I won a place at the FOTA fans forum, which the best thing I can describe is that it's like Comic Con but for F1 instead of TV and movies. It was worth the 4 hour drive. The place is really impressive - difficult to believe that it's a factory for building cars, everything was spotless. I got to sit in an MP4-12C! The panel gave interesting although at times generic answers. The drivers (Hamilton and Kobayashi) came across really well. Hamilton buggered off immediately though, while Kobayashi stayed behind for autographs and things, which was good of him.

We weren't allowed to take photos inside, so the only photos I managed are of the exterior of the building. I'd love to work there. They gave us a book as we were leaving too - it's £40 on their site!

There are videos of the event here:

Session 1: Martin Whitmash [McLaren], Ross Brawn [Mercedes], Graeme Lowden [Virgin Racing] and Bob Fearnley [Force India]


Session 2: Paddy Lowe [McLaren], James Allison [Renault], Paul Monaghan [Red Bull]


Session 3: Lewis Hamilton and Kamui Kobayashi


And photos here:
http://gallery.me.com/latphoto#100330

Was a good day out - I'd recommend it to any F1 fans if you get the chance to go to one!

I wish I could say I worked on this, but I just wanted to comment on how amazing it looks - I hope there's a lot of motion capture, otherwise my head may explode from the amount of awesomeness if I discover it's all key framed. Make sure you watch the 720p version and in full screen. ;)

The trailers for the previous games are also equally impressive, getting better with each year - here's the one for Brotherhood:



Assassin's Creed 2, and the original Assassin's Creed trailers. All brilliant! So easy to forget they're CG at times.

Character rig - Max (from 3dluvr.com).

The most up to date version can be viewed here.

Websites

Game

Feedreader

Google Maps

Chat

A calendar created in PHP to allow users to add events and appointments easily. Once signed in, clicking on a day will bring up an interface (see image below) to allow an item to be added to that day. Options become available to repeat the event every year, as in a birthday for example, or to make the event visible in the public timeline for everyone to see. The default setting is to not have events publicly visible unless you choose to make it so, and this is why I decided to require users to sign in first, rather than having a free-for-all option as with the chat.


View Calendar

I've made the calendar replace the F1 calendar in the main navigation bar, but you can still view the F1 calendar from the link at the bottom of the page.

For my final (for now) web app I've made recently, I've added an instant chat section to the site, but with image and video uploads integrated within the chat. I could spend hours talking about it, but it's probably best explained in action - feel free to try it out and ask me any questions. I've left a few explanation messages on there for you to read.

Chat here.

I've just created a feed reader in PHP and Javascript to quickly view favourite sites. It's also possible once signed in to manage your own feeds so that only you can view them, and also to not see the default ones I have added.

On the feed, you get the usual title and links sections so when you click it takes you to the article. When hovering over the feed, you also get the option to expand the feed list to view older articles (assuming the RSS feed goes longer than 10 articles), or to view the article itself - if the article is included in the description tags on the RSS feed, which is the standard. As it relies on other people's sites being done in the same way, little sections don't work, but I've added some exceptions to help work around those. It's set up so that if a website is down where the feed is hosted, it will skip that one and continue, rather than breaking the whole page.

My main reason for creating it is that I couldn't find a reader that worked exactly how I wanted - so I decided it was easier to make my own. The closest I have found to a reader I want is Newsrack for the iPhone, which I like, although when you're sat at a PC, it's pretty pointless looking at your phone.

Next step will be to improve the speed (Firefox Beta 7 helps a little for this), as it gets a bit clunky at times. The code also needs tidying up as I've been tweaking and refining. As it's only me working on it so haven't felt the need to clean up or comment my scripts like I normally would. I may change the styling slightly for an iPhone version, although the app I mentioned does a good job already I probably won't bother, unless it unexpectedly becomes amazingly popular. Loading icons would be handy too, so you know it's trying to do something (or the internet has broken).

Update: Loading icons have now been added. Also included a sidebar to add favourite links that you can return to later - works when signed in and not, so you can either have a personalised set of bookmarks, or a public set that anyone can use. Added a history too, to keep track of which sites have been updated since you last visited the page. Optimised the loading and animation a little, but it still needs the code tidying up further, It's getting there!


Handily, the loading is done with jQuery, so you only load the page once and everything animates within the page whenever you click on something.

Have a play here.

Clicking on any link in this post will take you to more photos and videos. Click on photos to enlarge.

I'm in Canada at the moment, and due to return to the UK next week. I'm now back in the UK from Canada. My original intention was to stay for a year since I had a work visa, but I ended cutting that short - I like Canada, but I just didn't find a place I wanted to stay for an entire year, so quickly decided to have an extended holiday rather than an entire year.

I started in Toronto, and BUNAC organised for travellers on the group flight (I think around 12 of us) to stay in the Global Village Backpackers Inn, which was so terrible I abandoned my further night's stay in search of somewhere without rodents or giant centipedes infesting the beds. This kind of put me on the back foot from the beginning, although I did stay in Toronto for a total of around three weeks before moving on, so I feel I gave it a good shot. It was just too big and noisy for my liking, coming from smaller cities in the UK. Once I'd gone into tourist mode, I strangely started enjoying the place a little more though - the CN Tower is probably the most touristy thing to do in Toronto.

I then met up with three other people that were on the same flight who had similar feelings as I did, and we visited Ottawa, then Montreal, before returning back to Toronto. Ottawa and Montreal were nice enough places, but again didn't have the 'this is where I want to stay' feeling. It was at this point I'd decided a year wasn't going to work, and chose an extended travelling holiday to explore the country rather than making use of my work permit to stay for longer. Given the stories I've heard from others that have chosen the opposite, I feel I made the correct decision, even if it was a waste of money sorting out the visa.

Next stop was Niagara Falls.

Impressive falls and cheap accommodation, which was nice. The town itself was tackier than Blackpool if you can imagine that, but it was a decent enough place to stay for a week. I went on the Maid of the Mist boat tour for free too, since of the group of 49 people ahead of me, only 46 showed up so the next three in line received free tickets. It was very wet, but spectacular. There were fireworks on the Friday right by the illuminated falls.

From Niagara Falls it was back to Toronto for a short stay, enough time to visit the Toronto Islands at sunset, shortly before taking the four day train across to Vancouver.

It was surprisingly pleasant on the train to say I was stuck there for so long. I also came to the conclusion that I've enjoyed the travelling more than the actual destinations. I'd much rather have had a more definitive plan set out before leaving to see much more of the country, stopping off at places for two or three nights before moving on. For this I think I would have needed to rent a car, which would have also provided more freedom of where to go. Churchill is one place in the middle of Canada I would definitely have liked to have gone, for example - to see the polar bears and northern lights.

Anyway, Vancouver.

Vancouver is a city of two very distinct halves. There's the part you're supposed to see, which looks like the photos I've taken, and then there's the part nobody wants to see, with homeless people, many of whom mentally ill, that the government doesn't visibly appear to be doing anything to help. The downtown and harbour areas were pleasant though - I rented a bike to go around the sea wall and see the Pacific ocean for the first time.

I also saw some raccoons in Stanley park.

At this stage it was clear city life wasn't really for me - not the cities of this scale anyway. So I went to Banff, mostly because of the images I've seen of it. It was easy to take similarly spectacular photos.

The reality of Banff is that it looks exactly like the photos you might find on Google. Very picturesque, so I stayed for a couple of weeks and climbed mountains, rented bikes and went on the cable cars. It's a shame the ski season wasn't on while I was there, since I think that's the main reason to be in Banff - and also the reason that after two weeks, I felt there was nothing more to do, so headed back to Vancouver for my flight.

I've enjoyed Canada, it's a nice country with mostly friendly people. I'm looking forward to going home though, you forget the little everyday things you miss that you take for granted.

The Biodome (cost me $9 to get in instead of $12 because I walked - eco friendly 25% discount):

The F1 circuit!

Downtown from a distance:

A lock outside Houses of Parliament:

Houses of Parliament:

Parade:

CN Tower:

And I didn't fancy taking photos of much else.

A video containing animated characters. Some are key framed, some motion captured and others simulated.

I went to Silverstone this weekend for the Formula 1. Spent FP1 at Luffield, FP2 at Copse, FP3 and Qualifying at various points in the new Arena stand, and at Vale for the race, so a nice selection of vantage points.

Took my new camera with me for one or two or 1586 photos (half of which were hilarious amounts of random blur), here's are a selection...

McLaren
Button:

Hamilton:

The on-show McLaren:

Red Bull
Vettel, before he stole a front wing:

Red Bull's number two driver:

Alguersuari peeking through the fencing:

Chandhok recovering from an off:

The drivers waving at me before the race:

Ferrari, including Alonso deciding to drive within the race circuit instead of cheating to overtake:

Hulkenberg, for no reason other than the photo came out nice:

Kubica (who gets my approval for having a hand in destroying Alonso's race):

Schumacher on his failing way to 10th place while his team mate was fighting McLarens for a podium:

GP2
A random car (no idea who since I can't follow it as BBC decided not to use their rights to show it):

A different random car doing it wrong:

Red Arrows, impressive as always:

Lots of photos came out like this because I failed at photography most of the time:

I've been working on this extension to my website for the last few days, and it's ready to be viewed and played around with. It's an online version of Blackjack, created with PHP, Javascript and MySQL, and can be played as single or multiplayer - to test out the multiplayer, just open another browser window and be another player. The aim is to get a hand as close to 21 without going over, and to beat the dealer (not the other players - each individual player just plays against the dealer).

Aces count as one or eleven, whichever is better for you - this is taken account of in the game and adds the higher value as long as it won't make you go over 21. A 2 is worth 2, 3 worth 3, etc, and face cards are worth ten.

It requires cookies and obviously Javascript to be enabled. The Javascript is the main workings of the game, calling a PHP function to check the SQL database when updates have been made, then refreshing section of the screen in an Ajax style way, allowing other sections (such as the chat) to continue independently without interruption. An auto kick function is added, so that if any player leaves without clicking the leave button, the game doesn't just cripple to an indefinite halt - players can then return when they're back.

One of the most difficult challenges was working out how to accommodate new players, and also those that leave without destroying the game. I decided to add a value to the database when a new player joins, and have them wait until the next deal, then update them into the game. A player leaving caused more problems, but I resolved this by first adding the timer so they have to leave if they don't actually click the leave button, then if they do click to leave, it takes the player's cards with them. Initially, it meant that a leaving player transferred their cards onto the next player, which would be a bit harsh if they were a bad hand. So this player is still 'in' the game even after leaving, even though their cards and score aren't visible, a message is noted that a player has left, and they are then removed at the next round.

I then added a chat function, since the server was already calling a PHP script every couple of seconds, it may as well check the file size of the saved chat, then update if it's larger. A javascript function to then force the div to automatically scroll to the bottom (and so the updated messages) is also called when loading new data. The line required, for anyone that may find this useful (it took me quite a bit of Googling, hopefully you'll fare better), was:

Where chat_div is your div ID.

It doesn't include all of the rules of Blackjack just yet - but enough to form a functioning game. Features such as splitting a hand, betting and keeping track of high scores will come in the future.

Try it out, and let me know what you think, and if you find any errors. I'm aware of quite a few ways to cheat, but I left some of the ways I thought of in there as they were handy debuggers - I'll remove them when I come to finish everything off.

www.adamgleeson.co.uk/blackjack

Adblock Plus
Adverts in general annoy me (if I want something, I'd research a type of product then buy the best one, not one that was shoved in my face), but adverts on the internet annoy me in particular. My internet connection is shockingly bad, so every kB saved is a bonus, plus Flash adverts are the spawn of Satan, especially when my PC is rendering an animation in the background.

Grab and Drag
Excellent for my Asus T91 touch screen tablet netbook. Makes scrolling similar to the iPhone or a PDF, grabbing the screen to scroll. Although my netbook doesn't work as well as the iPhone since it's a capacitive screen (and not a particularly good one at that). But it's still better than the iPad - it's running Windows 7. So I can really push the processor to its absolute limits and have IM and a web browser open at the same time. Even Flash. Sometimes applications side by side. Good lord.

Adblock Plus: Element Hiding Helper
An extension for Adblock - pressing ctrl+shift+k allows any element to be added to the block list. Handy for sections that the Adblock subscriptions fail to block on sites I regularly visit, but more usefully it highlights each div or block, making debugging easier to get things pixel perfect. There are probably many other plugins that will do this just as well, such as Web Developer.... but keeping the extensions down help with the startup time, I guess.

Auto Pager
Automatically appends the next page of search results or forums so as you're scrolling it'll be loading the next page, and you can just keep scrolling down forever without having to click 'next'. Very handy.

Glasser
Extends the Windows 7/Vista aero theme into Firefox to make it pretty.

HTML Validator
Helps find errors to make sure pages are following W3C standards. Although judging by the amount of errors Google have on their pages yet the site still display perfectly fine, I wonder what the point of W3C actually is. Although following standards does help greatly for cross browser compatibility.

Yet Another Smooth Scrolling
I love that Firefox has smooth scrolling in its options by default, but while playing with Chrome extensions (maybe that's another post some day), I discovered the Chrome version of Yet Another Smooth Scrolling and noted that it was a Firefox port, so I promptly added it to Firefox too. Makes scrolling.... smoother. With options. And a wobble when you reach the top or bottom of a page, like the iPhone.

As you may have guessed, Firefox is my browser of choice. Chrome is quickly catching up though - the main features lacking in Chrome for now are the RSS reader integrated as well as Firefox and for the adblock plugin to work as well as its Firefox counterpart. And the ability to change default colour and decoration of links - I don't like them underlined unless the designer has decided they should be underlined. Once (if) that happens, I'll probably jump over to Chrome, it's faster, both on startup and page rendering. By then though, Firefox may well have pulled something out of its sleeve too.

And there you have it. I'm not sure why I did this either... probably so I can quickly grab the links for when I next reinstall my OS or buy a new PC. Next post: my bookmarks and saved passwords.

This post is now out of date, but I've kept it in for future reference.

I've just created a few style sheets and tidied things up a little, one day this site will be finished. Maybe.

The script I used can be found here, along with instructions so not a great deal for me to talk about really.

The important thing to remember is that you don't need to define each style within the secondary stylesheets - they just act as additions to the base CSS and override anything found in there, which means the additional stylesheets can be smaller in size, which helps with the more instantaneous switch. Also very handy that it creates a cookie to remember settings that can obviously then be accessed in PHP, it's pretty much got everything sorted.

Choose from 3 colours of one theme (because I was lazy and just Photoshop hue changed a few graphics), and an orange carbon theme. Might make more, but the concept is kind of done now so not sure I'll feel the need to.

This post is now out of date, but I've kept it in for future reference.

Added what I have so far of the template website, allowing Mr Random with no web experience to create his own website.

Many things still to add, including image backgrounds (will most likely be disabled in demo), custom stylesheets and sample settings to choose from.

All features that are visible at the moment are working, however it needs a colour picker - at the moment you have to put in either the basic colour in words (eg 'black'), or the hex colour coding, which Mr Random obviously won't know.

Feel free to have a play around.

www.adamgleeson.co.uk/template

Well, after a week of my poor PC rendering, this is what I have so far. I rendered each key area in layers, so any mistakes in rendering (fortunately there were few) meant that only that section had to be rerendered, rather than the whole thing, which saved a lot of time.

I'm still adding layers as I go - the rendering hasn't finished, but here are some examples of the layers used so far. If you click on the first image, then press the right arrow key, it will scroll through each image:

Background


Helicopter


Fog (against a black background so you can actually see it)


Lens effect (not particularly prominent in this frame example but included it anyway)


Tail rotor smoke


Composited together

Things to fix:

• remove the random black object just before impact
• position the helicopter closer to the ground for final resting position
• do something about the random scenery objects (and lack of)
• fog/mist?
• smoke & explosion effects (doing in post)

For a preview before the test render, click here.

Just about finished my motorsports calendar. I've added options for links, mostly aimed at the BBC website, which have highlights of previous races, but no logical way of finding them, so this should keep them all together. I opened the ability to post links to anyone, but left them invisible until I approve them, so the page doesn't get abused by dirty spammers.

Other than adding links, the whole thing is automated, after the initial entering into the database of the various events. This also means it's very easy to include another series I may decide to watch, or if one is requested by anyone. The calendar counts down to the next event, and automatically produces iPlayer links when available, and removes them after 7 days, when they are deleted.

It needs tidying up, especially on the style front, both visually and code (I added inline styles rather than using up the main stylesheet, when I should have really added a unique stylesheet for it but realised too late as I expanded it), but for now it does its job.

I've been playing with the delights of HTML5, and added videos to hopefully replace Flash. Not that I had a problem with Flash, but YouTube/Google are doing it, so that means everyone else has to because they're obviously correct - Google wins at the internet.

But the immediate advantages are the performance and quality, and it just feels nicer that it's embedded better into the page, although it has broken W3C complicances... for now.

The problem is that not all browsers support HTML5 - yes, you again, Internet Explorer. I hate you so much and never miss an opportunity to tell everyone how irritating you are. But even then, the browsers that do support HTML5 don't all support the same filetypes. Webkit (Chrome/Safari) play nice MP4/M4V file types, which means they play well on the iPhone and support an image to display that invites you to click to play.

Screenshot of the iPhone version of my site displaying the graphic that predictably leads to the video when tapped.

Firefox has done an IE and done things differently by not supporting MP4/M4V, and supporting OGG/OGV instead. The quality of the Firefox video is slightly inferior since I've had to put the video through two lots of compression (AVI > M4V > OGG), but hopefully in a future update Firefox will support MP4s so everything can be uniform. Or a good OGG converter appears - my attempts at finding one have resulted in me discovering SUPER, which does a good enough job at the actual converting, but takes far longer to start up than it does to convert. And I have to put an M4V through rather than the original AVI, because it adds a random green bar to the bottom of AVIs. Incidentally, I'm using Handbrake for the M4Vs.

The videos then fall back to Flash in Internet Explorer (playing the MP4 file rather than FLV to save another convert and upload). I doubt IE will support HTML5 this decade, so I guess Flash will be around a while yet. Not that that's a bad thing - Flash is great. But not so good for video, even though it has been the standard for so long.

I plan on creating a custom interface for the videos but for now I've allowed the default browser interface to be displayed, with a simple 'play' graphic over the top.

A quick video to show progress on the project I'm currently working on, along with a model of the real life car I created a while back for comparison.

Has an engine...

... and is going to involve lots of these blocks.

This is a project that formed part of my postgraduate degree which I have continued to improve afterwards, and the videos in this post should demonstrate some of its functions. I'll also explain the methods used, although I won't go into too much detail, but feel free to ask me about any specifics in the comment section after the post.

The intention of the rig is so that you can quickly and easily animate a vehicle that has been modelled without having to worry about the physics, as the rig will handle that with scripts.



The project started off life as a reactor-based rig, which was fairly easy to set up, and can be seen in a tutorial I wrote on building it. This method works well for simple animations, particularly over bumps, but I found to be quite limiting for manipulating the steering or for swapping the vehicle for another one without having to change all the settings.

I soon decided that scripting was the way to go. I followed techniques similar to this tutorial. I didn't actually follow this tutorial, but it does contain many of the techniques I did learn how to do, and I wish I'd have found this while constructing my rig. The main difference is that that is designed for a tank with tracks, while mine needed to be to suit any four wheeled vehicle, which I later expanded to allow any (even) amount of wheels, but not tracks.

The first thing I needed to do was to allow the wheels to determine where the ground was, so they could travel up and down terrain. This allowed the vehicles to not be stuck in flat, boring car parks. To do this, as in the tutorial mentioned above, I used the Conform tool on a plane and attached the wheels to it. I then used a spline curve as the path and made the conformed plane controller move along the path.

I now had a path and height sorted, the next thing was for the wheel rotation. A scripted expression was needed for this and required knowing the radius of the wheels, the length of the path, and the percentage of the path that the vehicle is situated at any given moment on the timeline. After adding these as variables in an expression for the z-axis rotation of one of the rig's wheels, the following expression should then calculate the correct rotation at each frame:

where pathpercent is the current percentage along the path that the vehicle has travelled, distance is the total length, and rad is the radius of the wheel.



The rig was now at a point comparable to reactor, minus the bump physics, but allowing the vehicle to have direction without having to pause the simulation and create new settings. The problem with the direction change is that the wheels remained pointing forwards, rather than in the direction the car intends to travel - it needed steering. This was done in a similar way to the wheel rotation, in that it was done with expressions, although it required further objects to be placed in the scene. One such object was for a marker to follow along the spline curve path slightly ahead of the path that the main rig is about to travel. This meant there was a way of knowing which direction is coming up, and so the wheels could face this direction, taking care to ignore the axis controlling the wheel rotation.

The final major obstacle was getting the vehicle to bank realistically on corners or when traversing bumps. In the following image, you can see a couple of controller points to act as the main chassis, and these were used by adding position and orientation constraints in the motion wheel tab, then making the geometry that is following the spline curve bank on corners and using appropriate settings, and making one of the two objects in the rig mirror this position. The other object remains static. A third object is then placed and takes the average orientation of these two objects, and it is this that the main body of the model will be attached.



For acceleration and braking banking, the current speed was calculated using an expression, and set to a slider manipulator in the interface, and this speed controls two objects in the world space, one of which moves in the vertical axis depending on the speed. The difference between the two objects (one of which remains static) is then used to determine how much the car should rock forwards or backwards - ie, it calculates how much the speed has changed from one frame to the next. This is then multiplied by a multiplier variable set by the user using a slider manipulator to control how much the car should move - so how stiff the suspension should be. An F1 car for example would have stiffer suspension than a road car and thus be less visually active on weight shift.

The rig is controlled by the user using sliders (create > helpers > manipulators > sliders), which are tied to various elements of the rig. Things like the wheel size and heights of the front vs the rear wheels, ride heights and wheel base and widths can all be controlled, allowing easy addition of any wheel-based vehicle. Other elements such as the steering look-ahead, steering override (to allow for oversteer - see below), speed and weight shifts are also controlled in this section to cater for different vehicles - a truck will clearly behave differently to a Mini Cooper, but they can both be used on the same rig without needing to change any of the scripts.



The sequence below will demonstrate how to add a custom model to the rig, and give a further insight into how the rig is put together.

Start slideshow

And that's the basic story of the rig. I went on to add further controls such as oversteer and the ability to add a driver, and these can be seen in the Motorway F1 video. The oversteer, which is a slider attached to the y-rotation of the main rig, ties in with the steering override, and is to be done manually, as it is difficult to predict how much oversteer is required. Wheelspin is a further addition and behaves in a similar way, allowing the front and rear wheels to rotate independently and at varying speeds, or to behave normally - this is a choice left to the animator.

I hope this helps someone, and that I have the balance between detail and being boring right.

Links to other videos containing the car rig on my site:
Motorway F1
Bugatti Veyron vs Eurofighter Typhoon
Reactor Physics
Car Rig Tutorial - 3dsmax
Car Rig - WRC
Car Rig - F1

I've created an iPhone version of the website, mostly to take advantage of the automatic rotation after seeing an article on Engage Interactive. If you're using an iPhone or an iPod Touch, you should be sent there as soon as you visit my site. If you don't have an Apple product, you can view the site here, although it'll not make much sense since it doesn't know which direction you're facing to be able to display the appropriate content.

So instead, here are some screenshots - taken with the phone's built in screen capture, by pressing the home and power buttons simultaneously.

The home page:



Phone rotated to the left:



Phone rotated to the right:



After touching a video, it will play in the iPhone's default player, although for blog content videos, as they are uploaded in FLV format (as opposed to M4V that I used for the dedicated video page), they won't play [although I've now gone through and converted some of the videos and added links when visiting on the iPhone page]. When the video has finished or you click done, it then throws you back to the page you came from.

I'm going to continue working on things like the missing videos, and allow comments to be added to blog posts (not that I get - or expect - many comments; it's just for my own concepts more than anything else) to make it as close as I can to the main site, and allow devices without accelerometers to be able to use it too.

One thing I really like is that if it looks correct on one iPhone, it'll look correct on them all. Saves a lot of time testing and then fixing all the issues Internet Explorer inevitably brings up, which also means it doesn't matter so much about complying to W3C standards (assuming they matter to you). And Safari supports CSS3 styling, so easy shadows and rounded corners without having to use graphics, which obviously helps with speeding up the download of pages on poor connections.

Finished updating the site. Split content into technical and design to be able to include web design work as well as 3D and more graphical projects, to demonstrate more of my skills. Even if one person may not be necessarily interested in the other half of the site, it allows me to show that I can do more than I was previously showing.

Also included a jQuery tab system to quickly slide between tabs within sections. The background and main video as well as many of the graphics and buttons have been altered too, to give a cleaner look.

Some grass and foliage tests I've been working on. The video is of randomly (although you wouldn't think it from the brief video) moving and populated grass. The image below is static, but also randomly generated from a series of grass blade model meshes.

I'm leaning towards the style from the video, simply because it's animated and also is quicker to render, although for a still image, the static would obviously be better as it looks slighly better - although I will continue to work on the animated grass.

The final video can be viewed here.

Further tests included using displacement textures, which, depending on the amount of grass I need, may prove to be the best - certainly for long range. Because it isn't actually using polygons, it renders much faster so is better for larger areas. There's also a small amount of moving grass inside the displacement texture map area to hopefully provide a better result.

This may be the method I use for wider angle shots, and then for closer shots set it up to use the completely animated style as in the video. This should be less of a problem where the camera is in motion, as it would be difficult to actually tell exactly how the grass looks when it's more of a blur.

I'm also using this opportunity to experiment with other render methods including lighting and mental ray raytracing and shadows.




Bloom and lighting effects, as well as camera effects such as vignetting and depth of field:


Sky change, trees, specular highlights, road textures, lens blur:


More objects added. Close to being ready for vehicles and animation now - need to dirty up the textures really first though I think...

Almost every website I have created has also required a content management system of some sort to enable the client to update their website without needing to go through me for a small update, which allows the site to be standalone until a major update or refresh is desired.

I expanded from this to also build a completely custom website package, which allows clients to control not only the content, but also the layout. Colours, background images, fonts and text alignments are all examples of what can be quickly and easily modified on each page. Pages and tabs can also be created, so the system can be used to create two totally independent-looking websites using the same base code.

For a group project on my postgraduate degree, programmers had to work with artists to produce a small computer game. To assist with this, I made a small website that allowed contributors to post updates in a comments section, upload new artwork and designs, or share the latest version of code. Messages could be left and email notifications sent to all members of the minisite if desired (a login was required, so everyone had to register and leave an email address).

The site worked well and was regularly used, and feedback was positive in that it was much easier to write reports based from the content that had been contributed throughout the project rather than searching through endless emails as had been the case in the past.

This program was written by me from scratch to send out custom emails to members who have opted to subscribe to monthly email newsletters. Each issue follows a template that is easily updated using the CMS to insert news and images into various categories. Email recipient lists can then be assigned to the created email to be sent out, with the number of recipients sent to a batch queue to reduce the load on the server, as it is required to send out almost 2,500 emails at the same time. It is written in PHP, using MySQL.

Here's what I got up to this weekend and took a few photos and videos. Despite the FIA and FOTA's best efforts, a race happened and everyone was happy for a while.

The video above is of the start and isn't great as I was trying to actually watch it rather than video, but it'll do.

Friday
Pits Straight - Free Practice 1
Mark Webber entering the pits:

Rear of McLaren:

McLaren interior after asking the guy guarding the car to take a photo, who surprisingly obliged:

Safety car:

Abbey Chicane - Free Practice 2
Lewis Hamilton:

Felipe Massa:

Timo Glock:

Saturday
Luffield - Free Practice 3
Robert Kubica:

Giancarlo Fisichella:

Nico Rosberg:

Sebastien Vettel:

Rubens Barrichello:

Copse - Qualifying
A Red Bull following a BMW and running slightly wide onto the dirt:

The remains Adrian Sutil's broken car after brake failure:

Porsches:

Becketts - GP2
Lucas di Grassi forcefully overtaking:

di Grassi again with a cool exhaust:

Sunday
Stowe - Race + Buildup
Driver parade:

The Stig being a chauffeur:

Jackie Stewart forgetting to turn up in a recent car:

Red Arrows:

Nick Heidfeld, Fernando Alonso, Lewis Hamilton and Robert Kubica:

Jenson Button struggling on to 6th place:

Sebastien Vettel after winning:

Lewis Hamilton about to entertain the fans supporting him with a couple of doughnuts, which I thought was a nice touch and most likely earned him a fine from an FIA determined to prevent a show:

A few renders of the Black Hawk model I created. A final video of it in action can be viewed here.

Chrisalis Flowers is an e-commerce website that I designed and built on a freelance basis. It uses PHP and a MySQL database and content management system to be self-maintained and updated by the client, with categories and new products easily created, removed or updated, with images and various other options for each item.

The AGCAS website is made using Ruby/Rails, and was functioning prior to me joining the company. I have since added new features and styles, such as integration with Google maps, a complete overhaul of the layout to bring it up to date without losing existing familiarities and features, and other tweaks and fixes. It is maintained by a team of people, using GIT as the version control software to keep each other up to date.

The UT3 City "mod" is available to download here. View the original report here. If you download it, please let me know, and tell me what you think in the comments.

No longer available to download - sorry.


It is a cross between a map and a mod, and could serve to become the base of a game with some tweaking. It is a basic city environment with options for global events such as weather and time of day, and is full configurable. A gameplay element could easily be added on top to form part of a mod and retain all the options.

A GUI is included from which to alter the settings, and was made with Windows Forms/C++ so requires all the required elements for that to run. Alternatively, the .txt file that it creates can be edited manually, and the commands can be found below.

Installation
For installation, copy the CTF-City.ut3 and CTF-City.ini files into the folder

and copy City.upk into

I haven't tested the file location for a Steam installation of the game, but the structure should be fairly similar.

For the external application to have any effect, the event.txt file that the .exe creates needs to go into where the game is installed:

The CityConfig.exe should ideally be in this same place as the .txt file that is created goes into the same location as the .exe for now, so perhaps a shortcut made to the .exe would be worthwhile.

Loading the mod
Load UT3, select instant action then capture the flag. "City" should appear at the bottom of the list. Select it, click next, and set the bots slider to 0 (this will be overridden by game elements so having more than 0 will produce different results) and then start the game.

Console commands
To execute a console command, open up the console and type "causeevent" followed by one of the commands below. The variables are self explanatory so I won't go into any detail except where necessary. Some of these commands can also be manually put into the event.txt file if you don't have the correct framework installed to run the GUI.

[Download link at bottom of this post]

This is a Far Cry 2 map I made a while ago, and is intended for the "Uprising" gameplay style, where each team has to capture three points in the map.

There is a capture point within the base of each team, which means it will be difficult to capture one of these alone, so relying on teamwork and coordination. The final capture point is in the middle of the map at the top of a tower, with three vantage points to provide long-ranged cover, or from which to attack the opposing team.





The image on the right is of the UFLL's base, and contains a tower, which the APR team doesn't have. However, there is a lot of cover, so the advantage of having a high point from which to attack is reduced by the fact that the opposition can sneak through all the cover. There is also a lot of tall grass in the map, giving the tower an opportunity to pick out people crouching and sneaking through the grass.

There are barricades to help prevent enemy vehicles from driving into the base and spawnraping everyone, although the players also spawn in elevated positions where vehicles are unable to reach, so irritations like this should be impossible.

At each spawn point there is a choice of a boat or a 4x4 to drive, both with mounted guns, so a team of two or more is ideal to make an attack, especially if the two vehicles coordinate and allow those on foot to advance first to time their runs to meet at the same time.

This image shows the other team's base, which as mentioned earlier doesn't have a tower, but the run towards the base is in the open so should be more easily defended, as you can see in the image directly below.

I set the weather to be slightly stormy to allow the foliage to move, although not excessively. After testing the motion at this setting, it provides ample cover in the long grass for players to crouch through and remain relatively undetected, meaning players should hopefully stay and defend their capture point where they are safer and able to try to pick out long range attack attempts.

An image of one of the high places that give a line of sight to the central capture point. There are many different methods to achieve the targets in the map, with multiple routes and vantage points leaving the players to explore, but the map isn't too open that anyone will become lost. A road also highlights the route to help prevent the feeling of not knowing where to go, which is often a problem with custom maps, especially with players new to a game or gametype. Where a player would gain an advantage from sneaking through the grass, another player could gain an advantage by using a high place to spot them, but at the disadvantage of being easily spotted. The positioning of vehicles and pickups and scenery is intended to make the game balanced not only between opposing teams, but also between individuals in a team - taking a vehicle has advantages and disadvantages, whereas typically the game favours players with a vehicle and can be frustrating for players without one.

I have tried to alleviate as many of the problems that I have found with maps in the past, although as with all game content. more testing with many players will be required to find out how successful the map really is.

Download (4MB).
This file then needs to go into the "/user maps" folder either in your "Documents/My Games" folder, or within the main game directory.

If you download it, please let me know, and tell me what you think in the comments.

This tutorial is to create the simple car rig you see in the video above using 3dsmax and Reactor physics simulation. I'll assume you don't know much about 3dsmax or Reactor, so should be able to follow it and get similar results to me. I'm going to provide all the values that I used so you can repeat exactly what I have, but feel free to experiment.

First, create a cylinder with radius 10 and height 1. Increase number of sides to 36 to make the motion a little smoother. Set the pivot point to be centred by going to the Hierarchy tab at the top of the right hand panel, then click "Affect Pivot Only", and "Centre to Object". This makes sure that the position of the wheels will be symmetrical on both sides when we come to add extra wheels. You can also make the height greater than 1 to make it a bit more sturdy, but 1 worked just fine for me in the video you see above.

Centre it to the origin by changing the space setting to 'World' (see below), and then right click on the slider of each axis of the object's position to set it to 0.



Rotate the cylinder 90 degrees along the y-axis, then move it 15 units in the x-direction and 20 units in the y-direction. It's easier to rotate if you turn on Angle Snap Toggle like I have in the image above (5th icon on the right of the 'world' selection). Then to move it exactly 10 units just type in 10 at the bottom, rather than moving it manually with the mouse. This value has to be exact to make sure the opposite wheels are also moved 10 units so the car is balanced.

Create a copy of the cylinder (shift and drag) in the y-direction and move it a sensible distance, as much as you like really. I moved mine 40 units, so it was balanced out with my y-position of the front wheel - so I set the y-value to -20.

Next make copies of both of these wheels by shift and dragging in the x-direction. Then set the world x-value to -15, to balance out the original wheels. You should now have something like this:



Now create a box. Mine has length 40, width 20 and height 10. The number of segments can remain at 1 for now. If you've done the above steps the same as me, you can right click on each positional axis of the box to reset it to the origin, and it will sit perfectly the middle of the wheels.

Create a simple plane and move it underneath the car so far to act as the ground.

Reactor time. If you haven't done so already, it's probably easiest to right click on the top toolbar and bring up the reactor toolbar. Select all objects in the scene, then select the first icon in this toolbar, which should be 3 boxes. This will add your objects into the simulation.

Select the wheels and open the Property Editor (4th icon from the end in the toolbar). Set the mass to 10. Select the box and set its mass to 25, and change the simulation geometry to bounding box. Select the ground plane and set it to unyielding and concave mesh.

If you preview the simulation now (2nd icon from end in toolbar), you should have all the objects in the scene, and everything falling to the ground when you press play. A cool thing you can do in the preview is right click an object and fling it around, but that's not very helpful just now.

You should have something like this uncoordinated car now:



To attach the wheels, add a Toy Car (12th icon from start of toolbar) into the scene by selecting it then clicking in the scene. On the panel that opens on the right, click the "none" next to Chassis and pick the box. Click the Add button underneath wheels and add the four cylinders.

To give the car some forward motion, tick the 'spin wheels' box.

Open up the preview again and you should now have a moving car. You can play around with the suspension to make it look a little more interesting - the lower the value, the softer it is. Edit the ground plane for some bumps and it will work them out and drive over them where physics will allow. I used a simple noise modifier on the plane on the video above, but you can edit however you like.



This is exactly what I used in this video. For my more advanced rigs I didn't use reactor, so they'll require a different tutorial at some point if there's any requests for it.

Well, here it is. My first tutorial. I've decided to write this tutorial on creating a basic RSS/XML feed in PHP because it's something I couldn't really find a good tutorial on to suit my needs, so hopefully this will help somebody out. The same technique can also be applied to create XML feeds for sitemaps, which is always good for search engines.

I'll assume you have content being fed from an SQL database, know how to connect to the database from your website to display the information, and this is the content you expect to be put into your feed. It's quite a basic tutorial, so aimed at PHP novices, as I guess many tutorials are as that's kind of the point.

To begin with, create a blank .xml file on your website, and give it full control access in your web host settings. Mine's in the root of my website - http://www.adamgleeson.co.uk/rss.xml.

Next, in your admin area, make the rss.php page. This needs to include your database connection information as usual.

Then from this point onwards, the RSS/XML content will be added to as one single variable in PHP. This means the file will effectively be one long line, but web browsers and feed readers will sort this out and make it into a sensible layout as long as all the tags are correct.

The XML file needs to start with a definition and a channel open tag:

Note the ".=" to keep adding to what is previously in the variable without discarding it.

Continue by adding title and description tags for your feed. A title tag I would say is the minimum, but if you don't even want that you can skip this section I guess.

Now for the feedy goodness. Grab your SQL from the database like you would for a normal page:

And open up tags to start a new feed item:

Add the title of the item, or whatever your table field heading is, then close the item tag.

Next comes the description. In my description I just have the date and category, rather than reformatting the text:

Last tag to be entered in my feed is the all-important link. Just to make it easier, I've linked it to the ID of the relevant item, which the page then uses PHP GET to decide what to display by grabbing the ID from the URL.

Remember to close the item tag, then rinse and repeat as necessary. If all your data is contained within one table, this should be enough to display everything. The close bracket here is to end the while loop, while the close item tag only ends this current part of the feed, before continuing down the rest of the table as required.

Finally, close your channel and RSS tags that are still open.

Now to actually write the file. Using the empty file we created earlier, the PHP fwrite command is used to add the $xml variable we have just created into the file. Remember that PHP will only allow relative links in this stage.

Last thing to do then is simply to close the PHP tag.

To add some confirmation that it has been created (or rather, that nothing went wrong if you see no error), a simple link to the file is always helpful.

And that's it, you should now have a working RSS feed. To make the feed visible in your web browser like on many websites, add this to your head tags on the pages you want the RSS feed to be visible:

As with most web things, there are many ways of doing the same thing, and this is simply one of them. I'm not suggesting it is the best way, but it works for me, so I hope this will help someone. I appreciate any comments, let me know if it's any use to you, or any requests for future tutorials!

I think I'm finally happy with the website design again... for now. I'm surprised the old design lasted a full six months, so that did quite well, and much of the code is copied into this version of the website, just tidied up a little with all the little extras I've inevitably learnt over the past six months.

Big thanks (and a free inbound link for you, hurray!) to http://sperling.com/examples/menuh/ for much of the CSS code for the interactive drop down rollover menu. A popular one seems to be Son of Suckerfish, but I found this one to be much more useful and customisable, even though it follows largely the same structure.

As for the transparency... yes, I know. It's too much. I think I'll go and take some of it away because it's slowing some certain browsers down more than others (I'm looking at you, IE). Meh, serves those users right for not getting a real web browser I suppose. I wish IE didn't come with Windows so people were forced to go and look for a browser and install it themselves rather than sticking with IE and not even knowing what else was available.

Although if no browser was installed by default, I guess you'd have to wonder how someone would look for and install a browser on a fresh install...

Anyway, enough rambling about the gripping subject of the state of web browsers. I guess this counts as my first blog post on here. I need some vaguely useful subjects to comment on in future.

Anyway, the point of this blog section is mostly for my own selfish benefit, to get some thoughts out of my head and vent them somewhere, even if nobody actually reads it, it's out of my head and I'm happy... ish.

I expect some tutorials will be put up soon (because search engines love tutorials, so I'm told), and then a big rant on something that's bothering me at the moment...

A Flash presentation was required for an awards ceremony, but the content wasn't going to be clear until shortly before the ceremony as the winners were not known, and many other factors such as screen resolution were also unknown, so it had to be suitable for a wide range of users and machines.

I created a Flash slideshow that was programmed using ActionScript to draw from an external XML file, which was created once the winners were known using another program I made using C++/Windows Forms to generate the necessary XML structure. This allowed for a dynamic and stylish Flash presentation with more effects than a standard PowerPoint presentation, and more easily and quickly edited.

My site is written in PHP with MySQL, using strict W3C HTML, Flash, JavaScript and CSS. It has a full and custom content management system to easily update the content of any page and expands with each redesign. It also hosts mini sites such as my Blackjack game, motorsports calendar and custom template sites application.

I decided to abandon the last animation and I'm tweaking it slightly to turn it into a vehicle animation, rather than character animation.

The image is a slightly out of date render of the environment for the first part...

Should be familiar if you've seen any of my UT3 City work. I thought I'd use it in an animation at some point since the assets are all there.

Here's what I'm working on for an as-yet untitled animation that will be first rendered in 3D Studio Max, then exported and reconstructed in a game engine for comparison.

This was a project on my postgraduate degree, and tested my problem solving skills. The end result is a city that can be used as the base of a game or a mod, and has controllable events such as weather and time of day. These events can be set to automatic, so the weather and time of day change appropriately, or manually set to be permanently raining and at night, for example.

The environment and effects themselves were created in 3D Studio Max and imported into the Unreal Editor. This meant learning how the engine and its editor worked, and to research methods of improving performance so that it didn't need to be run by an unaffordable computer. A large performance increase was by using texture effects, particularly with lighting, so that lots of calculations weren't required by adding a large number of lights. Normal mapping was heavily used to simulate detail to limit the number of polygons being rendered on screen. Transparent textures were also put to good use, particularly in areas where players wouldn't be able to move through, such as wire mesh fences - which meant only having a basic plane with a transparent texture map applied, rather than modelling each individual strand of the fence.

An external program in Windows Forms using C++ was created to control these events, which output the user's selections to a text file from which the game reads from on startup to pass through the relevant information. Custom console commands were created to receive the variables and perform the necessary actions depending upon the selections made in the external application.

The main options available are the time of day and weather, with rain, snow, fog and clear weather effects created. The rain and snow effects are done in a similar way to in the Unreal game, with billboarded textures displaying a panning texture. To control their visibility, a multiplier is added to the texture flow (with anything above zero being visible), and this is animated in a maintee event, with a slider from 0 to 1 set to play over a few seconds, so the rain or snow slowly fades in or out when needed rather simply appearing and disappearing. A ground fog also appears at the same time so the rain and snow droplets don't vanish into the ground. The main fog is controlled in a similar manner.

For time of day, it can be set to dawn, dusk, midday and night, or leave it on its default setting, which is to have a dynamic time of day. The day length in this instance is possible to be altered, from 10 seconds (which was a setting mainly for me to use to demonstrate the passage of time in my videos) to 30 minutes. In this setting, the lights on the buildings will turn on at appropriate times, a sun moves across the sky displaying dynamic shadows, and the sky texture changes - the main difference being day and night, but the colour tints also change at dawn and dusk, and during weather transitions. The sky texture also has layers, so clouds can be moving independently to the main day/night effects.

A further option available is to enable pedestrians. They use a modified version of the Unreal bot AI, and randomly roam around the city, constrained to the pavements to allow vehicles to be implemented at a later date. As an additional option, these pedestrians can be made to be armed in the external application I created, in order to create a simple game, with the player needing to eliminate them before being targeted himself.

The files can be made available to download on request.

The car rig project is intended for anyone wanting to create a vehicular animation in 3D Studio Max, and formed a module on my postgraduate degree. The project has since been updated to include oversteer, wheelspin and the option for a driver, as can be seen in the Motorway F1 video on the videos page.

A scripted rig is set up to allow for any four wheeled vehicle to be applied to it, which is manipulated using the sliders as you can see in the image below. All that is required is a model of a car, to edit the ground plane for any bumps if needed, and to draw the desired path the vehicle needs to take.

Speeds can be set to automatic or manual, allowing more control. The relevant forces that need to be applied to the car are automatically calculated, and the user then defines how much impact these forces will have. So a very heavy car with comparatively light suspension can be set to lean more in corners, while a lighter car, such as an F1 car with its stiffer chassis and suspension, will tend to bank less.

Similarly, forces applies upon acceleration and braking can be applied. This is accounted for by referencing frames in advance and behind to judge whether the car is accelerating, braking, or remaining at a constant speed. The faster the speed change, the greater the angle the vehicle will dip or raise. So under extreme braking, the front of the car will be pushed onto the front wheels, while the opposite will happen under heavy acceleration. A multiplier slider function is added to allow the user control over the amount that these forces should be applied - a cartoon dragster for example may have exaggerated effects and do a wheelie on acceleration, while a more conservative and realistic road car would react more gently.

Some of the features are automatic - such as the wheel rotation. This is calculated by working out the distance travelled in relation to the diameter of the wheel. A future development would be to allow wheel spin. On a similar theme, tweaks to manually control the steering may be beneficial, to give the impression of over or understeer. Oversteer in particular would be useful for rally cars. A change in grip levels could also be a future addition, to show the effects of driving on ice for example.


To control the steering and path, a spline is drawn. There is a look-ahead function to control the direction in which the wheels are pointing, so the vehicle begins to turn fractionally before the actual cornering effect begins, as in real life. As with everything else about this rig, this is also controllable how far ahead the function views to fine tune depending on the vehicle applied.

One thing that perhaps needs some work is the reaction over bumps, which seems a little forced. This obviously isn't a problem over flat ground, but over very harsh hills, the car should give the option to bounce a little more than it does, and this is something I shall continue to work on.

To demonstrate the rig, here are links to two further videos using a rally car and an F1 car. The F1 car has skinned suspension, as it is more of an unusual vehicle, with protruding wheels, and you will see it has an over-exaggerated effect to demonstrate the vertical movement, particularly as it bounces over the curbs.

Finally, a larger version of the video above can be found here. Other video sizes of all the clips here are on the videos page.

I'm lying. My demo reels aren't online any more because I'm making new ones as they get out of date too quickly. Look out for a newer demo reel post some time shortly!

My show reels are online, links below. It comes in three flavours, one demonstrating a variety of animations, one to show special effects, and the other to mix them together and also demonstrate other related things I have done.

Demo Reel
Demo Reel - Animation
Demo Reel - Special Effects


Other videos are viewable on the videos page.