Latest articles and Revisions

Scaling animation effect with the GIMP

Here is a animation to demonstrate the effects of scaling based on Alice in Wonderland, based on the GIMP version 2.8. Having drunk the magic potion Alice begins to shrink. Instead of Alice its more fun if you shrink yourself. All you need is a digital camera with a timer, a tripod and a basic knowledge of the GIMP. If you don't have a timer on your camera, or a tripod, then you'll need a friend to take a couple of pictures for you.

Graphic files - Adding colour

The picture on a computer monitor or Video Graphic Array (VGA) , is made up of an array of dots, or pixels and is known as a bitmap. A typically display might consist of a line of 800 horizontal dots, each line is repeated vertically 600 times to make a frame. The number of dots in a frame is referred to as the screen resolution.

GIMP animation - getting started

GIMP stands for GNU Image Manipulation Program and is an open source software application covered by the General Public License [GPL]. The GPL provides users with the freedom to access and alter the source code that makes up computer programs. The GIMP is suitable for a variety of image manipulation tasks, including photo retouching, but in this article we'll concentrate on some of the basic animation facilities.

HTML5 canvas element - polygons and the artists colour wheel

When drawing a circle, the computer program actually draws a polygon, with so many sides it looks like a circle. By actually specifying the number of sides the program can be made to draw regular polygons. The example below shows an octagon. Only some minor changes have been made to the original circle program.

Canvas element - adding text

A previous example used the following three diagrams as part of a maths refresher. The original diagrams were (of course!) drawn using the canvas element. By placing the mouse over any canvas element on any HTML page, and right clicking on it, you can then save the resulting drawing just as you would for any other image.

Canvas element - circles and ellipses

Several new elements have been introduced with the release of hTML5. Perhaps the most significant, is the canvas element which now makes it possible to draw, add text and create animations using Javascript. It is also possible to manipulate images.

Javascript Objects

When considering Javascript objects, its worth remembering that javascript is not confined to HTML, It can be used to manipulate XML, which in turn can be used to mirror the table structures found in a database. In fact many websites and Content Management Systems use databases to store information to be displayed on the site and HTML has become a popular front end for such databases.

Javascript objects, in common with other object orientated programming languages, have both properties and methods.

Math Object

Hexadecimal colour values

This example demonstrates how Javascript can convert between hexadecimal and decimal numbers by prefixing a (hexadecimal) number with 0x. When a hexadecimal number is parsed, it outputs is decimal equivalent.

This little trick avoids having to write a function to do the conversion.

Radians and degrees (or angular measure)

When measuring angles we usually
measure them in degrees. There are 360 degrees in a circle.
I.e. a degree simply divides a circle into 360 segments.
An alternative radial measure is known as a radian. A radian is the
angle formed by measuring the radius around the
circumference of a circle as show by the diagram. 1
radian is approximately 57.32 degrees.

Operators

The most common operators are mathematical operators; +, -, /, * (add, subtract, divide, multiply) for example.
Operators can be split into two groups, comparison operators and assignment or 'action' operators. Comparison operators
test to see if two variables relate to each other in the specified way, for example, one variable is a higher number than the other.
Other operators perform an action on a variable, such as increasing it by one.