## Wednesday, 30 September 2009

### Fractals And The Mandelbrot Set In Nature!

Recently I have been working a lot on fractal programming, here are a few examples (just click the images to view their respective articles):

Anyway, I just had a browse to see what kinds of examples I could find of fractals present in nature and some of the images I found were unbelievable! Just check out some of the images below (click for full size). I find the images of rivers and streams are the closest in appearance to the Mandelbrot set, although some other patterns are also found, like the spiral shape of the tornado.

Coastal Fractal

Cauliflower Fractal

River Fractals

Cactus Fratal

I'll leave you with a thought - Is the mathematics intrinsic to nature and nature has arisen because of it, or is the way we see mathematics dependant what exists in the natural world?

### More Emergence - The Mandelbrot Set

The image to the right is one amazing example of emergence. It is the fractal pattern known as the Mandelbrot Set, named after the mathematician Benoît Mandelbrot.

The rules that govern the Mandelbrot set are very simple - anyone with a basic understanding of complex number theory should be able to make it work. Understanding why, and how it works is a much harder question, and something that I won't go into. I'm just here to make some pretty pictures!

So how does the mandelbrot set work? Imagine the image to the right is made up of points, set co-ordinates. Each point is described by one number which tells us where it lies vertically, and another which tells us where it lies horizontally. Mandelbrot mapped the vertical location to imaginary space, and the horizontal location to real space - in other words he mapped the co-ordinates to complex space (for mathematicians out there - a pixel is pretty much equivalent to a point on an Argand diagram).

Complex space is made up of complex numbers of the form a + ib, where a and b are both real numbers.

We can calculate the square of a complex number using:

(a + ib).(a + ib) = a*a - b*b + 2iab

The real component of the new number is now (a*a-b*b), and the imaginary component is 2ab.

The Mandelbrot set arrises when the number of iterations for the value of a*a+b*b is calculated to be greater than some threshold value for each pixel. The colour variation you see on the diagram depends on the number of iterations for the prior calculation for that particular starting number.

For lower iterations the detail in the image does not appear as much. Where as for higher iterations (the demo below is set to 500 iterations per pixel) the detail achieved will be far greater.

One issue arrises in the way that computers - in this case flash - handles numbers. Floating point numbers will not achieve the required accuracy when the amount of zoom on the graph is too high. Unfortunately this results in an infinite amount of zoom being impossible on this platform.

Just click on the image to the right to launch the mandelbrot set program. Enjoy it, and have a play around going down several routes. To the left of the main cardioid bulb is a region dubbed seahorse valley. It is one of my favourites!

For some more interesting articles on the Mandelbrot Set and some incredible zooms visit:

University of Utah

Mandelbrotset.net

Enjoy!

## Tuesday, 29 September 2009

### Population Growth Model

I got into making this kind of stuff a few years ago after reading a book called "Critical Mass - How One Thing Leads To Another" by Philip Ball (ex-editor of the Nature journal). The book discusses the application of Physics to some social phenomena, and takes you on a journey through some amazing social science discoveries that have been made. My favourite chapters concentrated on crowd dynamics, and population growth/movement.

I wrote a small program in flash which took some of the points mentioned in the book on population growth - which incidentally can be compared to bacterial growth and many of the shapes produced on a large scale are very similar! These similarities can be explained by a process called emergence, whereby complex patterns - for example the shape of a city - can arise from simple mathematical rules - for example people prefer to live near water. To the right is a nice image showing some outcomes of emergence.

Back to the flash side of it - I wrote some software which models two populations. The populations could be bacteria, they could be human, or animal - it doesn't really matter. On the screen any red pixels represent some kind of natural resources. The populations spread onto the red pixels whenever they can. If a population encounters another population they cross breed, creating hybrids of the two.

If you run the program you'll notice the button on the bottom left can be set to various modes - obstacle creates physical blockades which block populations from growing, and immigration allows new populations to randomly appear across the screen.

Of course there are lots of other factors that could be taken into account like populations dying, different populations, one population having genetic advantage and so on - but I've found the best way to build up a model is to start simple with only a few rules and then build up more rules until you have a fit that matches real world observations.

Just click below to run the app:

Enjoy!

### Saving Webcam Snaps using AS3

In my previous post I briefly discussed how you can add a webcam object to the stage and (if the user has a webcam) show the webcam stream within a flash movie.

Thats all well and good but lets do something with it. Since I've already written a post on saving images from flash lets write a little program to take a snapshot of the webcam and save the image to the users desktop!

So lets have a look how this would work:

We already have the following code to create a webcam on the stage -

var CAM:Camera = Camera.getCamera();

CAM.setQuality(0, 100);
CAM.setMode(550, 400, stage.frameRate );

var VIDEO:Video = new Video(550, 400);
VIDEO.attachCamera(CAM);


addChild(VIDEO);


So lets add an event listener to the stage for when a user clicks on the image, this will later invoke the function to save the image.


stage.addEventListener(MouseEvent.MOUSE_DOWN, save);


function save(e:MouseEvent):void


{
}
The tool I use to encode image data is called AS3 core lib. This tool has a load of classes but the one we want to use is called JPGEncoder.as, and you can download it here.


So lets import that into our movie. First create a folder, call it "com" and drag your newly acquired file into it. This folder should be in the same directory as you .fla and .swf files. Above all of the other code on the first frame write the following:

import com.JPGEncoder;

This imports the class we'll need to use to create an image. Next, and just below that add this:



var jpg_encoder:JPGEncoder = new JPGEncoder(100);
This initiates the class and sets the jpg output quality to 100. Of course if you want to output low quality jpegs you could always change this to 50 or something else.

So we have the jpeg encoder, what this does is converts bitmap data into a byte array which your computer will be able to read as a file. So next we'll create a bitmap, this should have the same resolution as your webcam stream (in this case 550x400).

var bitmap:BitmapData(550,400);
Now, within the save function lets draw the VIDEO object into the bitmap data using the draw() function

bitmap.draw(VIDEO);

If you read my previous post on saving from flash you'll already know exactly how to save files, just in case you missed it here it is -
1) Create a file reference object:fileToSave:FileReference = new FileReference();
2) In your save function encode the jpeg data, we'll use the ByteArray class...
var bytes:ByteArray = jpg_encoder.encode(bitmap);
3) and finally just after that within the save function
fileToSave.save(bytes,"screenshot"+".jpg");
The parameters are data and name, the data being the encoded jpeg and in this case the name is "screenshot.jpg". Note you'll need the extension for your computer to recognise the data as an image.

So here is an example, take a little snap of yourself from your webcam. (The whole file is only 8kb!)

Enjoy guys!



### Webcam Tutorial - Getting a webcam set up in flash

I've got a few projects lined up which involve using a webcam so I though what better way to start than to give a quick example of how a webcam can be set up in flash. Here is a complete program - check it out. This can be copied into the first frame of the timeline.

var CAM:Camera = Camera.getCamera();

CAM.setQuality(0, 100);
CAM.setMode(550, 400, stage.frameRate );

var VIDEO:Video = new Video(550, 400);
VIDEO.attachCamera(CAM);



addChild(VIDEO);

So lets go through this one line at a time.

First the Camera class is initiated and a camera object is created using

var CAM:Camera = Camera.getCamera();

Some properties of the camera are then set, the size, quality and frame rate.

CAM.setQuality(0, 100);
CAM.setMode(550, 400, stage.frameRate );

Finally an object needs to be created to make the camera appear on the screen so lets attach the camera to the VIDEO object, and then add the VIDEO object to the stage.

var VIDEO:Video = new Video(550, 400);
VIDEO.attachCamera(CAM);

addChild(VIDEO);



Just click below for an example of how this works.

In my next few blogs I'll show you some cool stuff you can do with the webcam!

Enjoy guys!

## Sunday, 27 September 2009

### Webcam Edge Detection

Heres a quick experiment I did to try and just show outlines of an image. Outlines occur where there is a change in colour, i.e along contours with a contrast greater than zero. By shifting two images over one another by a pixel or two in both the vertical and horizontal direction, and then calculating the difference between the two images in there new positions, the outlines can be found.

Just click below to check out an example:

After calculating the difference blend, the contrast is increased using a matrix filter. This method could be used for shape detection.

The next challenge would be to determine points along each contour, and store contour data to actually do something with it, instead of just showing it visually. Enjoy!

## Friday, 25 September 2009

### jQuery UI - Tab Systems

If you look around websites at the moment almost all of them have some kind of tab system. Facebook uses one on your page, even while I write this, the window I'm writing in is surrounded by tabs and I know I've used tabs on some of my own projects (see The Game Portal).

Tabs are primarily a form of navigation, but what makes them different from a standard navigation header bar, with standard buttons is that the flow through the site is much improved. You don't need to leave a page to view content inside a different tab. This means less wait times, and a nice way to store anything you want to show on your site.

You could opt to write your own tab system, but often it can be hard to achieve complete, or maximum browser compatibility, especially if you're in a rush, or don't want to spend to much time writing something in javascript/ajax.

In a post a few weeks ago I introduced jQuery, and briefly mentioned the jQuery UI package. The jQuery UI package builds on the jQuery framework by adding a set of transitions, actions and web components which work in practically any browser. If you have a quick look on the jQuery UI website you'll notice the build custom download button on the right of the page. You can graphically design most features of the components you want and export the styles and classes associated with them straight from the website.

So lets get started, we wanted to make a tab system.

1) Click Themes on the menu at the top of the jQuery homepage. We want to be a bit interesting so lets make a custom theme.

2) You'll notice on the right you are presented with the UI components, in the default style and on the left you'll find a menu with the headings "Roll your own" and "Gallery". For a set of premade styles click gallery. Often you'll find something here that is in keeping with the design of your website, or you'll find these styles a good jumpstart so that you don't have to design everything from scratch. So I'm making a pretty Techy website, and want something quite cool. Click on the gallery tab and select edit under the Dot Luv style. I really don't like the diagonal lines at the top though, so I'll play around with the top bar. Obviously if you like them, keep them, and have a play around with some of the other settings on the left.

3) Once you're completely happy with your design press the Download Theme button at the top of the settings, you'll be confronted with a new page. Panic not! We're making a tab menu so we don't need any of the other features (with the exception of UI Core which contains some basic functions and initializers) so deselect everything except UI Core and Tabs (in the widgets section).

4) When you're happy with this download the file using the button on the right. At this stage its a good idea to open the file called index.html within the package you downloaded. This contains all of the UI content you downloaded as well as some useful buttons (a tip - if you're looking for lightweight you can remove the styles and images for all of these buttons quite easily by hand). So there is your tab system!

5) To include it on your website you'll have to upload your stylesheet, javascript files and associated images onto your server. Once they are up just link to your files. You'll have to load in the jQuery style sheet first, then the standard jQuery library, and then the jQuery custom library.

For example:

<link type="text/css" href="css/dot-luv/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

would achieve the required effect.

Then to initiate the tab system you'll need to use a simple line of jQuery

<script type="text/javascript">
$(function() { // Tabs$('#tabs').tabs();
}
</script>


And finally the actually object needs to be placed in your page:

<div id="tabs">

<ul>
<li> <a href="#tabs-1">Tab 1</a> </li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>

<div id="tabs-1">I am tab 1's content</div>
<div id="tabs-2">I am tab 2's content</div>
<div id="tabs-3">I am tab 3's content</div>

</div>



As you can see all of the content is loaded into seperate divs, one for each tab!

This is really useful as I mentioned earlier for getting smooth flows around your site, and for improving the user experience!

Unfortunately blogger blogs don't allow you load in style sheets on the fly from within posts so I don't think I can get you a live example, but here is a link to a page I'm working on which does use the tab system. Bear in mind its work in progress!

Also check out The Game Portal if you haven't done so already as that also uses jQuery UI!

Enjoy!

## Tuesday, 15 September 2009

### Nitrome - Some featured games!

I've been getting really addicted to games by Nitrome recently, a flash game company based in London, England. I thought I'd feature a few of my favourites on the site.

First is Snot Put, a cute and equally gross take on the shot put event where you have to swing the main character as fast as you can in a circle, the aim of the game being to throw it as far as you can. Its a small game, but the physics are good and its really addictive!

Next is Twin Shot 2, a new instalment from the design team. This game is beatifully made, and has done an incredible job of recreating the magic of games like Bubble Bobble in the late 80s and early 90s. From start to finish the character and level design is gorgeous, the music is great and not at all repetitive, there are loads of levels (including a bonus pack of 50).

As always just click the thumbnails to play or you can catch them on facebook on The Game Portal.

I'm sure you'll love these ones, Enjoy!

## Monday, 14 September 2009

### Build your own color detector.

In my university lab last Summer I built a colour detector and I thought I'd let you all in on how. If you have a bit of programming knowhow and have the right electronic components (which are really easy to pick up either from the internet or from an electronics store) then this blog should familiarise you with the core principles involved when building a colour detector.
The image to the left is the finished product. 3 tinted LDRs the PIC16F819 micro controller make up the colour detector (as well as an optical to digital converter if you want a PC readout).

Understanding the nature of the colours present in light is a vital part of this project. Light has an additive nature, unlike pigments, which have a subtractive nature. This means that increasing proportions of red, green, and blue light result in

the formation of white light, and various combinations of those colours can form every colour in the visible spectrum.

Due to their ability to produce such a vast array of hues they also form the basis for colour formation in standard computer monitors, televisions and other liquid crystal displays. Technically the choice of red, green and blue are not exact, they are chosen due in large part to the sensitivities of the cone cells in the rear of the retina. Differences in the hues of the red, green and blue constituents chosen may produce different absolute colour spaces, for example sRGB and Apple RGB are two absolute colour spaces used in computer monitors. In computing terms the R, G, B value of a colour represents its red, green and blue components proportionally, normally each on a scale of 0-255 (This requires three 8-bit values). For various other purposes in computer graphics a further two bits per unit may be added, for example RGBA includes information about the alpha channel (transparency) of a pixel, and contains three 10-bit units of colour per pixel. In the case of visible light however only the RGB values, and their associated intensities need to be taken into account.

Since the LDRs that will be used in the colour detector have little or no wavelength dependence it is necessary to use colour filters to determine which wavelengths of light are hitting which detector and in what proportions. Colour filters work by transmitting certain wavelengths of light and reflecting or destroying through interference, the other wavelengths. Manufacturers often produce filters that allow not only the target colours wavelengths through. The effect of this is is often to brighten up the filters, by letting through more light.

A problem with this is that it is practically impossible to determine the exact chromaticities of the filter. A solution to this involves measuring intensities of pure red, green and blue light after they pass through the filter when compared to the intensities before transmission. By creating a transformation matrix from one set of colours to the other and inverting that matrix, a transform will be created to convert measured intensities (post filter) to the original colour of light (pre filter).

Since an optical interface is being used which can only transfer data digitally there is no way of transferring the 3 analogue voltage values directly to the computer. The PIC is used to sample the 3 values, store them, and then convert them into a form which is analysable by the PC. The way chosen to do this was to take a voltage value (in 8-bit so between 0 and 255), and a time delay proportional to this which turned the output port either on or off after each delay. The code snippet below shows how this was achieved although full code for all programs used in the project can be found in the appendices.

//liner delay subroutine (0xFF times input variable);

a equ 0x45

b equ 0x46

delay movwf a

movlw 0xFF

movwf b

ca movwf b

cb decfszb

goto cb

decfsz a

goto ca

return

The delay loop assumes that the voltage value has previously been stored in a. When the loop is called the embedded loop repeats 256a times, creating a time delay proportional to a. By turning the output port on and off, before and after the loop is called, a square wave output of voltage can be created with a period proportional to the input voltage.

movlw b'00000001'

movwf PORTB

// then call the delay loop

movlw b'00000000'

movwf PORTB

This can be repeated 3 times for each of the measured values, resulting in three flashes. The timed pulses will then be sent optically to the computer.

For documentation on how to program your PIC or other microchip I recommend visiting the manufacturers website at http://www.microchip.com/stellent/idcplg?IdcService=SS_GET_PAGE&nodeId=64

So the image to the right is pretty much a summary of the whole system from

LDR to PIC to LED. After this stage the 3 flashes and their corresponding delays (how long they are on/off for) is sent to the computer via an optical to digital converter.

The final step was to write some software in C (as well as a codec for the optical to digital converter), to output RGB values and display something nice on the screen, in this case a blue LED is being shone onto the LDRs.

The image below shows a schematic of the colour detector.
If you have any more questions about the project, let me know,
Good luck!

### Verlet Integration

I did a presentation a while ago about about some of my work with physics engines in flash (at the University of Birmingham). A large section of the talk focussed on verlet integration, which is the method I use to move particles in all of the engines I write. In my opinion if you're playing with large numbers of particles, this is the best way of manipulating them! I first got introduced to Verlet through a fantastic article by Thomas Jakobsen of IO Interactive, about his work on the Hitman physics engine, which was used in the game.

So where do we begin... Maths, always maths. A bit of fairly basic calculus and some Taylor expansions see us through to the final expression for verlet integration and I won't go into the details but the the core idea is that by calculating the position of a particle at the next time-step using the difference between its current position and its previous position, the margin of error can be dramatically reduced.

Here is the final derived expression.

$\vec{v}(t + \Delta t) = \frac{\vec{x}(t + \Delta t) - \vec{x}(t)}{\Delta t} + \mathcal{O}(\Delta t).$

You should be able to see that if we multiply out by the time interval delta-t we are given an expression for the position at the next point in time, which is how we'll use the equation.

This is especially useful in molecular dynamics where positions might be easier to measure than velocities. Obviously if we know positions at two time steps we can also calculate the resulting velocities which is fantastic for collisions and so on.

So, the basic algorithm.

Each particle needs to store two locations, its current location (x,y) and its previous location (px,py). To calculate its next position all we have to do is take the differences between these positions and move the current location by that much. You'll notice that the velocity lags on step behind the positions. This is ideal for calculating collisions for games!

In actionscript pseudocode:

var current:Point = (0,0);
var previous:Point = (0,0);

var tx:Number = 0;
var ty:Number = 0;

tx = current.x;
ty = current.y;

current.x += (current.x - previous.x + F)*R
current.y += (current.y - previous.y + F)*R

previous.x = tx;
previous.y = ty;

As you can see the current value is stored, then the difference between the current and previous value is added on to the current value and the "previous current value" is stored as the previous value. Just 6 lines of code for the main loop, pretty nice.

Another nice feature using the verlet operator is the F and the R values that I have added in.

From a physical perspective F acts as a force, and R acts as resistance. For example if you have some particles in space, gravity might act on them. Gravity acts downwards (this is +ve y axis in flash) so we'll call F in the vertical direction 9.81 (or how ever strong you want your gravity to be) and hey presto, your particle should fall! Now what about air resistance, our giant digital particles will be bouncing off millions of tiny little air particles when they slow down. Obviously as they go faster their speed will increase so the resistive force should also increase. If you set R to 0.99 the velocity will be retarded, and this retardation will be increased as the velocity increases (this isn't in fact entirely true to a real life interpretation of air resistance but it will definitely suffice in a computer game). There we have it, a particle system with forces and resistance.

This very same system can easily include a third dimension, since all of the dimension vectors are completely independent of one another. Hang around and I'll talk about constraints and collision detection using verlet integration.

Enjoy your newfound particle system knowledge.

## Saturday, 12 September 2009

### Old physics engine

Working on the Buzz game has taken me back to some of the physics simulations/engines I've worked on in the past. There is an amazing game out there called Gish, and this little mock up game was inspired by that. In gish you play a blob of slime and you have to complete various obstacle-course-like levels. The physics engine is incredible and the blob of slime itself is made up of hundreds of Springs and points. I used a similar method to create my blob. Gish two is soon to be released, and the physics look to have improved a lot, here is a nice little video.

Anyway, here are a few screenshots of my attempt at creating the Gish Engine in flash.

And here is a flash demo so you can get a feel for the controls and physics (arrow keys to move, space to jump).

Enjoy!

## Friday, 11 September 2009

### Buzz - New Game Project

I'm currently building a new game, so I thought I'd blog at each stage of the way. The game I'm working on is called Buzz and its a game about bees. You control a swarm of bees as they fly around levels trying to pollinate flowers as quickly as possible. I decided to write this game after hearing about colony collapse disorder - a relatively new term given to the phenomenon where bees abandon their hives. The disorder only effects honey bees
and has confused scientists everywhere.

I think that the most likely cause is environmental changes and not a viral conditions as some scientists have speculated, but what do I know, I'm just a flash developer haha...

So first of all I've been working on the game engine. I'm building the game tile-based just to make level creation a bit easier to handle and to keep up the retro feel that I'm going for.