Best budget smartphones

Even if you don’t see a device here with your name on it, they all prove the theory that you don’t need to spend top dollar to enjoy premium mobile features.

Nokia Lumia 710 (T-Mobile)

The $49.99 Nokia Lumia 710 is an excellent way to get the growing capabilities of a Windows Mango smartphone for a rock-bottom price. Though it isn’t an Android superphone with a luscious AMOLED display, it’s a practical device that covers all the mobile bases.

(Credit: Sarah Tew )

ZTE Warp (Boost Mobile)

The ZTE Warp offers a solid Android Gingerbread experience, rich call quality, and a conservative design, all for an affordable $199 on Boost Mobile’s prepaid, no-contract cellular service

(Credit: Josh Miller)

Pantech Pocket (AT&T)

An intriguing design, user-friendly take on Android, and a reliable camera make the Pantech Pocket an interesting choice for AT&T. It also has 4G HSPA+ speeds.

(Credit: Josh Miller)

HTC Wildfire S (Metro PCS)

The HTC Wildfire S is a beautifully built Android 2.3 Gingerbread handset with a decent 5-megapixel camera and lots of additional software features.

(Credit: Josh Miller)

Samsung Focus Flash (AT&T)

The Samsung Focus Flash offers excellent value for its modest price, with a zippy 1.4GHz processor, two cameras, and a vivid screen

Invasion Game in XNA for Windows Phone 7

Invasion Gameplay Screen Level 15


Invasion is a UFO-shooter game, originally designed by Mauricio Ritter. This article describes my port of the Invasion game for Windows (in C# and Managed-DirectX) to Windows Phone 7 (C# and XNA 4.0). The full source code is provided.

Please remember to rate this article at the bottom of the page and if you install the XAP from the Marketplace, please rate & review it there too – Thanks!


Back in 2002, Mauricio Ritter posted his “Invasion” UFO-shooter 2D game on CodeProject. It was written in C++ and used the DirectDraw APIs in DirectX 7 that Microsoft removed in DirectX 8. The following year, Steve Maier ported the game to C# with Managed DirectX and also posted it here on CodeProject. Managed DirectX went away after 2005 and was replaced by XNA. Both of those legacy versions ran on Windows XP. This article describes my 2011 week-long port of Steve’s Managed DirectX version to Windows Phone 7 using XNA 4.0.

The articles mentioned above can be found here on CodeProject:

Using the Code

In order to build the source code, you should use the January 2011 Update of the Windows Phone 7 Developer tools. While WP7 “Mango” beta tools are available, I have not tried compiling the code with them yet.

While XNA can currently be used to make Windows, Xbox 360, and Windows Phone games, this code will currently only work on Windows Phone 7. That limitation is a result of the implemented touch-screen and accelerometer inputs that replaced the mouse and keyboard inputs. To port this back to Windows, the input handlers and screen setup would need to be rewritten.

You can download the XAP file above and use the Application Deployment tool (from the Windows Phone Developer Tools) to install it on your phone, but to get XAP updates automatically, you would need to download and install the free game from the Windows Phone Marketplace.

Restructuring the Code

I had some goals for porting this game beyond “just get it working on Windows Phone 7”. Specifically, they were:

  • Redesign the code into more manageable classes
  • Make the code more readable so that beginners could understand it
  • Simplify the code by using more C# language features and XNA framework classes
  • Polish the game so that I could release it on the Windows Phone Marketplace
  • Keep it free and Open-Source
  • But still finish the port within a week!

Considering my timeframe (which I extended by a few days), I was only somewhat successful. I submitted v1.0 to the Marketplace today and consider it a “work-in-progress”.

The original code has only four source files: Invasion.csUfo.csExtra.cs, and Bullet.csUfo.cs defines a UFO class, Extra.cs defines a class for bonuses that the player will acquire, Bullet.cs defines a class for lasers and photon torpedoes, and Invasion.cs contains a class for everything else (which is way too much stuff!). In redesigning the game, I broke down Invasion.cs into multiple classes contained in these files:

  • InvasionGame.cs – The main game class for setting up the graphics device, content manager, sprite batch and 2D camera, screen manager, sound effects, music, app-level events, and scoreboard.
  • Invasion.cs – Still too big and complicated and should be further broken down into a screen-manager and game-screen subclasses.
  • ContentLoader.cs – Intended to use this to load all game content at startup, but currently only using it to load sound effects (it might go away in the next version).
  • Scoreboard.cs – A class to manage and display the scoreboard. This replaces the “status bar” from previous game versions and includes some new data items, controls, and features.
  • StarShip.cs – A class to represent our starship in the game. If aliens can have their own class, our hero should have one too!
  • TextHandler.cs – A class to manage the alpha.png bitmap font. I’ve updated the code here and added some characters to the font. Still, if you’re using bitmap fonts, you’ll find a better way to implement them in the “2D Graphics” (XNA for Windows Phone) sample at
  • BulletsManager.cs – A class to manage the collection of “bullets” (lasers and photons that have been fired).
  • ExtrasManager.cs – A class to manage the bonus items which are dropped by UFOs when they have been destroyed.
  • UFOsManager.cs – A class to manage all of the UFOs that are currently on-screen.

Borrowed Open Source Code

There were some features that I wanted to add to the game and fortunately had some already-made code files that made adding them quick and easy. You can find these files in the ImproviSoft namespace’s DiagnosticsDrawing, and System projects. Don’t let the namespace fool you though, this code is free Open-Source and my company (ImproviSoft) didn’t write much of it. The files contain comments with their source indicated – primarily Microsoft’s XNA team,, and Elbert Perez of So thank them for it! Here’s a list of those files:

  • FrameRateCounter.cs – displays the frames/second onscreen for debugging purposes, from Shawn Hargreaves (Microsoft XNA team).
  • SimpleShapes.cs – class for drawing 2D primitives (e.g., a Rectangle), from (although probably named something else there).
  • Accelerometer.cs – class for handling accelerometer input, from (Microsoft XNA team).
  • Camera2D.cs – class for handling a 2D camera (to make the screen shake!), from Elbert Perez of – thanks, Elbert!
  • InputState.cs – class for handling all sorts of input devices, including the touch-screen, from (Microsoft XNA team).
  • MusicManager.cs – class for playing background music, from (Microsoft XNA team).
  • RandomManager.cs – simple class for generating random numbers – OK, I possibly wrote this and it took just two minutes.
  • SoundManager.cs – simple class to wrap SoundEffect.Play calls for sounds with adjusted maximum-volume.
  • VibrationManager.cs – class for making the phone vibrate on command (for force-feedback effect), from (Microsoft XNA team).

The old version of the game did not have music in it, only sound effects. In adding the MusicManager.cs class, I found that Microsoft’s sample code also contained a Music.mp3 file, which is also included in the Visual Studio solution’s InvasionContent project. It loops repeatedly and if you get tired of it, feel free to turn off the music from the Options screen or replace it with your own music since you have the source code!

Code Changes Since the Managed DirectX Version

While Steve’s port to Managed DirectX in C# was a straight port of the original C++ DirectX codebase, I didn’t want to be bound by the design, data-structures, or variable names in this XNA port. So you’ll find that there isn’t a good one-to-one mapping back to the original source. I moved code all around to break out new classes, changed names of nearly all functions and variables (including the UFO class), and went to town on changing and adding data-types and function parameters. For this reason, I don’t recommend trying to decipher what I changed in the code unless you are just interested in seeing how much of it has changed. I now have a wonderful new appreciation for right-click – Refactor – Rename. I also did my best to comment the important stuff in InvasionGame.cs so that an XNA beginner should be able to follow it, and I commented a few other classes too.

Screen Size and the Scoreboard

The earlier Windows versions of Invasion used a 640×480 window-size and placed the scoreboard at the bottom of the window. Because Windows Phone’s screen is 800×480, I decided to move the scoreboard to the right (or left) side of the screen and free up the 20 vertical pixels at the bottom for gameplay use. Doing this kept the gameplay part of the screen at 640×480, which was ideal because many of the UFO sprites have hard-coded screen positions in their movement algorithms that I did not want to change (and mess up). It was also needed because with a phone screen measuring 4″ diagonal, the scoreboard text needed to be resized for readability reasons. I chose the free Neuropol font for the new scoreboard’s text. This is what the scoreboard looks like on each side of the screen. As you can see, the text in the selected weapon display still needs to be resized.

Invasion Gameplay Level 6Invasion Gameplay Level 5

I also had to change the layout of the Main menu screen for the 800×480 screen resolution and in order to become more “touch-friendly”. This is what it looks like now:


New Game Screens and Touch Controls

In porting to Windows Phone, I wanted the ability to pause the game and adjust some basic settings. Microsoft’s game requirements specify how the hardware Back button must behave, so while pressing back at the Main menu should end the game, pressing it during gameplay should open a Pause screen. The Pause screen should provide a way for the user to resume the game in progress (by pressing Back again) and also provide a way for the user to exit the game app. The Pause screen implemented does just that and allows the user the ability to abandon the game and return to the Main menu screen. I updated the Main menu screen to include navigating to an Options screen where the user can adjust the scoreboard position, music on/off, difficulty level (something that was missing in the original Invasion game), and automatic-weapon-selection (AWS – another new feature!). This Options menu screen can also be opened during gameplay by pressing and holding the upper part of the scoreboard (perhaps not a great UI idea of mine – it really should have a button). Toggling AWS can also be done by tapping the AWS icon to the left of the selected weapon display. Tapping the selected weapon will change it to the next weapon if one is available. Because all of the inputs and controls were new, I updated the Help screen:


Future Updates!

While there were many things that I wanted to get into this release, some things got cut in the interest of time. But of course, there is always the next release or the one after that. Here’s a short list of what I’d like to add, and if you’re interested in helping out, please contact me.

  1. Break down the Invasion.cs code into a ScreenManager and separate screen classes
  2. Save the user’s preferences (game settings)
  3. Save and Resume the game, and Tombstoning
  4. Better shape-based collision detection – currently using rectangles for everything
  5. Re-render sprites at higher resolution and without clipping issues (is this a possibility, Mauricio?)
  6. More UFO types and UFO maneuvers or UFO Artificial Intelligence
  7. Local/Global high scores
  8. Allow switching scoreboard position during gameplay
  9. Replace “holding the scoreboard in order to open the Options screen” with something more obvious
  10. Use the SpriteSheet code for the GameplayScreen textures
  11. Allow starship to get all the way to the left and right edges of the screen
  12. Allow starship ability to move up and down as well as left and right
  13. Make the laser’s bounding box narrower

If you have any other ideas for improvements, please add them to the comments below!

Points of Interest

Color Key Transparency in XNA 4.0

Because all of the graphics already existed for this game, I really didn’t want to recreate them. The sprite renders are a little grainy and somewhat awkwardly cropped, but they still look pretty darn good! But because they were originally rendered years ago as BMP files, and bitmap image files don’t have an alpha channel, they used color-key transparency. While Steve had converted the sprite images to PNG format, which does have an alpha channel, they retained the black backgrounds so I had to use color-key transparency anyway. In DirectX (Managed DirectX too), color-keys are set for each texture (graphics image) in code, but in Visual Studio 2010 and XNA 4.0, color-keys are set in the graphic file’s Properties. By default, XNA uses Magenta as a color key, but I wanted to remove the black sprite backgrounds, so I needed to change it. In Visual Studio 2010, click a PNG file in the Solution Explorer to see its properties. Click the little triangle to the left of “Content Processor” and set the “Color Key Color” field to the RGBA color that you want to make transparent. To change it to opaque-black, the color-key must be changed to [ 0, 0, 0, 255 ].

Pinning the Game to the Start Screen without a Tile Title

If you build this project, deploy it to your phone, and try to pin the game tile to your Start screen, you’ll see “Default Title” awkwardly emblazoned across the bottom of the tile. This is because the Tile Title has been removed from the Invasion project’s XNA Game Studio Properties. This isn’t what I really want – I want it to be invisible, so I tried putting a space character in it to resolve the “Default Title” issue. When you do this, you unpin the tile from your Start screen (if it’s there), and then open up the XNA Game Studio Properties page. Put a single space character in the Tile Title textbox and immediately build the game. The resulting XAP file will appear to have a blank Tile Title, but Visual Studio automatically removes the whitespace character from that textbox. So if you build again without reinserting the space character, you get “Default Title” again. So if you want a blank Tile Title on the Start screen, you must put the whitespace character in the textbox right before your final build. If anyone out there knows how to clear the Tile Title permanently, please let me know.


  • June 30, 2011 – The v1.0 release that I have also published on the Windows Phone Marketplace (as a free game without ads!)
  • July 2, 2011 – Article clarifications and fixed typos
  • July 10, 2011 – Added additional hyperlinks and replaced the “Comments and Renaming Variables” section title
  • December 10, 2011 – v1.1: Updated for Mango SDK, improved scoring, broke levels into waves and sectors, and made the game faster at 30fps


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

HTML5 javascript sudoku solver.


This article describes an HTML5 Sudoku solver. The entire program is in one HTML file and it uses Javascript and the new HTML5 Canvas element. This is my third article about HTML5/Javascript each article being more complicated than the previous and really just a series of learning steps for myself.


I don’t think I really need to say much about Sudoku except that it is a very popular and addictive game and there have been many articles published about Sudoku solvers in various languages. My wife actually got me interested in the game – I learned the basic rules for solving and quickly decided that I was less interested in mechanically working through various solving techniques and more interested in coding up a solver to do it for me – particulary when I hit a hard problem!

A screen shot of the application below shows the main elements. The main element is the board which shows the 9 x 9 grid divided into 3 x 3 “squares”. The “givens” are in a darker font while user entered digits are lighter. Each cell on the board has the allowed values shown in the background in a very light font. “Singles” are shown in a red font – note singles is s standard Sudoku term and refers to a case where an llowed value is the only possible one.

The current cell has a pink background and it can be changed by using the mouse to click in a cell or using the keyboard arrow keys. The user enters a digit by just typing the digit and clears it by typing the 0 digit.

Below the board is a text box containing the serial format of the board data. This is a common format used by Sudoku programs and is simply each digit on the board in order from top to bottom and left to right with empty cells represented by a “.”. As the user enters new digits the serial format is automatically updated and if the Load button is pressed, then whatever text is in the text box is loaded into the board.

All the buttons are located to the right of the board. The Load button was already mentioned but one other point to make is that if you are manually entering a problem the digits will appear as user entered but by clicking the Load button it will “convert” them to givens. Its important to distinguish user values from givens because givens can’t be modified, also when the Reset button is pressed all cells except the givens are cleared. The other buttons we haven’t covered are the Clear button which basically clears every cell including givens; Accept will convert a “single” into an actual value and Solve solves the entire problem. After solving the status is displayed below the buttons and the time taken to solve is displayed below the serial format text box.

Below the buttons are two check boxes, one to enable display of the allowed values and another to enable highlighting singles in red. Note some Sudoku players prefer not to get assistance when solving which is why you would use these options.

Using the code

The code for the solver uses the most basic techniques for solving – first scan all the “givens” and determine which digits are allowed in which cells. If only one allowed value exists then it is a “naked” single. Because each digit must occur exactly once in each row, column or square, we then scan each of these and if an allowed value only occurs once then it is a “hidden” single. Singles values are not necessarily correct – the board can get to a state where a given digit is the only digit in two cells in the same row col etc, so we test whether the value is valid before applying it.

Applying the above techniques will only get you so far. There are in fact many other manual techniques, e.g. naked and hidden doubles, triples, quads, X-wing etc. We don’t use any of these but simply adopt a simple trial and error or decision tree approach. So at a given point we find a cell with the least number of alloweds then try each one in turn. If succesful with that cell then we advance further up the decision tree, regressing when the board becomes invalid and we have run out of alternatives.

Well that’s the algorithm in basic terms. The model code was implemented in four classes as follows:

  • AllowedValues – this stores the allowed values for a cell. It is implemented in a bit mask, i.e. if the digit N is allowed then bit N in an integer is 1 while 0 is not allowed. This provides efficient storage of alloweds (which speeds up making copies of the board as required by the decision tree code) and simplifies combining alloweds using simple bitwise OR operations or removing them by masking.
  • Cell – this represents one of the 9 x 9 locations on the board. It contains the AllowedValues for the cell, the given value and the user entered value.
  • Location – this has two fields: the row and column. It is used to simplify calculations and provides useful functions like a list of locatons of sibling cells in rows, columns and squares.
  • Board – contains 9 x 9 Cell instances. It implements most of the solving related code such as calculting allowed values, singles and solving.

There is a lot of code to cover so I will just mention one key piece of code which is the calculation of the allowed values shown below.

	Board.prototype.updateAllowed = function () {
		// Called whenever the user sets a value or via auto solve
		// Updates the allowed values for each cell based on existing digits
		// entered in a cell's row, col or square
		var cols = new Array(BoardSize);
		var rows = new Array(BoardSize);
		var squares = new Array(BoardSize);

		// First aggregate assigned values to rows, cols, squares
		var locs = Location.grid();
		for (var i = 0; i < locs.length; i++) {
			var loc = locs[i];
			// Disallow for all cells in this row
			var contains = this.getCell(loc).valueMask();
			rows[loc.row] |= contains;
			cols[loc.col] |= contains;
			squares[loc.getSquare()] |= contains;

		// For each cell, aggregate the values already set in that row, col and square.
		// Since the aggregate is a bitmask, the bitwise inverse of that is therefore the allowed values.
		this._isValid = true;
		this._isSolved = true;
		for (var i = 0; i < locs.length; i++) {
			var loc = locs[i];
			// Set allowed values
			var contains = rows[loc.row] | cols[loc.col] | squares[loc.getSquare()];
			var cell = this.getCell(loc);
			cell.setAllowed(~contains); // set allowed values to what values are not already set in this row, col or square
			cell.setAnswer(0); //clear any previous answers
			// As an extra step look for "naked singles", i.e. cells that have only one allowed value, and use
			// that to set the answer (note this is different from the "value" as this can only be assigned
			// by the user or any auto solve functions like "accept singles"
			if (!cell.isAssigned()) {
				this._isSolved = false;
				var mask = new AllowedValues(~contains);
				var count = mask.count();
				if (count == 0)
					this._isValid = false;
				else if (count == 1)

		// Step 2: Look for "hidden singles".
		// For each row, col, square, count number of times each digit appears.
		// If any appear once then set that as the answer for that cell.
		// Count in rows
		for (var i = 0; i < locs.length; i++) {
			var loc = locs[i];
			if (!this.checkForHiddenSingles(loc, SibType.Row))// first check row sibs for a hiddne single
				if (!this.checkForHiddenSingles(loc, SibType.Col))// then check cols
					this.checkForHiddenSingles(loc, SibType.Square); // then check square

		// TO DO: Add code here to detect naked/hidden doubles/triples/quads


The first step is to create an array representing each row, column and square on the board. Using the Location.grid() method to provide a list of all locations on the board we get each cell, obtain its value bit mask (sets bit N in the integer all others 0) and OR them together to obtain a mask of all digits used in that row, column or square, e.g. rows[loc.row] |= contains.

Next we step through each cell again and combine the digits used in that cell’s row, column and square using var contains = rows[loc.row] | cols[loc.col] | squares[loc.getSquare()]. If the cell has not been assigned we set the allowed values as being the bitwise inverse. If only one value is in the allowed digits we set the cells “answer” as that digit – this is a naked single. I use the term answer but in fact it just a good possible.

In the final step of the updateAllowed() function we use the allowed values for each cell to look for hidden singles, e.g. we scan a cell’s row and if it has an allowed value that does not occur in any of its sibling cells then its a hiddne single.

Points of Interest

I learned a lot more about Javascript in doing this article. It is suprisingly powerful but performance varies between browsers. For difficult problems (those with 18 or less givens) I found that Chrome was clearly the fastest.


It would be interesting to try other Sudoku variants such as 25 x 25 😉 when I have some spare time. Thanks for the comments to date. I have made several fixes to the current version based on those comments.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

HTML5 animation tutorial

We are going to animate a moving car with two different HTML5 techniques.


HTML5 is becoming more and more popular. With the increasing popularity of mobile devices such as tables and smartphones, the need for alternatives to the popular Flash plugin from Adobe has also been grown. Just recently, Adobe announced that Flash will no longer be supported for mobile devices. This means that Adobe itself will focus on HTML5 as a key technology for those devices – and desktop systems sooner or later.

One disadvantage of HTML was the lack of multimedia techniques. In HTML, you could not display a video or draw on the screen. With HTML5, new elements such as <video> and <canvas> have been introduced. Those elements give developers the possibility to use multimedia technology in “native” HTML, just by writing some JavaScript in combination with HTML. A basic action that should be provided by multimedia technologies is animation. In HTML5, there are some ways to create such actions.

In this article, I will only compare the new <canvas> element with the upcoming CSS3 animation technique. Other possibilities would include the creation and animation of DOM elements or SVG elements. Those possibilities will not be included in this discussion. It should be noted from the beginning that the canvas-technology is supported in the current releases of all major browsers, while CSS3 animations are only possible in the latest editions of Firefox and Chrome. The next IE will also provide CSS3 animations.


I am currently giving a lecture on creating WebApplications using HTML5, CSS3 and JavaScript. This is a lecture with tutorials. For one of the tutorials, I picked a sample canvas animation – just showing in which direction we are heading to with a technology like this. Then I introduced the CSS3 animation in the lecture (everyone was very excited about it) and wanted to create a simple homework task using the CSS3 animations. What came to my mind was: how easy or hard would it be to actually transform the canvas animation into a complete CSS3 animation?

This involved several parts:

  • Creating all the different <div>-elements in order to “box” everything
  • Draw everything using styles on those elements with style rules like borders, background-gradients and rounded corners
  • Actually animating the elements

The reason for using CSS3 animation over the <canvas>-element is quite important: While browsers can optimize their elements performance (regarding their style, i.e., CSS), they cannot optimize our custom drawing routines used in a canvas. The reason for this lies in the browser’s ability to use hardware mainly the graphics card. Currently the browser does not give us direct access to the graphics card, i.e., every drawing operation has to go over some function in the browser first.

This problem could be prevented with techniques such as webgl, where the browser does give the developer direct access to the graphics card. However, this is treated as a security problem and will not become standardized. One important rule for developing WebApplications is standardization – since this is our portal to a huge customer base. If we excluded some of the most popular browsers, we would certainly lose a lot of potential visitors.

Starting with Canvas

Our basic HTML document looks like the following:

 Collapse | Copy Code
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8"/>
<title>Animations in HTML5 using the canvas element</title>
<canvas id="canvas" width="1000" height="600">Your browser does not support the 
<code>&lt;canvas&gt;</code>-element. Please think about updating your browser!</canvas>
<div id="controls">
<button type="button" onclick="speed(-0.1);">Slower</button>
<button type="button" onclick="play(this);">Play</button>
<button type="button" onclick="speed(+0.1);">Faster</button>

Here we set the HTML5-Doctype and build a page containing a <canvas> for drawing the animation and some buttons contained in a panel (<div>). We could have shortened the document by omitting certain tags. One of the advantages of HTML5 is that each browser has to implement certain fallbacks, e.g., if a tag is not closed or if a certain tag is missing. The shown (more complete and verbose) form is my personal favorite.

A canvas alone would not make a great painting – nor does it give us some animation. What does the actual drawing? It’s some JavaScript! The required <script>-tag is already placed in the <head>-section. In this case, we will not use external JavaScript files to get the required lines of code. This makes only sense if you consider using not many lines of code (small size) and non-repeating JavaScript. Otherwise you could benefit from the browser’s caching as well as multiple (download) connections. Another important point by using external JavaScript files is to consider moving the script-tags to the bottom of the document in order to prevent performance problems.

Let’s start by declaring some variables:

 Collapse | Copy Code
var	dx = 5,				// Velocity at rate 1
	rate = 1, 			// The current playback rate
	ani,				// The current animation loop
	c,				// (Drawing) Canvas Context
	w,				// (Car, hidden) Canvas Context
	grassHeight = 130,	// Height of the background
	carAlpha = 0,		// Rotation-angle of the tires
	carX = -400,		// (x-)Position of the car (will move)
	carY = 300, 		// (y-)Position of the car (will stay constant)
	carWidth = 400, 	// Width of the car
	carHeight = 130,	// Height of the car
	tiresDelta = 15,	// Distance from one tire to the closest edge of the chassis 
			// of the car
	axisDelta = 20,	// Distance from the bottom of the chassis of the car 
			// to the axis with the tires being attached
	radius = 60;	// Radius of one tire

	// In order to init the car canvas (hidden) we use this anonymous function
(function() {
	var car = document.createElement('canvas');	// Creating the element
	car.height = carHeight + axisDelta + radius;	// Setting the appropriate 
						// attributes
	car.width = carWidth;
	w = car.getContext('2d');			// Now we can set the car canvas
})(); // Executed directly

As you can see, most of the variables are actually used as constants. This means the code will give you some freedom in order to adjust the dimensions of the car as well as some other parameters like the speed of the car. The change in the rotation of the tire can actually be calculated by using the ratio of dx to the radius.

Another interesting property arises by looking at the bottom of the code. Here I use an anonymous function. This can be very useful in some cases. This means that variables that are declared within the scope of the anonymous function like car will be deleted by the browser and most importantly will not cause any conflicts with other existing variables.

Why is there a second (invisible) canvas set up? First of all, this will be useful in the transition to CSS3. However, this approach is also very useful in general. By using a canvas for each major object we are animating, we will be able to keep their states as they are, i.e., if we do not have to redraw them we do not have to as supposed to the approach where we will wipe does drawings away with a clean of the main canvas. Another reason is that this model allows us to think more physical. We do not have to animate the chassis (moving) and the tires (moving and rotating) separately, but just as a whole thing meaning the tires (rotating) within the car (moving). This states the physical model more closely, where the tires are rotating which makes the car moving.

Starting the loop:

 Collapse | Copy Code
function play(s) {				// The referenced function, s is the button
	if(ani) {				// If ani is not NULL we have an animation
		clearInterval(ani);	// So we clear (stop) the animation
		ani = null;		// Explicitly setting the variable to NULL
		s.innerHTML = 'Play';	// Renaming the button
	} else  {
		ani = setInterval(drawCanvas, 40);	// We are starting the animation 
						// with 25 fps
		s.innerHTML = 'Pause';	// Renaming the button

This function has already been referenced by the HTML we’ve written. Here we just start or stop the animation depending on the current state that is displayed using the ani variable. The framerate has a maximum of 25 frames per second – this might not be the best choice. jQuery is using 77 fps (13 ms) as a default for its DOM object animation. In case of this simple animation, it should give a good insight. An important issue is that our logic (dx = 5) will be bound to those 25 fps. This is something to be careful about when building professional animations or even games.

Let’s have a look at the main drawing function that will be called in the loop:

 Collapse | Copy Code
function drawCanvas() {
	c.clearRect(0, 0, c.canvas.width, c.canvas.height);	// Clear the (displayed) 
							// canvas to avoid errors;		// Saves the current state of properties (coordinates!)
	drawGrass();		// Draws the background (grass)
	c.translate(carX, 0);	// Does some coordinate transformation
	drawCar();		// Draws the car (redraws hidden canvas)
	c.drawImage(w.canvas, 0, carY);	// Draws the car actually to visible canvas
	c.restore();	// Restores to last saved state (original coordinates!)
	carX += dx;		// Increases the position by the dx we set per time
	carAlpha += dx / radius;	// Increases the angle of the tires by the ratio

	if(carX > c.canvas.width)	// We keep some periodic boundary conditions
		carX = -carWidth - 10;	// We could also reverse the speed dx *= -1;

Basically we just redraw the image. The animation is actually coming from two little methods inside. First we use a translation of coordinates to always draw to the same coordinates but being placed on a different location. The second one is the incrementation of the car’s current position. Without one of those two calls, the car would not move at all! We also outsourced as much code as possible, making it more maintainable (unfortunately, this can also decrease JavaScript code performance).

Why are coordinate transformations so important? The offer us some nice possibilities: Rotating something without writing any mathematical function at all! Or as we have seen: We can just draw to the same coordinates but receive different results. This is the power of coordinate transformation. The translation method is called by using context.translate(dx, dy) and allows us to set a new center (0, 0). The usual center is the upper left corner. If we would rotate without translating at all, we would always just rotate around the upper left corner. In order to rotate around the center of a canvas, we could use something like:

 Collapse | Copy Code
context.translate(context.canvas.width / 2, context.canvas.height / 2)

Now we look at the function for drawing the car itself:

 Collapse | Copy Code
function drawCar() {
	w.clearRect(0, 0, w.canvas.width, w.canvas.height);	// Now we have to 
							// clear the hidden canvas
	w.strokeStyle = '#FF6600'; 		// We set the color for the border
	w.lineWidth = 2;			// And the width of the border (in pixels)
	w.fillStyle = '#FF9900';		// We also do set the color of the background
	w.beginPath(); 			// Now we begin some drawing
	w.rect(0, 0, carWidth, carHeight);	// By sketching a rectangle
	w.stroke();			// This should be drawn (border!)
	w.fill();				// And filled (background!)
	w.closePath();			// Now the close the drawing
	drawTire(tiresDelta + radius, carHeight + axisDelta);		// And we draw 
								// tire #1
	drawTire(carWidth - tiresDelta - radius, carHeight + axisDelta);// Same routine, 
							// different coordinates

Here we used some of the possibilities that the <canvas>-element offers us. On the hand we do use paths (very simple – and in this case more or less obsolete since we could have used the drawRect() and fillRect() method. Again we outsourced some code in order to obtain a better maintainability. In this case, this is totally justified since we just have one method to take care of (drawTire()) instead of two identical code blocks that form one big mess.

Finally, let’s have a look at the method for drawing one of the tires:

 Collapse | Copy Code
function drawTire(x, y) {;				// Again we save the state
	w.translate(x, y); 		// And we perform a translation 
					// (middle of the tire should be centered)
	w.rotate(carAlpha);		// Now we rotate (around that center)
	w.strokeStyle = '#3300FF'; 		// Setting the draw color
	w.lineWidth = 1;			// The width of the border (drawline)
	w.fillStyle = '#0099FF';		// The filling / background
	w.beginPath();				// Another sketching is started
	w.arc(0, 0, radius, 0, 2 * Math.PI, false); 	// With a full circle around 
					// the center
	w.fill(); 			// We fill this one
	w.closePath(); 			// And close the figure
	w.beginPath();			// Start a new one
	w.moveTo(radius, 0);		// Where we move to the left center
	w.lineTo(-radius, 0); 		// Sketch a line to the right center
	w.stroke();			// Draw the line
	w.closePath();			// Close the path
	w.beginPath();			// Start another path
	w.moveTo(0, radius);		// Move to the top center
	w.lineTo(0, -radius); 		// And sketch a line to the bottom center
	w.stroke();			// Draw the line
	w.closePath();			// Close it
	w.restore();			// And restoring the initial state 
					// (coordinates, ...)

Additionally, I’ve added a preview image by using the onload-event of the <body>-element. I also included a method to increase the speed of the animation by changing the value of the dx variable. The framerate will not be changed in order to increase or decrease the speed.

This is the result of our coding. A car moving around in a canvas!

This example can be viewed live at

Moving to CSS3

The basic HTML document now has the following format:

 Collapse | Copy Code
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8"/>
<title>Animations in HTML5 using CSS3 animations</title>
<div id="container">
<div id="car">
<div id="chassis"></div>
<div id="backtire" class="tire"><div class="hr"></div><div class="vr"></div></div>
<div id="fronttire" class="tire"><div class="hr"></div><div class="vr"></div></div>
<div id="grass"></div>

The document looks quite similar to the one before. However, some things can be noted right away:

  • There is no <script>-element prepared. Instead, we will use a <style>-declaration.
  • There are no controls for setting the speed or play and pause. This is actually one of the key differences I will explain later (interaction).
  • The whole scene is already presented in HTML-elements. They are not styled right now, but they do represent the scenario we want to animate.

While animating something in a canvas is mostly a programming job, we clearly shifted towards a design problem here. We can only manage to animate the scene appropriately if we build a correct model of the scene using HTML-elements (well, <div>s). In this logical scenario, the <div id="container"> represents the canvas from before, <div id="car"> is the HTML-element that is equivalent to the hidden canvas of the previous example and <div id="grass"></div> is exactly the element that has been drawn using drawGrass() before.

The basic CSS outline is the following:

 Collapse | Copy Code
	position: relative;	/* Relative pos. - just that we can place 
				absolute divs in there */
	width: 100%;		/* Yes this will get the whole page width */
	height: 600px;		/* and 600px height */
	overflow: hidden;	/* Really important */

	position: absolute;	/* We position the car absolute in the container */
	width: 400px;		/* The total width */
	height: 210px;		/* The total height incl. tires and chassis */
	z-index: 1;		/* car is in front of the grass */
	top: 300px;		/* distance from the top (y-coordinate) */
	left: 50px;		/* distance to the left (x-coordinate) */

	position: absolute;	/* This defines the space of our car w/o tires */
	width: 400px;		/* The total width */
	height: 130px;		/* The height of the chassis */
	background: #FF9900;	/* Some color */
	border: 2px solid #FF6600;	/* Some thick border */

	z-index: 1;		/* Always in front of the chassis */
	position: absolute;	/* Absolute positioned */
	bottom: 0;		/* Will be placed at the bottom of the car */
	border-radius: 60px;	/* And there is our radius ! */
	height: 120px;		/* 2 * radius = height */
	width: 120px;		/* 2 * radius = width */
	background: #0099FF;	/* The filling color */
	border: 1px solid #3300FF;	/* And the border color and width */

	right: 20px; /* Positions the right tire with some distance to the edge */

	left: 20px; /* Positions the left tire with some distance to the edge */

	position: absolute;	/* Grass is absolute positioned in the container */
	width: 100%;		/* Takes all the width */
	height: 130px;		/* And some height */
	bottom: 0;		/* 0 distance to the bottom */
	background: -webkit-linear-gradient(bottom, #33CC00, #66FF22);
	background: -moz-linear-gradient(bottom, #33CC00, #66FF22);
	background: -ms-linear-gradient(bottom, #33CC00, #66FF22);
	background: linear-gradient(bottom, #33CC00, #66FF22); /* Currently we need 
							all of them */

.hr, .vr	/* Rules for both: hr and vr */
	position: absolute;	/* Want to position them absolutely */
	background: #3300FF;	/* The border color */

	height: 1px;		/* Linewidth of 1 Pixel */
	width: 100%;		/* Just a straight line (horizontal) */
	left: 0;
	top: 60px;		/* Remember 60px was the radius ! */

	width: 1px;		/* Linewidth of 1 Pixel */
	height: 100%;		/* Just a straight line (vertical) */
	left: 60px;		/* Remember 60px was the radius ! */
	top: 0;

Here we use classes and IDs to attach rules one or multiple times. This can be seen best by looking at the code for creating a tire. We do use two different IDs (fronttire and backtire) for distinguishing between different positions. Since both share the rest of their properties (and a rotation!), it was just useful to give them also a class (tire) which attaches some CSS rules to the corresponding elements.

The horizontal and vertical lines will be drawn using the classes hr and vr. We can use the position: absolute; andposition: relative; rules to set positions for each child-element within the mother-element. For the grass, we required a gradient to be drawn. This is no problem in CSS3. Well, maybe it is a small problem since the browser vendors are currently using vendor specific prefixes for those rules. This is an annoying fact and will hopefully vanish within the next year.

A really important rule can be found in the container itself. By setting overflow: hidden; we prevent the car from escaping from our beautiful container-world. This means that the car will behave the same way as in the previous scenario, where it was not possible to draw outside the canvas-area. However, one more really important thing is missing: the animations itself!

Definitions of the keyframes:

 Collapse | Copy Code
@keyframes carAnimation
	0% { left: -400px; }	/* Initial position */
	100% { left: 1600px; }	/* Final position */

@keyframes tyreAnimation
	0% { transform: rotate(0); }	 	/* Initial angle */
	100% { transform: rotate(1800deg); }		/* Final angle */

The first comment on those lines is a really important one: do not try making this at home! I do not show the real code here for a purpose. This is how it should look like. However, it does not (but it looks similar). The problem is that CSS3 keyframes are quite new and therefore (yes, you guess (or know) it) you require those prefixes again. Also CSS3 transforms do require prefixes. So just copy those lines and add -webkit- and -moz- and others (IE is about to come to the CSS3 animations party with version 10, hopefully Opera is about to follow!) in front of keyframes and transform.

The next thing you’ll notice is that the syntax is really clean and smooth. You just specify some keyframes (in this case, just one as an initial frame and one as a final frame) and the browser will calculate the rest. However, we cannot integrate such nice physical considerations like the relation between the angle and the position from the previous example.

Now that we specified some keyframes we need to integrate them! How does that look:

 Collapse | Copy Code
	animation-name: carAnimation;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

	animation-name: tyreAnimation;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

Again – be cautious when trying this at home. You will need some copy and paste plus you’ll have to add the appropriate prefixes in front of those entries. So this tells the browser which set of keyframes to take for the element and what kind of frame distribution within which time to consider. We also tell the browser the number of repetitions to perform. In this case, we will end up with an infinite loop.

This is the result of our styling. A car moving around in a div!

This example can be viewed live at

Comparison of the Two Methods

In my opinion, both of those methods have their benefits. The first one is actually pretty straight forward from a programmer’s perspective (however, it took quite long until this was possible in HTML / JavaScript). The second one does offer some really nice features and will most certainly be used in an amazing way to build websites that will certainly have an impact on the web’s future.

Pro Canvas-Animations

  • Interaction (like pause, slower, faster, …) is easily possible.
  • We can connect values to form one physical unit directly.
  • We do not need to know or have a complete structure before the animation.

Pro CSS3-Animations

  • The performance is definitely better.
  • We can use the full screen (100% does not work with the canvas element).
  • The frames are computed by the browser – we just specify the keyframes.

All in all, it will depend on the project (as usual). Even though I thought about some possible workarounds to actually stop an infinite CSS3-animation (and start again), it would be tedious to actually implement this in a bigger multimedia animation. Here the interaction possibilities are a clear indicator for a canvas-animation. On the other side, some small (non-interactive) animations could be done by the CSS3 technique. It provides a nice clear syntax that can be GPU accelerated by modern browsers and can be styled to fit everywhere.

Points of Interest

While writing a lot of <canvas>-animations, I never had to opportunity to write an actual CSS3 animation. This was certainly related to the propagation of this really new technique. Now that Firefox implemented the keyframes and with Microsoft up to come we will most certainly see more keyframe rules online. I thought that this technique was quite hard to write and got really surprised how easy it is. I actually had more problems with the linear gradient syntax than the keyframes one.

My only hope is that browser vendors will stop rolling out CSS rules with those prefixes. In nightly builds or such they are acceptable, but having something in a final build that is either not the standard (why rolling it out?) or standardized (why prefixing it?) but with a prefix is just a mess for web developers.

Tightly VS Loosely Coupled

Tight coupling:

When a class is dependent on other class. Suppose there are multiple classes in your Business layer just pick a class e.g. invoice and paste it in new project and build then may be class will not build as it will miss some another classes like invoice type, invoice detail or others. This means your invoice class is fully depend on other classes i.e. tightly coupled

Example of tight coupling:


 Collapse | Copy Code
public class Employee
        public string firstName;
        public  Employee()

        public string GetEmployee(int employeeId)
            string addressEmployee = string.Empty;
            Address objAdress = new Address();
            return  addressEmployee = objAdress.GetAddress(employeeId);

    public class Address
       public  Address()

        public string GetAddress(int EmployeeId)
            return "";

In this code there is nothing wrong. But if you want to get address of employee by type or by some other way then you will have to change Employee class. So here Employee class is tightly couple with address class.

Loose coupling:

in this scenario class is not dependent on other class and follow single responsibility and separation of concern concept. A loosely-coupled class can be consumed and tested independently of other (concrete) classes.
Interfaces are a powerful tool to use for decoupling. Classes can communicate through interfaces rather than other concrete classes, and any class can be on the other end of that communication simply by implementing the interface.


To avoid the dependency of address class we will use Dependency Injection. This provides the loose coupling between the object. With dependency injection you do not hard code your references to dependent objects
Example of loose coupling:


 Collapse | Copy Code
public class Employee
        public string firstName;
        private IAddress objAddress;
        public  Employee(IAddress objAddress)
        public string GetEmployee(int employeeId)
            string addressEmployee = string.Empty;
            return addressEmployee = objAddress.GetAddress(employeeId);

    public class Address
       public  Address()

        public string GetAddress(int EmployeeId)
            return "";

    public interface IAddress
        string GetAddress(int EmployeeId);

Connect to a PHP Server using HTML5 WebSockets

Before HTML5 introduced WebSockets, you had to rely on specialized technologies like Java applets (remember those?!) or, more recently, Flash. I covered some of the challenges of working with WebSockets in this early stage of development in my Making HTML5 WebSockets Work article.

In this article, we’ll be utilizing WebSockets to write a kind of automated web chat, where the other party is a machine of great intellect, called “Multivac”, named after the Chatbot demo of the Google phpwebsocket project.

As mentioned in the conclusion of my last article, we will be using the lemmingzshadow php-websocket library because it supports the newer draft-ietf-hybi-thewebsocketprotocol-10 (HyBi-10) WebSockets protocol. You’ll also need a web server that supports PHP, such as Wamp or Apache, and a fairly up-to-date browser; I would recommend google Chrome 14+ or Firefox 6+ as the best choices.

WebSocket Connections

When you see all of the files involved in managing the WebSocket connections, it quickly becomes apparent why it’s not advisable to write your won server-side code from scratch, unless socket communication protocols and other low level operations really float your boat. Nonetheless you should have some familiarity with the files that you’ll be working with; some of them, you’ll have to modify, others, are better left alone! Here’s a rundown of what’s contained in the lemmingzshadow php-websocket download:

  • server.php: Creates the WebSocket server instance, sets server properties, and registers the application to be called by the client component.
  • SplClassLoader.php: Implements the technical interoperability standards for PHP 5.3 namespaces and class names.
  • Connection.php: Manages the WebSocket Connection. The hybi10Decode() and hybi10Encode() functions are located therein.
  • Server.php (upper case ‘S’): It’s the “real” server which monitors the port for client requests.
  • Socket.php: Creates and maintains references to sockets.
  • Application.php: An abstract class that contains the getInstance() method, which ensures that applications are created as singletons, as well as the onConnect(), onDisconnect(), and onData() abstract methods which all applications must implement.
  • ChatApplication.php: A fully functional simple webchat application.
  • DemoApplication.php: A Websocket-Server demo and test application. It can either echo data back to the client or execute a user function.
  • EchoApplication.php: Even simpler than the demo app, this class just parrots back whatever data is sent to it. This is the class upon which our Multivac app will be built.
  • chat.html: The client component of the chat application.
  • client.php: A basic WebSocket client that runs from a command line.
  • echo.html: The client component for the echo application. This is the client-side component that we will be modifying today.
  • index.html: An extremely basic WebSocket server test console.
  • client.css: A stylesheet to spiffy up the browser UI.
  • client.js: A JavaScript template with everything you need to create and communicate with a WebSocket.
  • jquery.min.js: A local minified jQuery script – useful for local development.
  • json2.js: A Douglas Crockford JSON parser from

Here is how the folders should be structured under your server’s web document root:

Image 1

The Client Page

Open the echo.html page in your favorite HTML editor and you’ll see that most of what we need is already done for us. As it stands, when you enter text in the Message textbox and click the Send button, the data travels to the server.php page, is decoded, re-encoded and sent back to the browser to display in the log


not very exciting to be sure, but it does demonstrate that all of the basic processes are functioning just as they should. What we’ll do is tweak the code so that the server sends back a response based on our request. The object of this exercise is to familiarize ourselves with what code to change to develop an application based on existing code.

With regards to the client page, the first thing we’ll do is rename it to something more instructive. Let’s call it “multivacClient.html”.

Next, we’ll add a couple of new CSS classes so that we can differentiate our requests from the server responses:

.human { color: blue; }
.computer { color: green; }

We can now update the log function to accept a class argument. It’s called clazz because class is a reserved word:

var log = function(msg, clazz){ $('#log').append('' + msg + '
') };

A second way to differentiate the client requests from the server responses is to prefix them with a direction arrow: hence, requests have a right facing arrow (>) while the responses have a left facing one (

log('> ' + msg, 'human');

…and socket.onmessage():

log('< ' +, 'computer');

Another change that I would make is to update the code that creates the WebSocket object. I am not a fan of browser sniffing, so I would replace the existing if statement with the following:

var Socket = window.WebSocket || window.MozWebSocket;

		$('#log, input, button, span').fadeOut("fast");

You need a browser that supports WebSockets such as Google Chrome.

	} else {

The Application File

Now it’s time to work on the EchoApplication.php file. Open it up and save it as “MultivacApplication.php”. Rather than take the received data and spit it right back, we’ll send it to our process() function:

    public function onData($data, $client)
        foreach($this->_clients as $sendto) {
            $this->process($sendto, $data);

The process function evaluates the $action parameter and sends back the appropriate response. I will admit that the AI component of this app is a little weak, but IBM wouldn’t lend me the code for Watson:

  private function process($sendto, $action) {
	    case "hello" : $sendto->send("hello human");                        break;
	    case "hi"    : $sendto->send("greetings human");                    break;
	    case "name"  : $sendto->send("my name is Multivac, super-genius."); break;
	    case "age"   : $sendto->send("I am far too vain to say");           break;
	    case "date"  : $sendto->send("today is ".date("Y.m.d"));            break;
	    case "time"  : $sendto->send("server time is ".date("H:i:s"));      break;
	    case "thanks": $sendto->send("you're welcome");                     break;
	    case "bye"   : $sendto->send("bye");                                break;
	    default      : $sendto->send($action." not understood");            break;

The server.php File

This file is where you would set your basic initializing details such as the server name or IP, port number, as well as your application name and class. There’s also an added security feature to check the “Origin” header in WebSockets handshake. Though it could still be potentially spoofed, browsers always add the Origin of the page which initiated WebSockets connection:

$server = new \WebSocket\Server('localhost', 8000);

// server settings:

$server->registerApplication('multivac', \WebSocket\Application\MultivacApplication::getInstance());

Note that the application name (‘multivac’) must match the Socket call in your JavaScript code:

var socket = new Socket('ws://localhost:8000/multivac');

Running the Application

Open a command window and type the following to launch the WebSocket server process and register our application:


Here’s what I entered in my Windows DOS prompt:

C:\Program Files\wamp\bin\php\php5.3.8>php.exe "C:\Program Files\wamp\www\phpwebsocket\server\server.php"

If all went well, you should see a confirmation message that says “Server created”.

Start up your web server and make sure that PHP is enabled and working.

Launch your web browser and enter the URL of the multivacClient.html page:


Look for the green online indicator in the top-right corner to confirm that you are connected to the WebSocket server.

Try some commands, then click the Disconnect button when you’re done.

Image 2


There’s a lot that can go wrong when a technology is made up of so many interconnected parts, but hopefully you’ve learned enough here today to avoid the most common pitfalls. WebSockets is definitely something to watch to see where it leads. I for one can’t wait!