I found the best collision detection example at Mr.Doob’s three.js repository on github. In fact that are a number of examples there. These examples use a couple of utility files, namely CollisionUtils.js and Collisions.js that can be found along with the example code. I’m pretty sure that I checked out the latest revision of the three.js code from github but the CollisionUtils.js and Collisions.js utility files that are available here didn’t seem to come with it. I used these utility files in order to implement collision detection in my little exploration where they allowed me to use:

THREE.Collisions.colliders.push(
	THREE.CollisionUtils.MeshOBB( cube ) );

Essentially this creates an Object Bounding Box (OBB) around a THREE.Mesh object (cube in this example) and adds it to a collision detection list (THREE.Collisions.colliders as defined in Collisions.js). The MeshOBB() method is defined in the CollisionUtils.js file. In my code I added a number of cuboid objects to my 3D scene and also added them to the collision detection list (using the code snippet above). My plan was to then determine if my moving 3D object, or character, had collided with any of these cuboids.

In order to determine if my moving character had collided with any of the other objects in the scene (the objects on the collision detection list) I used the THREE.Ray class. The following segment of code determines the position of a theoretical focal point of this ray (think beam of light) that lies somewhere in front of our character. As our character rotates the focal point rotates also.

I believe that the distance specified in the second argument to the THREE.Ray constructor essentially represents the direction in which the ray is to be sent. I’ve used a value of 1000 in this example but it could have been a much smaller value.

// Using a little trigonometry calculate a point in
// space 1000 units in front of our character
var deltaX = Math.floor(Math.sin(mesh.rotation.y) * 1000);
var deltaZ = Math.floor(Math.cos(mesh.rotation.y) * 1000);

// Calculate where this collision focus point is in
// relation to our character position
var focusX = mesh.position.x - deltaX;
var focusZ = mesh.position.z - deltaZ;

// Fire a ray from the centre point of our character to the
// collision focus point
var ray = new THREE.Ray(mesh.position,
	new THREE.Vector3(focusX, 0, focusZ));

var c = THREE.Collisions.rayCastNearest( ray );

if(c && c.distance <= 50)
{
	console.log(c.distance);
	tween.stop();
}

The rayCastNearest() method is used to determine if the ray coincides with any of the objects that were added to the collision detection list that was populated earlier. If there is an object (or collider object as I’ve shown in the figure below) that the ray intersects then the object returned by the rayCastNearest() method includes a distanceproperty that tells us the distance between position of our character and the collider object. In the code extract above I’ve specified a distance of <= 50 as my character had a length of 100 and so 50 is the point at which the face of my character would potentially collide with any collider objects. If a collision occurs I stop the tweening update so that my character stops moving.

Note: In the figure above I’m pretty sure that I should have shown the z-axis as -z.

Once I’ve actually produced a practical demonstration of this theory I will post again with an example.

Finally

I just wanted to provide some further links as I did a little bit of trawling on the net when I was first researching into collision detection. I’m not sure that I’m using the best technique but there still seems to be validity in the methods that I’ve used. I came across a discussion on the Mr.Doob github pages where someone was unsure of how to find the direction for the THREE.Ray. The individual concerned did some searching themselves and came up with a slightly different method of determining the Ray direction than I did.

At one stage I was considering the use of the JigLibJS library as discussed on Tim Poon’s site. Didn’t go down this road in the end but could be interesting.

Of course I also found the code examples that come with the three.js library fairly useful too.

In the end I elected to use the MooTools library; actually I’m only using the Class definition of that library so far. I’m just rather unimpressed with how classes, sorry reference types, are defined in JavaScript. Certainly when compared to how easily and seemingly naturally this is done with other modern languages. There seem to be a number of different techniques, or patterns, in use by the JavaScript community but in the end I decided to just use MooTools. I think that my main reason for electing to use the MooTools library was due to my desire to find out how to distinguish between private and public class members in JavaScript. I was doing some Googling one day and found something about how to define private class members with MooTools. I know this can be done without resorting to the use of a framework but sometimes I just want to get on with things and not worry about the boring details. Note to self: have a good look at the underlying principles of reference types in JavaScript sometime, e.g. the use of prototype.

So, I’ve been playing with a bit more of the Three.js library, been using the Tween.js library to perform some very simple movement and the Require.js library to bring everything together in a structured way.

Using the require.js library allows me to have just a single <script> tag in my HTML that references my main JavaScript file, namely main.js.

Managing JavaScript Files with require.js

Here’s the HTML.  The main point of interest here is the <script> tag I think. I’ve added some buttons to control the movement of the 3D object that I’ll discuss in a bit. I’m not going to apologise for the lack of styling and the ugly buttons; but I am sorry about that! In future posts I will attempt to make things a little tidier.

<!doctype html>
<html lang="en">
	<head>
		<title>A moving shape - Made with three.js</title>
		<meta charset="utf-8">
	</head>
	<body>

		<div id="container"></div>
		<div>
			<input type="button" id="fwdbtn" value="FWD"/>
			<input type="button" id="rotateleftbtn" value="ROTATE LEFT"/>
			<input type="button" id="rotaterightbtn" value="ROTATE RIGHT"/>
		</div>

		<script data-main="js/main" src="js/require.js"></script>

	</body>
</html>

Next is the JavaScript. Firstly is my main.js file that creates the 3D scene, adds objects to the scene and assigns event handlers to the buttons that were defined in the HTML previously. The first point of interest is the use of the require() function (line 1 in the main.js file shown below). I’m not going to discuss the details of the require.js library, suffice to say that this line ensures that the Character.js, Tween.js, RequestAnimationFrame.js, three.js and jquery.js dependency files are loaded before the inner function is executed. I’ve found that the use of the require.js library has given me the ability to place JavaScript code in smaller files rather than one large file and means that I don’t have to place numerous <script> tags in my HTML. There are many other benefits to using the require.js and I urge you to take a look at it.

Animating

I’ve attempted to place all code that deals with my movable object, or character as I have called it, in its own JavaScript file, Character.js. The Character.js file contains the definition of the Character class that is instantiated on line 4 below. Below this a little jQuery is used to bind methods of the Character class to click events on the buttons.

require(['96methods/Character', 'libraries/Tween', 'libraries/RequestAnimationFrame', 'libraries/Three', 'jquery'], function(Character) {

	var camera, scene, renderer;
	var character = new Character();

	// Add some button click event handlers:
	$("#rotateleftbtn").bind('click', character.rotateCharacterLeft);
	$("#rotaterightbtn").bind('click', character.rotateCharacterRight);
	$('#fwdbtn').bind('click', character.forwardCharacter);

	// Initialise and then animate the 3D scene!
	init();
	animate();

Following this is the init() method again as I’ve used previously in other posts (and in fact seems almost like the three.js standard). The key diferences between this version and what I did previously are rotating the camera so that it’s looking down upon the scene a little and using the createCharacter() method to add the ‘character’ object to the scene. Again this method is defined in the Character.js file (see later in this post).

Then come the animate() and render() function calls to perform the scene update; again as I’ve described in my previous post. The key difference here is the addition of the TWEEN.update() method call (line 79). TWEEN is yet another JavaScript library that I’m using to give me tweening functionality. Essentially everytime the animate() function is called the character object’s update method is called to reposition my character.

	function init() {

		// Instantiate the 3D scene:
		scene = new THREE.Scene();

		// Instantiate an Orthographic camera this time.
		// The Left/Right/Top/Bottom values seem to be relative to the scene's 0, 0, 0 origin.
		// The best result seems to come if the overall viewable area is divided in 2 and
		// the Left & Bottom values set to negative
		camera = new THREE.OrthographicCamera(
			window.innerWidth / -2, 	// Left
			window.innerWidth / 2,		// Right
			window.innerHeight / 2,		// Top
			window.innerHeight / -2,	// Bottom
			-2000,						// Near clipping plane
			1000 );						// Far clipping plane

		// Set the camera position so that it's up top and looking down:
		camera.position.y = 100;
		// Rotate around the x-axis by -45 degrees:
		camera.rotation.x -= 45 * (Math.PI/ 180);

		// Add the camera to the scene:
		scene.add(camera);

		// Define a cylinder object, well a cone anyway:
		cylinder = new THREE.Mesh(
			new THREE.CylinderGeometry(25,	// Radius top
				100,						// Radius bottom
				100,						// Height
				25,							// Number of segments in circumference (i.e. how smooth)
				5,							// Number of segments high
				false						// Open ended
			),
			new THREE.MeshBasicMaterial( {color: 0x372AFF} )
		);
		// Position it slightly to the right of the scene...
		cylinder.position.x = 400;
		// ...and add it to the scene:
		scene.add(cylinder);

		// Define our character shape and location within the scene:
		character.createCharacter(0, 0);
		// Add it to the stage:
		scene.add(character.getMesh());

		// Instantiate the renderer
		renderer = new THREE.CanvasRenderer();
		// .. and set it's size:
		renderer.setSize(window.innerWidth, window.innerHeight);

		// Place the renderer into the HTML (inside the #container div):
		$('#container').append(renderer.domElement);

	}

	function animate() {
		// Defined in the RequestAnimationFrame.js file, this function means that the
		// animate function is called upon timeout:
		requestAnimationFrame( animate );

		render();

		// Update the character position
		TWEEN.update();
	}

	function render() {

		// *** Update the scene ***
		renderer.render(scene, camera);
	}
});

As mentioned earlier, I’m trying to place all of the code that handles my moveable object in the character.js file, and therefore in my Character class.

There’s more require.js magic here to define my character module and specify the dependencies for this module, i.e. the three.js, mootools-core-1.4.2.js and Tween.js files. Once these files have been loaded a new instance of the Class object is returned (and thus available to the main.js file). Details of how the Class function works can be found in the MooTools documentation (see links later in this post).

Firstly a number of private member variables are declared and initialised then, to differentiate between private members and public members, the class is ‘appended’ to (at line 24 of character.js) specifying the public methods.

The getMesh() and setMesh() accessor methods are simply used to get/set the mesh data that is encapsulated within the Character class.

The createCharacter() method is responsible for instantiating the mesh for the character and setting its initial position in the 3D scene.

// 96methods/Character.js

// Character class definition

define(['libraries/three', 'libraries/mootools-core-1.4.2', 'libraries/Tween'], function() {

	return new Class(function() {

		// Private members
		var mesh = null;
		var width = 25, height = 25, length = 100;

		var tween = null;

		var currentAngle = { angle: 0 };
		var targetAngle = { angle: 45 };

		var currentZPos = { zPos: 0 };
		var targetZPos = { zPos: 100 };

		var actualAngle = 0;
		var actualZPos = 0;

		Object.append(this, {
			// Getters/setters
			getMesh: function() { return mesh; },
			setMesh: function(value) { mesh = value; },

			// Methods
			createCharacter: function(xpos, ypos) {
				mesh = new THREE.Mesh(
					new THREE.CubeGeometry(width, height, length),
					new THREE.MeshBasicMaterial( { color: 0x121212} ) // Material
				);

				mesh.position.x = xpos;
				mesh.position.z = ypos;
				mesh.position.y = 0;
			},

The forwardCharacter(), rotateCharacterLeft() and rotateCharacterRight() methods are bound to the buttons in the HTML and are responsible for controlling the movement of the character (ok it’s an oblong and not a well defined character but I’m taking small steps at a time here) when the buttons are clicked. If we focus on the rotateCharacterLeft() method:

			rotateCharacterLeft: function(event) {

				// Reset angle info:
				actualAngle = 0;
				currentAngle = { angle: 0 };

				// Define the tween along with the update function:
				tween = new TWEEN.Tween(currentAngle)
					.to(targetAngle, 1000)
					.onUpdate(function() {

						// Calculate the difference between current angle and where we want to be:
						var difference = Math.abs(currentAngle.angle - actualAngle);
						actualAngle = currentAngle.angle;

						// Rotate about Y:
						mesh.rotation.y += difference * (Math.PI / 180);
					})
					.start();
			},

The tween variable is assigned an instance of the Tween class; again see the Tween.js library (links a little later in this post). The argument to the Tween class’s constructor, currentAngle in this case, specifies the variable that will be used to track the current state of the animation as time progresses. The to() method then takes the target state and the time in milliseconds that the animation should take. In my example I’ve set the duration to 1000 milliseconds or 1 second. The onUpdate() method allows us to specify a callback function that is called when the TWEEN.update() method is called (see the animate() method of main.js shown earlier). In the case of the rotateCharacterLeft() method example the angle will be updated until it reaches the target angle of 45 degrees. Each time the callback function is called we calculate the difference between the current angle as determined by the tween and the actual angle the character is positioned at and move the character by this difference. The end result is that the character object rotates by 45 degrees in 1 second.

Here’s the remainder of the character.js file. The main point of interest here is in the forwardCharacter() method where the translateZ() method is used to move the character object, rather than rotating it.

			rotateCharacterRight: function(event) {

				// Reset angle info:
				actualAngle = 0;
				currentAngle = { angle: 0 };

				// Define the tween along with the update function:
				tween = new TWEEN.Tween(currentAngle)
					.to(targetAngle, 1000)
					.onUpdate(function() {

						// Calculate the difference between current angle and where we want to be:
						var difference = Math.abs(currentAngle.angle - actualAngle);
						actualAngle = currentAngle.angle;

						// Rotate about Y:
						mesh.rotation.y -= difference * (Math.PI / 180);
					})
					.start();
			},

			forwardCharacter: function(event) {

				// Reset z-pos info:
				actualZPos= 0;
			 	currentZPos = { zPos: 0 };

			 	tween = new TWEEN.Tween(currentZPos)
			 		.to(targetZPos, 1000)
			 		.onUpdate(function() {
						// Calculate the difference between current frame number and where we want to be:
						var difference = Math.abs(currentZPos.zPos - actualZPos);
						actualZPos = currentZPos.zPos;

						// Moving in -Z direction:
						mesh.translateZ(-difference);
			 		})
			 		.start();
			}

		}); // End of Object.append

	});
});

Summary

I’ve uploaded an example of the movable object to demonstrate the code discussed in this post. One of my colleagues pointed out to me recently that none of my examples worked in IE. I think this is because of the issues with Canvas on earlier versions of IE.

I also appreciate that the graphics that these brief examples reveal are far from being attractive. Ok, so they are ugly and primitive (yep, quite literally primitive)! I hope that, in future posts, that will be resolved. At the moment I’m just happy to be playing around with the technology and recording my discoveries.

I decided with this post to place links mostly at the end of the piece. The silly idea was to tempt people to read the whole post before clicking on links and leaving my site.

Full details of the require.js library can be found at the require.js site. I recall that I initially heard about this library on the excellent Think Vitamin site.

I happened across a post by Mark Joseph Obcena whilst searching for information on how best to implement private methods in JavaScript. This then led me to begin using the MooTools framework. I also came across David Walsh’s post about the combination of require.js and MooTools that you may find interesting reading. Documentation for the MooTools framework is also a good starting point.

The tween.js code can be found on github. I found out about this library/engine at the Learning Three.js site. I’ve recently found another tweening library by gskinner. I may need to look into this one at some point in the future.

If you’ve found this post useful or if you’ve constructive comments please add a comment or send me an email to let me know. It’s sometimes nice to know if anyone out there in web land finds any of this stuff useful.

Looks interesting so thought that I’d share.

I’ve worked out how to implement an orthographic camera rather than a PerspectiveCamera and how to move the camera within the scene while ensuring that the camera is still pointing (or focused) on the centre of the scene.

I’ve simply taken the code from the last post and made some changes to it.

Here is my cube and cylinder example.

Here’s the HTML:

<!doctype html>
<html lang="en">
	<head>
		<title>A moving camera - Made with three.js</title>
		<meta charset="utf-8">
	</head>
	<body>

		<div id="container"></div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script src="js/Three.js"></script>
		<script src="js/RequestAnimationFrame.js"></script>
		<script src="cubedemo01.js"></script>

	</body>
</html>

No appreciable change since last time.

Here’s the JavaScript. Comments in the code to aid understanding.

I came across the RequestAnimationFrame function while looking at a three.js tutorial on the CreativeJS site. Details about RequestAnimationFrame can be found on Paul Irish’s site.

var camera, scene, renderer;
var cube, cylinder;

init();
animate();

function init() {

	var numberOfSegments = 1;

	// Instantiate the 3D scene:
	scene = new THREE.Scene();

	// Instantiate an Orthographic camera this time.
	// The Left/Right/Top/Bottom values seem to be relative to the scene's 0, 0, 0 origin.
	// The best result seems to come if the overall viewable area is divided in 2 and
	// the Left & Bottom values set to negative
	camera = new THREE.OrthographicCamera(
		window.innerWidth / -2, 	// Left
		window.innerWidth / 2,		// Right
		window.innerHeight / 2,		// Top
		window.innerHeight / -2,	// Bottom
		-2000,						// Near clipping plane
		1000 );						// Far clipping plane

	// Set the camera position so that it's not on top of our object in the scene:
	camera.position.y = 100;

	// Add the camera to the scene:
	scene.add(camera);

	// Define a Cylinder object
	cylinder = new THREE.Mesh(
		new THREE.CylinderGeometry(25,	// Radius top
			100,						// Radius bottom
			100,						// Height
			25,							// Number of segments in circumference (i.e. how smooth)
			5,							// Number of segments high
			false						// Open ended
		),
		new THREE.MeshBasicMaterial( {color: 0x372AFF} )
	);
	cylinder.position.x = 400;

	scene.add(cylinder);

	// Define the cube object
	cube = new THREE.Mesh(
		new THREE.CubeGeometry(200, 200, 200,
			numberOfSegments, numberOfSegments, numberOfSegments), // Cube geometry
		new THREE.MeshBasicMaterial( { color: 0x373737} ) // Material
	);

	// Add the cube to the scene:
	scene.add(cube);

	// Instantiate the renderer
	renderer = new THREE.CanvasRenderer();
	// .. and set it's size:
	renderer.setSize(window.innerWidth, window.innerHeight);

	// Place the renderer into the HTML (inside the #container div):
	$('#container').append(renderer.domElement);

}

function animate() {
	// Defined in the RequestAnimationFrame.js file, this function means that the
	// animate function is called upon timeout:
	requestAnimationFrame( animate );

	render();
}

function render() {

	// *** Update the scene ***

	// Set the camera to always point to the centre of our scene, i.e. at vector 0, 0, 0
	camera.lookAt( scene.position );

	// Move the camera in a circle with the pivot point in the centre of this circle...
	// ...so that the pivot point, and focus of the camera is on the centre of our scene.
	var timer = new Date().getTime() * 0.0005;

	camera.position.x = Math.floor(Math.cos( timer ) * 200);
	camera.position.z = Math.floor(Math.sin( timer ) * 200);

	renderer.render(scene, camera);
}

More posts to come on this topic I hope as I dig into the Three.js engine a little further.

When it comes to the rendering of the 3D imagery there is the choice of three renderers: Canvas, SVG and WebGL. There seem to be a number of issues surrounding the WebGL renderer at this point in time, centred around security issues. The WebGL renderer uses the local Graphics Processing Unit (GPU) and I believe this is where the security breach could take place. Currently there is no support for WebGL in Internet Explorer.

Anyway, I decided to have a play around with Three.js in the hope that I could use it in my future projects. My main concern at the moment is lack of documentation. It’s coming, but at the moment a lot of experimentation is required or a lot of online searching. The github repository does have a lot of excellent code examples but the code needs to be dissected in order to gain an understanding of what is going on.

I managed to put together a very simple example that shows a blue cube. Not terribly exciting, ok not at all exciting in any way, but it’s a beginning. Here is my blue box example.

Here’s the HTML:

<!doctype html>
<html lang="en">
	<head>
		<title>A Cube made with three.js</title>
		<meta charset="utf-8">
	</head>
	<body>

		<div id="container"></div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script src="js/Three.js"></script>
		<script src="js/RequestAnimationFrame.js"></script>
		<script src="cubedemo.js"></script>

	</body>
</html>

The main items of note here are the ‘container’ div, used to contain the 3D image, and the <script> tag that references the Three.js library. I’ve dumped all of my JavaScript code into its own file, cubedemo.js.

The first little bit of JavaScript code defines some variables to represent the 3D scene, the camera, the renderer and cube. I then call 2 functions init() and render(). The init() function will set-up the scene and the render() function will be responsible for rendering. Nothing too exciting.

var camera, scene, renderer;
var cube;

init();
render();

Next comes the declaration of the init() function.

function init() {

	var numberOfSegments = 3;

	// Instantiate the 3D scene:
	scene = new THREE.Scene();

	// Instantiate the camera
	camera = new THREE.PerspectiveCamera(
		70, //FoV
		window.innerWidth / window.innerHeight, // Aspect ratio
		1, // Near clipping plane
		1000 // Far clipping plane
	);

	// Set the camera position so that it's not on top of our object in the scene:
	camera.position.z = 500;

	// Add the camera to the scene:
	scene.add(camera);

	// Define the cube object
	cube = new THREE.Mesh(
		new THREE.CubeGeometry(200, 200, 200,
			numberOfSegments, numberOfSegments, numberOfSegments), // Cube geometry
		new THREE.MeshBasicMaterial( { color: 0x372AFF} ) // Material
	);

	// Add the cube to the scene:
	scene.add(cube);

	// Instantiate the renderer
	renderer = new THREE.CanvasRenderer();
	// .. and set it's size:
	renderer.setSize(window.innerWidth, window.innerHeight);

	// Place the renderer into the HTML (inside the #container div):
	$('#container').append(renderer.domElement);

}

I’m hoping that the comments in the code make this function relatively self explanatory. First I create a new 3D scene.

I then set-up the camera which has the same aspect ratio as the area in which I’m going to display the 3D image and has a Field of View (Fov) of 70. I understand that the FoV is measured in degrees. I’ve not really totally sure of the near/far clipping plane values at this point in time, e.g. what the units of measurement are. I set the camera’s z-position to 500 so that the camera is not in the same position in the scene as our cube will be. I then add the camera to the scene.

Next I define a cube 200 units square, made up of 3 segments in each direction, and with a simple coloured skin or mesh. I then also add the cube object to the scene.

Then I create an instance of the CanvasRenderer, set its size so that it will fill the entire window, and add the renderer object to the HTML by using a little bit of jQuery magic to append it to my #container div.

Finally comes my render() function.

function render() {

	// *** Update the scene ***

	// Rotate the cube so that we can appreciate the 3D nature...
	// radians = degrees * (PI/180)

	// Rotate the cube 45 degress through the x axis (need to convert to radians):
	cube.rotation.y = 45 * (Math.PI/ 180);
	// Rotate the cube 45 degrees through the y axis (need to convert to radians):
	cube.rotation.x = 45 * (Math.PI/ 180);		

	renderer.render(scene, camera);
}

This piece of code simply rotates my cube object so that we aren’t simply viewing it from the side, and so that we can appreciate its 3D nature, and then renders the scene.

More posts to come on this topic I hope as I dig into the Three.js engine a little further.

He also provided a link to theinternetwishlist that may prove useful.

Initially I was planning to learn something about the Canvas object that gets partially branded as part of the HTML 5 specification. However this then shifted when I came across the Scalable Vector Graphics (SVG) language, or standard, or do I mean API. I began to look at the possibility of using the Raphaël JavaScript Library, a small JavaScript library that enables the easy implementation of vector graphics, which I came across after a little Googling (or it may have been via the Stack Overflow site).

My plans have been on hold for a little while as I have been very busy at work, bringing work home with me or just too tired at the end of the working day to code in the evening, and I’ve also been looking at various JavaScript frameworks. However, I was reading something in my RSS feed earlier this week and came across an open source project. Actually it was an open source project that was quite irrelevant to what I wanted (it was the Ace code editor project) but it led me to do a bit of searching to determine if there was an open source vector drawing application out there.

I came across the SVG-edit open source project which is a vector graphics editor for the web browser. A demo of the SVG-edit editor shows that it’s quite rich in features.

I downloaded the source code and began taking a brief look at it to determine if it was something that I could use for my own projects. The main vector drawing functionality of the editor seems to be situated in a single JavaScript file, namely svgcanvas.js. However a lot of useful features such as the implementation of selection handles, that appear when an object is selected thus allowed for rotation and scaling, are implemented in the main svg-edit.js file.

I’ve no doubt that this code would be an excellent starting point in developing a project that requires the ability to draw and manipulate vector graphics but effort would of course be needed to get one’s head into the code in order to extract the core functionality.

I gave my blog a very minor update in recent months where, essentially, I merely played around with the HTML and CSS a little. I was going to add more flourishes to the site but didn’t get around to it. I toyed with the idea of moving the site to the WordPress platform. The previous incarnation of this site had Ruby on Rails (RoR) running in the backend, code that I hand-crafted myself. It seemed far easier to just make some tweaks to the existing site than to begin learning to how to change the style of a WordPress-hosted site. I knew that WordPress would have features that I could use that would save me many hours of trying to code myself in RoR but the idea of wasting time trying to work out how to produce my own WordPress theme just did not appeal.

Well, I’ve recently been forced into a slight re-think. I realised several days ago that my RoR site had gone down. Ruby was reporting a server-side error. I decided to raise a helpdesk ticket with my hosting company only to find that I’d received an email from the host weeks before reporting that my site had been compromised. I followed the advice that they gave but of course the site was still down. I continued to raise the helpdesk ticket thinking that just a server re-boot was required. The response that came back pointed out that the operating system running on the servers had been upgraded and that, to cut a long story short, I’d have to upgrade my RoR install.

I’ve not been developing sites with RoR for quite a long time now. It seemed like I would have to get my head back into RoR again so that I could perform the upgrade that was required. I couldn’t be bothered with all of the hassle to be frank.

That’s why I’m now reverting to using WordPress. Of course it will give me much more functionality than my old site did even if it does mean that I’ve got to work out how to create a new WordPress theme. I think in the longer term it will be beneficial and a useful learning exercise.

I backed-up my old blog database with the intention of porting all of the old blog posts to WordPress. That now seems like a bit of a tedious task. I’m sure that no-one is going to miss that old content. Well, except for me that is. So I may resurrect some of those posts in the future.

The feeling that I had when I realised that my site was down was rather unexpected. In fact it didn’t come straight-away but when I realised that, potentially, it would be down for a while. It’s not that my site had any actual traffic to speak of. Maybe just the fact that I’d written some posts and that ‘voice’ had been cut-off.