Latest articles and Revisions

Gimp scaling animation

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 applications software

Graphic files - Adding colour

image28.gif

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

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.

Polygons and the artistsColour wheel

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 animation

Javascript animation - Bouncing ball

No tutorial about animation would be complete without a bouncing ball example. For animation to work you need to make use of the built in Javascript timer. The code for this animation is shown below.

Using global variables (i.e. variables specified outside a function) in this way is generally not a good idea; because of possible side effects. A future update of this page should fix this.

HTML 5 canvas - adding text

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.

HTML5 Canvas

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.

Objects

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

Math Object

The Math object provides functions for basic mathematical operations.

Hexadecimal numbers

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.

Number schemes

The decimal system

The numbering scheme in everyday use is the decimal (or denary) system and numbers are represented by 10 digits i.e. the numbers 0 to 9.

Counting starts at zero, (see counting wheels below). Rotating the wheel anticlockwise adds 1 to the current count until the number reaches 9 whereupon the count is reset to 0.

Radians and degrees

Radians and degrees (or angular measure)

radian2.jpgWhen 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

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.