Now that we have the physics engine, and are able to parse the input, slotting all of this into O3D is rather trivial.

All you need to do is create a standard O3D application, load the data from the input text into the relevant variables, set up the views and objects accordingly, and you are A for away.

In the app, I have used spheres to represent the objects which need to intereact with one another, but can literally be any object you want from cubes to X-wing fighters.

If you know a bit about O3D, then the only really interesting bit happens in the renderCallback() function. If you don’t, then go and have a look at my o3d tutorial series to learn how the O3D components all fit together.

What we do here, is call our physics engine to recalculate the positions of each object, and then loop through the objects setting up the transforms for each object to translate the object to the current position of the object.

function renderCallback(renderEvent) {
	for(var i = 0; i < calcsPerRender; i++){
		Gravity.calcNewPositions(objects, (renderEvent.elapsedTime * g_timeMultiplier) / calcsPerRender);
	}
	for(var i = 0; i < objects.length; i++) {
		g_objectTransforms[i].identity();
		g_objectTransforms[i].translate(objects[i].position);
	}
}

Here is the full code for the O3D component

function trim(str, chars) {
	return ltrim(rtrim(str, chars), chars);
}

function ltrim(str, chars) {
	chars = chars || "\\s";
	return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}

function rtrim(str, chars) {
	chars = chars || "\\s";
	return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}

o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.effect');
o3djs.require('o3djs.primitives');

var scalingFactor = 1e10;
var calcsPerRender = 100;
var g_timeMultiplier = 8000;
var objects = [];

// Events
// Run the init() function once the page has finished loading.
// Run the uninit() function when the page has is unloaded.
window.onload = init;
window.onunload = uninit;

// global variables
var g_o3d;
var g_client;
var g_pack;
var g_3dRoot;
var g_viewInfo;
var g_objectTransforms;

var g_camera = {
	eye: [0, 0, -100],
	target: [0, 0, 0],
	up: [0, 1, 0]};

var g_lightPosition = [0, 0, 100];
//Creates the client area.
function init() {
	o3djs.util.makeClients(initStep2);
}

function loadData(){

	var data = document.getElementById('siminput').value;
	data = data.split(';');

	scalingFactor = parseFloat(data[0].split(':')[1]);
	calcsPerRender = parseInt(data[1].split(':')[1]);
	g_timeMultiplier = parseInt(data[2].split(':')[1]);	

	var item = data[3].split(':')[1].split(',');
	g_camera['eye'] = [parseFloat(item[0]), parseFloat(item[1]), parseFloat(item[2])];	

	item = data[4].split(':')[1].split(',');
	g_camera['target'] = [parseFloat(item[0]), parseFloat(item[1]), parseFloat(item[2])];			

	item = data[5].split(':')[1].split(',');
	g_camera['up'] = [parseFloat(item[0]), parseFloat(item[1]), parseFloat(item[2])];		

	item = data[6].split(':')[1].split(',');
	g_lightPosition = [parseFloat(item[0]), parseFloat(item[1]), parseFloat(item[2])];			

	Gravity.scaleConstantForLenth(scalingFactor);

	var objectCount = 0;
	objects = [];
	for(var i = 8; i < data.length; i++){
		if ((i-8) % 5 == 0){
			var line = data[i].split(':');

			if (trim(line[0]) == 'end'){
				break;
			}

			var item = line[1].split(',');
			objects[objectCount] = new PhysicsObject();
			objects[objectCount].position = [parseFloat(item[0]) / scalingFactor, parseFloat(item[1]) / scalingFactor, parseFloat(item[2]) / scalingFactor];

			line = data[i+1].split(':');
			item = line[1].split(',');
			objects[objectCount].velocity = [parseFloat(item[0]) / scalingFactor, parseFloat(item[1]) / scalingFactor, parseFloat(item[2]) / scalingFactor];

			line = data[i+2].split(':');
			item = line[1].split(',');
			objects[objectCount].color = [parseFloat(item[0]), parseFloat(item[1]), parseFloat(item[2]), parseFloat(item[3])];

			line = data[i+3].split(':');
			objects[objectCount].radius = parseFloat(line[1]);

			line = data[i+4].split(':');
			objects[objectCount].mass = parseFloat(line[1]);

			objectCount++;
		}
	}
	setupScene();
}

function createPhongMaterial(baseColor) {

  var material = g_pack.createObject('Material');

  o3djs.effect.attachStandardShader(
      g_pack, material, g_lightPosition, 'phong');

  material.drawList = g_viewInfo.performanceDrawList;

  material.getParam('emissive').value = [0, 0, 0, 1];
  material.getParam('ambient').value = o3djs.math.mulScalarVector(0.1, baseColor);
  material.getParam('diffuse').value = o3djs.math.mulScalarVector(0.9, baseColor);
  material.getParam('specular').value = [.2, .2, .2, 1];
  material.getParam('shininess').value = 20;
  return material;
}

function createSpheres(){
	var sphere = [];
	g_objectTransforms = [];
	for(var i = 0; i < objects.length; i++){
		sphere[i] = o3djs.primitives.createSphere(
		  g_pack,
		  createPhongMaterial(objects[i].color),
		  objects[i].radius,   // Radius of the sphere.
		  30,    // Number of meridians.
		  20);    // Number of parallels.

		g_objectTransforms[i] = g_pack.createObject('Transform');
		g_objectTransforms[i].addShape(sphere[i]);
		g_objectTransforms[i].translate(objects[i].position);
		g_objectTransforms[i].parent = g_3dRoot;
	}

}

function setupScene(){
    // Create a pack to manage the objects created.
    g_pack = g_client.createPack();

	//Create a root transform
	g_3dRoot = g_pack.createObject('Transform');

    // Create the render graph for a view.
    g_viewInfo = o3djs.rendergraph.createBasicView(
	   g_pack,
	   g_3dRoot,
	   g_client.renderGraphRoot);

	// Set up a simple orthographic view.
    g_viewInfo.drawContext.projection = o3djs.math.matrix4.perspective(
	   o3djs.math.degToRad(30), // 30 degree fov.
	   g_client.width / g_client.height,
	   1,                  // Near plane.
	   5000);              // Far plane.

    // Set up our view transformation to look towards the world origin
    // where the cube is located.
    g_viewInfo.drawContext.view = o3djs.math.matrix4.lookAt(g_camera.eye,
											 g_camera.target,
											 g_camera.up);
	g_viewInfo.clearBuffer.clearColor = [0, 0, 0, 1]; 												

	createSpheres();

	g_client.setRenderCallback(renderCallback);	

}

//Initializes O3D.
function initStep2(clientElements) {
	// Initializes global variables and libraries.
	g_client = clientElements[0].client;
	g_o3d = clientElements[0].o3d;

	// Initialize O3D libraries.
	o3djs.base.init(clientElements[0]);

	loadData();
}

//Removes any callbacks so they don't get called after the page has unloaded.
function uninit() {
	if (g_client) {
		g_client.cleanup();
	}
}

//This method gets called every time O3D renders a frame.
//Here's where we update the cube's transform to make it spin.
function renderCallback(renderEvent) {
	for(var i = 0; i < calcsPerRender; i++){
		Gravity.calcNewPositions(objects, (renderEvent.elapsedTime * g_timeMultiplier) / calcsPerRender);
	}
	for(var i = 0; i < objects.length; i++) {
		g_objectTransforms[i].identity();
		g_objectTransforms[i].translate(objects[i].position);
	}
}

Related posts:

1. Building a gravity simulator in O3D – Part 2 In the last post, I introduced the physics engine for...
2. Building a gravity simulator in O3D – Part 1 O3D allows you full reign to let your imagination loose...
3. How to dump a Javascript object When trying to debug Javascript, objects can be a real...

Related posts brought to you by Yet Another Related Posts Plugin.

There needs to be an easy way to be able to enter the data into the application, so that you can fiddle with different scenarios instead of hardcoding values in.

The way the application does it, is by adding a text area into the HTML page containing the text needed to set the variables

  
				


					scaling factor :1e10;
calculations per render :100;
time multiplier :1000000;
camera position:0,0,100;
camera looking at:0,0,0;
camera up:0,1,0;
light position:0,0,100;
start;
position	:0,0,0;
velocity	:0,0,0;
color		:1,0,0,1;
radius		:2;
mass		:1.9891e30;
position	:1.49598e11,0,0;
velocity	:0,29800,0;
color		:0,1,0,1;
radius		:1;
mass		:5.9742e24;
position	:4.49598e10,0,0;
velocity	:0,60000,0;
color		:1,1,0,1;
radius		:0.8;
mass		:5.9742e22;
position	:-10.49598e10,0,0;
velocity	:0,-28800,0;
color		:1,0,1,1;
radius		:0.5;
mass		:5.9742e20;
end;
					
				

The format is very strict and the order of variables is important. Each line contains one value matching up to a variable to set.
Between the start and end tags, the objects are defined, and there can be any number of items defined here.

The scaling factor determines how much to scale the distances by for our simulation.
The number of calculations per render sets up how many times you need to calculate the gravity calcs for each render of the objects. The higher this number, the more accurate the result, but the slower the render.
The time multiplier determines how much to speed up time. The higher this value, the faster the simulation will run, and the calculations will also be rather less accurate as well.

The next three values determine the camera setup within O3D and are arrays of 3 numbers each.

The last value is the location of the light used for the lighting of the objects.

Now, for each object, we need to specify the position, velocity, color, radius and mass. There can be any number of objects specified but all five fields need to be there though.

Now, in the Javascript, we need to process the text input. This is simply done by splitting up the text using the ; character to split lines up and then assigning the relevant values to the correct variables, and building up an array of objects we want to render.

We also need a few trimming functions to use for our text to get rid of whitespace.

In the next part, we are going to look at putting this together with the physics engine into the O3D application.

function trim(str, chars) {
	return ltrim(rtrim(str, chars), chars);
}

function ltrim(str, chars) {
	chars = chars || "\\s";
	return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}

function rtrim(str, chars) {
	chars = chars || "\\s";
	return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}
function loadData(){

	var data = document.getElementById('siminput').value;
	data = data.split(';');

	scalingFactor = parseFloat(data[0].split(':')[1]);
	calcsPerRender = parseInt(data[1].split(':')[1]);
	g_timeMultiplier = parseInt(data[2].split(':')[1]);	

	var item = data[3].split(':')[1].split(',');
	g_camera['eye'] = [parseFloat(item[0]), parseFloat(item[1]), parseFloat(item[2])];	

	item = data[4].split(':')[1].split(',');
	g_camera['target'] = [parseFloat(item[0]), parseFloat(item[1]), parseFloat(item[2])];			

	item = data[5].split(':')[1].split(',');
	g_camera['up'] = [parseFloat(item[0]), parseFloat(item[1]), parseFloat(item[2])];		

	item = data[6].split(':')[1].split(',');
	g_lightPosition = [parseFloat(item[0]), parseFloat(item[1]), parseFloat(item[2])];			

	Gravity.scaleConstantForLenth(scalingFactor);

	var objectCount = 0;
	objects = [];
	for(var i = 8; i < data.length; i++){
		if ((i-8) % 5 == 0){
			var line = data[i].split(':');

			if (trim(line[0]) == 'end'){
				break;
			}

			var item = line[1].split(',');
			objects[objectCount] = new PhysicsObject();
			objects[objectCount].position = [parseFloat(item[0]) / scalingFactor, parseFloat(item[1]) / scalingFactor, parseFloat(item[2]) / scalingFactor];

			line = data[i+1].split(':');
			item = line[1].split(',');
			objects[objectCount].velocity = [parseFloat(item[0]) / scalingFactor, parseFloat(item[1]) / scalingFactor, parseFloat(item[2]) / scalingFactor];

			line = data[i+2].split(':');
			item = line[1].split(',');
			objects[objectCount].color = [parseFloat(item[0]), parseFloat(item[1]), parseFloat(item[2]), parseFloat(item[3])];

			line = data[i+3].split(':');
			objects[objectCount].radius = parseFloat(line[1]);

			line = data[i+4].split(':');
			objects[objectCount].mass = parseFloat(line[1]);

			objectCount++;
		}
	}
	setupScene();
}

Related posts:

1. Building a gravity simulator in O3D – Part 3 If you missed part 1 and part 2 of this...
2. Building a gravity simulator in O3D – Part 1 O3D allows you full reign to let your imagination loose...
3. How to dump a Javascript object When trying to debug Javascript, objects can be a real...

Related posts brought to you by Yet Another Related Posts Plugin.

The gravity simulator is fully written in JavaScript, and is made up of the physics library, the O3D application to render the objects and the scripting engine.

The physics library provides the classes necessary to keep track of all the data we need for each object we want to represent, as well as the classes that will do our calculations, and is what we will cover in this part of the series.

The O3D application takes care of all the rendering, as well as supplying the data to the physics library and then renders the results.

The scripting engine parses the input text which is used to initialise all the O3D variables and objects we want to draw.

So, now on to discussing the actual physics engine for gravity.

The first thing we need is an object that contains all the information we need to calculate gravity for a particular body in space. This is given in the PhysicsObject class.

PhysicsObject = function(){
	this.position = [0,0,0];
	this.velocity = [0,0,0];
	this.color = [1,1,1,1];
	this.radius = 1;
	this.mass = 1;

	this.setProperties = function(position, velocity, color, radius, mass) {
		this.position = position;
		this.velocity = velocity;
		this.color = color;
		this.radius = radius;
		this.mass = mass;
	};
}

We also need to have a class that takes care of vector operations such as arithmetic and multiplication. O3D does come with its own vector library, but to keep the actual physics engine as separate from O3D as possible, we need a basic class to do this.
In this implementation, vectors are simply an array of numbers, and then you can use functions inside this class to do the necessary operations to the vector arrays

Vector = new function(){

	//Add two vectors
	this.add = function(a, b){
		var result = [0,0,0];
		if (a.length != b.length){
			throw "Vectors need to be the same size";
		}

		for(var i = 0; i < a.length; i++) {
			result[i] = a[i] + b[i];
		}
		return result;
	}

	//Subtract two vectors
	this.subtract = function(a, b){
		var result = [0,0,0];
		if (a.length != b.length){
			throw "Vectors need to be the same size";
		}

		for(var i = 0; i < a.length; i++) {
			result[i] = a[i] - b[i];
		}
		return result;
	}

	//Add scalar to vector
	this.addScalar = function(a, scalar){
		var result = [0,0,0];

		for(var i = 0; i < a.length; i++) {
			result[i] = a[i] + scalar;
		}
		return result;
	}

	//Subtract scalar to vector
	this.subtractScalar = function(a, scalar){
		var result = [0,0,0];

		for(var i = 0; i < a.length; i++) {
			result[i] = a[i] - scalar;
		}
		return result;
	}

	//multiply scalar with vector
	this.multiplyScalar = function(a, scalar){
		var result = [0,0,0];

		for(var i = 0; i < a.length; i++) {
			result[i] = a[i] * scalar;
		}
		return result;
	}

	//divide vector with scalar
	this.divideScalar = function(a, scalar){
		var result = [0,0,0];

		for(var i = 0; i < a.length; i++) {
			result[i] = a[i] / scalar;
		}
		return result;
	}

	//Get length of vector
	this.length = function(a){
		var result = 0;

		for(var i = 0; i < a.length; i++) {
			result += (a[i] * a[i]);
		}
		result = Math.sqrt(result);
		return result;
	}

	this.unitVector = function(a){
		var length = this.length(a);
		var unit = this.divideScalar(a, length);
		return unit;
	}

	this.distance = function(a, b){
		var result = this.subtract(a - b);
		result = this.length(result);
		return result;
	}
}

The last class does the actual gravity calculation.

What you do is pass an array of objects which you want to calc the interactions for, and the time elapsed since the last calculation to the calcNewPositions() function

The function will loop through each object, and first adjust the velocity of the object based on the gravitational effect of each of the other objects based on the formula Force = G * mass1 * mass2 / distance squared. The change in velocity is found by getting the acceleration applied to the object by the force and then adjusting accordingly.

The effect of each successive object on an object is merely the sum of changes caused by each object on an object.

Once you have found all the velocity adjustments you need, you then adjust the positions of each object based on their new velocities.

Now we are done here, and the rendering engine can take over by rendering the objects in the correct place.

One addition function needed here is the scaleConstantForLenth() function, which allows you to adjust the gravitational constant G, depending on what units you are using to measure length.

//----------------------------------------------------
// Gravity
// A class to implement the law of universal Gravitation
// F = Gm1m2/r^2
//----------------------------------------------------
Gravity = new function(){
	this.G = 6.673e-11; //6.673 x 10^-11 m^3 kg^-1 s^-2

	this.scaleConstantForLenth = function(scalingFactor){
		Gravity.G = 6.673e-11 / (scalingFactor * scalingFactor * scalingFactor);
	}
	this.calcGravitationalForce = function(mass1, mass2, distance){
		var force = (Gravity.G * mass1 * mass2) / (distance * distance);
		return force;
	}

	this.calcGravitationalForceVector = function(mass1, mass2, distance, directionVector){
		var force = (Gravity.G * mass1 * mass2) / (distance * distance);

		force = Vector.multiplyScalar(directionVector, force);
		return force;
	}

	this.calcAccelerationVector = function(forceVector, mass){
		var accelerationVector = Vector.divideScalar(forceVector, mass);
		return accelerationVector;
	}

	this.calcNewPositions = function(objects, timeElapsed){
		for(var i = 0; i < objects.length - 1; i++){
			for(var j = i + 1; j < objects.length; j++){
				var distanceVector = Vector.subtract(objects[j].position, objects[i].position);
				var directionVector = Vector.unitVector(distanceVector);
				var forceVector = Gravity.calcGravitationalForceVector(objects[i].mass, objects[j].mass, Vector.length(distanceVector), directionVector);

				//update first object
				var accelerationVector = Gravity.calcAccelerationVector(forceVector, objects[i].mass);
				objects[i].velocity = Vector.add(objects[i].velocity, Vector.multiplyScalar(accelerationVector, timeElapsed));

				//update second object
				forceVector = Vector.multiplyScalar(forceVector, -1);
				var accelerationVector = Gravity.calcAccelerationVector(forceVector, objects[j].mass);
				objects[j].velocity = Vector.add(objects[j].velocity, Vector.multiplyScalar(accelerationVector, timeElapsed));
			}
		}

		for(var i = 0; i < objects.length; i++){
			var movement = Vector.multiplyScalar(objects[i].velocity, timeElapsed);
			objects[i].position = Vector.add(objects[i].position, movement);
		}
	}

}

Related posts:

1. Building a gravity simulator in O3D – Part 2 In the last post, I introduced the physics engine for...
2. Building a gravity simulator in O3D – Part 3 If you missed part 1 and part 2 of this...
3. Vectors in C# A vector is simply a 1-dimensional array of numbers that...

Related posts brought to you by Yet Another Related Posts Plugin.

Specifying an offset, preferably a value evenly divisible by 256, such as 16, 24 or 32, we then need to make sure that the red, green and blue components’ values get rounded off to multiples of this offset.

For example, using an offset of 16, value colour values would be 0, 15, 31, 47,……, 255. and all values would need to be rounded off to these values for each of the colour components.

To be able to do this, we take the component value, and then add half of the offset to the value. We then subtract the modulo of this value and the offset. This then gives values along the lines of 0, 16, 32, …., 256, so we will need to subtract 1 from this, but will need to put in a correction for 0, since that value needs to remain as it is.

Decreasing the colour depth using an offset of 16

public void ApplyDecreaseColourDepth(int offset)
{
    int A, R, G, B;
    Color pixelColor;

    for (int y = 0; y < bitmapImage.Height; y++)
    {
        for (int x = 0; x < bitmapImage.Width; x++)
        {
            pixelColor = bitmapImage.GetPixel(x, y);
            A = pixelColor.A;
            R = ((pixelColor.R + (offset / 2)) - ((pixelColor.R + (offset / 2)) % offset) - 1);
            if (R < 0)
            {
                R = 0;
            }
            G = ((pixelColor.G + (offset / 2)) - ((pixelColor.G + (offset / 2)) % offset) - 1);
            if (G < 0)
            {
                G = 0;
            }
            B = ((pixelColor.B + (offset / 2)) - ((pixelColor.B + (offset / 2)) % offset) - 1);
            if (B < 0)
            {
                B = 0;
            }
            bitmapImage.SetPixel(x, y, Color.FromArgb(A, R, G, B));
        }
    }

}

Related posts:

1. Image Processing in C#: Colour filters Implementing a colour filter is a rather simple affair. All...
2. Image Processing in C#: Contrast Contrast in a picture is a measure of how close...
3. Image Processing in C#: Converting an image to greyscale Converting an image to greyscale is a relatively easy effect...

Related posts brought to you by Yet Another Related Posts Plugin.

These days, with digital photograpy, we don’t need to preserve photos like in those early days, but it still does give a nice warm tone to a photo, and is great for making a modern photo appear old-fashioned.

Converting a photo to sepia is a relatively easy effect.

For each pixel in the image, we first convert the pixel to greyscale. We then add a value to the green component, and double that value to the red component to give the sepia effect.

The depth of the sepia effect is determined by this value, which we pass here as a parameter. A value of 0 will give a standard greyscale image.

Applying a Sepia value of 20

public void ApplySepia(int depth)
{
    int A, R, G, B;
    Color pixelColor;

    for (int y = 0; y < bitmapImage.Height; y++)
    {
        for (int x = 0; x < bitmapImage.Width; x++)
        {
            pixelColor = bitmapImage.GetPixel(x, y);
            A = pixelColor.A;
            R = (int)((0.299 * pixelColor.R) + (0.587 * pixelColor.G) + (0.114 * pixelColor.B));
            G = B = R;

            R += (depth * 2);
            if (R > 255)
            {
                R = 255;
            }
            G += depth;
            if (G > 255)
            {
                G = 255;
            }

            bitmapImage.SetPixel(x, y, Color.FromArgb(A, R, G, B));
        }
    }
}

Related posts:

1. Image Processing in C#: Converting an image to greyscale Converting an image to greyscale is a relatively easy effect...
2. Image Processing in C#: Colour filters Implementing a colour filter is a rather simple affair. All...
3. Image Processing in C#: Adjusting the brightness To increase the brightness of an image, all you need...

Related posts brought to you by Yet Another Related Posts Plugin.

The convolution grid we use in embossing is a little different to the others we have looked at so far. It has an offset of 127, and a fixed factor of 4. The offset makes the the image appear on average as a medium gray.

The grid we will use then is

Embossing

public void ApplyEmboss(double weight)
{
    ConvolutionMatrix matrix = new ConvolutionMatrix(3);
    matrix.SetAll(1);
    matrix.Matrix[0, 0] = -1;
    matrix.Matrix[1, 0] = 0;
    matrix.Matrix[2, 0] = -1;
    matrix.Matrix[0, 1] = 0;
    matrix.Matrix[1, 1] = weight;
    matrix.Matrix[2, 1] = 0;
    matrix.Matrix[0, 2] = -1;
    matrix.Matrix[1, 2] = 0;
    matrix.Matrix[2, 2] = -1;
    matrix.Factor = 4;
    matrix.Offset = 127;
    bitmapImage = Convolution3x3(bitmapImage, matrix);

}

Related posts:

1. Image Processing in C#: Sharpening the image Sharpening an image is merely the inverse of what we...
2. Image Processing in C#: Smoothing using convolution Smoothing, which is just a type of blurring is based...
3. Image Processing in C#: Applying a mean removal Another type of sharpening effect is mean removal. It works...

Related posts brought to you by Yet Another Related Posts Plugin.

The grid which we used for this effect is as follows

This gives a much more noticeable sharpening effect on the image.

Mean removal

public void ApplyMeanRemoval(double weight)
{
    ConvolutionMatrix matrix = new ConvolutionMatrix(3);
    matrix.SetAll(1);
    matrix.Matrix[0, 0] = -1;
    matrix.Matrix[1, 0] = -1;
    matrix.Matrix[2, 0] = -1;
    matrix.Matrix[0, 1] = -1;
    matrix.Matrix[1, 1] = weight;
    matrix.Matrix[2, 1] = -1;
    matrix.Matrix[0, 2] = -1;
    matrix.Matrix[1, 2] = -1;
    matrix.Matrix[2, 2] = -1;
    matrix.Factor = weight - 8;
    bitmapImage = Convolution3x3(bitmapImage, matrix);

}

Related posts:

1. Image Processing in C#: Sharpening the image Sharpening an image is merely the inverse of what we...
2. Image Processing in C#: Embossing One of the most striking effects to apply to an...
3. Image Processing in C#: Smoothing using convolution Smoothing, which is just a type of blurring is based...

Related posts brought to you by Yet Another Related Posts Plugin.

Here we supply a convolution matrix set up as follows:

Here our weighting factor would total 3, since the negative numbers get subtracted from the weighting total.

Shapening our image

public void ApplySharpen(double weight)
{
    ConvolutionMatrix matrix = new ConvolutionMatrix(3);
    matrix.SetAll(1);
    matrix.Matrix[0, 0] = 0;
    matrix.Matrix[1, 0] = -2;
    matrix.Matrix[2, 0] = 0;
    matrix.Matrix[0, 1] = -2;
    matrix.Matrix[1, 1] = weight;
    matrix.Matrix[2, 1] = -2;
    matrix.Matrix[0, 2] = 0;
    matrix.Matrix[1, 2] = -2;
    matrix.Matrix[2, 2] = 0;
    matrix.Factor = weight - 8;
    bitmapImage = Convolution3x3(bitmapImage, matrix);

}

Related posts:

1. Image Processing in C#: Embossing One of the most striking effects to apply to an...
2. Image Processing in C#: Smoothing using convolution Smoothing, which is just a type of blurring is based...
3. Image Processing in C#: Applying a mean removal Another type of sharpening effect is mean removal. It works...

Related posts brought to you by Yet Another Related Posts Plugin.

Gaussian blur works very similarly to the smoothing function, in that both are a type of blur, but the Gaussian blur gives a more natural looking blur.

It achieves this by not have a flat weighting, but instead has a weighting based on a Gaussian curve, thus for our 3×3 grid, the values we want to supply the convolution function is as follows:

The factor parameter is set to the sum of each pixel in the grid, which in this case, is again, 16, and the offset is set to 0.

Now we get a nice blur effect.

Applying a guassian blur

public void ApplyGaussianBlur(double peakValue)
{
    ConvolutionMatrix matrix = new ConvolutionMatrix(3);
    matrix.SetAll(1);
    matrix.Matrix[0, 0] = peakValue / 4;
    matrix.Matrix[1, 0] = peakValue / 2;
    matrix.Matrix[2, 0] = peakValue / 4;
    matrix.Matrix[0, 1] = peakValue / 2;
    matrix.Matrix[1, 1] = peakValue;
    matrix.Matrix[2, 1] = peakValue / 2;
    matrix.Matrix[0, 2] = peakValue / 4;
    matrix.Matrix[1, 2] = peakValue / 2;
    matrix.Matrix[2, 2] = peakValue / 4;
    matrix.Factor = peakValue * 4;
    bitmapImage = Convolution3x3(bitmapImage, matrix);

}

Related posts:

1. Image Processing in C#: Sharpening the image Sharpening an image is merely the inverse of what we...
2. Image Processing in C#: Embossing One of the most striking effects to apply to an...
3. Image Processing in C#: Smoothing using convolution Smoothing, which is just a type of blurring is based...

Related posts brought to you by Yet Another Related Posts Plugin.

How this works is that you take a square section of pixels, often 3×3 but can be any size, although the larger you make the grid, the less pixels that will get affected by the effect around the edges.

The centre pixel of the grid is the main pixel we are interested in. To use convolution, what we do is assign weightings to each pixel in the grid, depending on what effect we are trying to achieve, and then assign the result to the centre pixel.

The basic data structure we use for the convolution is a class which contains the 2D array, as well as a weighting factor, and an offset.

    public class ConvolutionMatrix
    {
        public int MatrixSize = 3;

        public double[,] Matrix;
        public double Factor = 1;
        public double Offset = 1;

        public ConvolutionMatrix(int size)
        {
            MatrixSize = 3;
            Matrix = new double[size, size];
        }

        public void SetAll(double value)
        {
            for (int i = 0; i < MatrixSize; i++)
            {
                for (int j = 0; j < MatrixSize; j++)
                {
                    Matrix[i, j] = value;
                }
            }
        }
    }

Now, having this class, we can implement the convolution algorithm

public Bitmap Convolution3x3(Bitmap b, ConvolutionMatrix m)
{
    Bitmap newImg = (Bitmap)b.Clone();
    Color[,] pixelColor = new Color[3, 3];
    int A, R, G, B;

    for (int y = 0; y < b.Height - 2; y++)
    {
        for (int x = 0; x < b.Width - 2; x++)
        {
            pixelColor[0, 0] = b.GetPixel(x, y);
            pixelColor[0, 1] = b.GetPixel(x, y + 1);
            pixelColor[0, 2] = b.GetPixel(x, y + 2);
            pixelColor[1, 0] = b.GetPixel(x + 1, y);
            pixelColor[1, 1] = b.GetPixel(x + 1, y + 1);
            pixelColor[1, 2] = b.GetPixel(x + 1, y + 2);
            pixelColor[2, 0] = b.GetPixel(x + 2, y);
            pixelColor[2, 1] = b.GetPixel(x + 2, y + 1);
            pixelColor[2, 2] = b.GetPixel(x + 2, y + 2);

            A = pixelColor[1, 1].A;

            R = (int)((((pixelColor[0, 0].R * m.Matrix[0, 0]) +
                         (pixelColor[1, 0].R * m.Matrix[1, 0]) +
                         (pixelColor[2, 0].R * m.Matrix[2, 0]) +
                         (pixelColor[0, 1].R * m.Matrix[0, 1]) +
                         (pixelColor[1, 1].R * m.Matrix[1, 1]) +
                         (pixelColor[2, 1].R * m.Matrix[2, 1]) +
                         (pixelColor[0, 2].R * m.Matrix[0, 2]) +
                         (pixelColor[1, 2].R * m.Matrix[1, 2]) +
                         (pixelColor[2, 2].R * m.Matrix[2, 2]))
                                / m.Factor) + m.Offset);

            if (R < 0)
            {
                R = 0;
            }
            else if (R > 255)
            {
                R = 255;
            }

            G = (int)((((pixelColor[0, 0].G * m.Matrix[0, 0]) +
                         (pixelColor[1, 0].G * m.Matrix[1, 0]) +
                         (pixelColor[2, 0].G * m.Matrix[2, 0]) +
                         (pixelColor[0, 1].G * m.Matrix[0, 1]) +
                         (pixelColor[1, 1].G * m.Matrix[1, 1]) +
                         (pixelColor[2, 1].G * m.Matrix[2, 1]) +
                         (pixelColor[0, 2].G * m.Matrix[0, 2]) +
                         (pixelColor[1, 2].G * m.Matrix[1, 2]) +
                         (pixelColor[2, 2].G * m.Matrix[2, 2]))
                                / m.Factor) + m.Offset);

            if (G < 0)
            {
                G = 0;
            }
            else if (G > 255)
            {
                G = 255;
            }

            B = (int)((((pixelColor[0, 0].B * m.Matrix[0, 0]) +
                         (pixelColor[1, 0].B * m.Matrix[1, 0]) +
                         (pixelColor[2, 0].B * m.Matrix[2, 0]) +
                         (pixelColor[0, 1].B * m.Matrix[0, 1]) +
                         (pixelColor[1, 1].B * m.Matrix[1, 1]) +
                         (pixelColor[2, 1].B * m.Matrix[2, 1]) +
                         (pixelColor[0, 2].B * m.Matrix[0, 2]) +
                         (pixelColor[1, 2].B * m.Matrix[1, 2]) +
                         (pixelColor[2, 2].B * m.Matrix[2, 2]))
                                / m.Factor) + m.Offset);

            if (B < 0)
            {
                B = 0;
            }
            else if (B > 255)
            {
                B = 255;
            }
            newImg.SetPixel(x+1, y+1, Color.FromArgb(A, R, G, B));
        }
    }
    return newImg;
}

Finally, after all that, we are ready to implement a smoothing function. To smooth an image, we assign a particular value to the centre pixel, and then 1 to all the surrounding pixels, so the array would look something like this

The factor parameter is set to the sum of each pixel in the grid, which in this case would be 16, and the offset is set to 0. The offset shifts all the values of the colour components by the specified amount.

Now all that is left is calling the convolution function.

Smoothing

        public void ApplySmooth(double weight)
        {
            ConvolutionMatrix matrix = new ConvolutionMatrix(3);
            matrix.SetAll(1);
            matrix.Matrix[1,1] = weight;
            matrix.Factor = weight + 8;
            bitmapImage = Convolution3x3(bitmapImage, matrix);

        }

Related posts:

1. Image Processing in C#: Embossing One of the most striking effects to apply to an...
2. Image Processing in C#: Sharpening the image Sharpening an image is merely the inverse of what we...
3. Image Processing in C#: Gaussian blur Gaussian blur also uses convolution to create the effect. If...

Related posts brought to you by Yet Another Related Posts Plugin.