Graphics

This is a simple Flash based paint program that shows how fully functional applications can be put together quickly and deployed to the web for easy access – this example is coded using ActionScript 2.0. This is the great thing about Flash, the immediate availability of content. Once it has been created, all you have to do is embed the Flash file into a web page – and that’s it! No installation needed to be done by the user, they can use the application straight away.

Here below, we have a paint application that can be used to create a drawing by using the mouse. Different colours are available, and the line thickness and opacity can be controlled. The user can also clear the picture and start again!

Try it now! Click on the canvas and drag the mouse around. Select different colours and line properties. Enjoy!

The core code needed to render the canvas area is shown below: continue

Microsoft Excel is a very versatile tool and can be used for many different purposes. The example we have here is a volume calculator for some simple geometric shapes. The user can enter values for the parameters (such as side length, or radius), and the corresponding volume is updated automatically.

Click to enlarge

However, rather than just display the parameters and calculated volume, it is often more user friendly to format the spreadsheet area with diagrams, and the odd splash of colour here and there!

Also, this example does not make use of any macros, but could be easily extended to do so. The volume equation for each shape is entered directly into worksheet cells but could be stored in macro code instead in the form of a custom worksheet function. This function could then be called as necessary, just like a standard worksheet function.

This is a dynamic bar chart written in Flash. Ok, so this may not have an everyday instant usage but you have to admit it is eye catching!

Unlike a standard bar chart which displays a series of bars with static values, our example has each bar dynamically cycling its value its maximum value down to a fixed lower value. Each bar chart still has an individual maximum value like its static counterpart.

This example is coded using ActionScript 2.0 and we can achieve the desired effect by modifying the value for each bar with the sinusoidal function as follows:

bar1_mc._height = Math.abs(Math.sin(offset*0.4+0.5))*100+bar1_val;


Animation of the numerical text is done in a similar way. Each bars text y co-ordinate is tied to the bars top y co-ordinate. The idea used in this example can be extended to create some interesting effects. Also, advanced charting in 2D and even 3D can be accomplished by using a bit of polish and creativity!

If you are interested in creating your own custom charts, or have any specific requirements then please contact us for some assistance. We can create charts in other languages of course. This one was done in Flash so it can easily be embedded in a web page blog post.

In many graphics applications it is often necessary to know the distance between two points or pixels, such as collision detection in games. Here, we are just interested in calculating the distance between pixels in 2D. However, it is not that much more complicated to extend this to 3D and we will be covering this at a later date. Anyway, back to our 2D example.

We can determine the distance from one known pixel co-ordinate to another using some simple trigonometry. In the figure below we would like to calculate the distance from point a to point b. These could be any two pixels on the screen with co-ordinates (x₁,y₁) and (x₂,y₂) respectively.

The distance from a to b is calculated using Pythagoras’ theorem, as long as the co-ordinates of the two points are known. First we need to know the vertical difference between the points (y₂-y₁) and the horizontal difference (x₂-x₁) as show below. continue