Brief introduction to Boolean algebra (or propositional Logic)

When writing conditional statements, such as if (condition) { ... } else {... }, its helpful to have a basic understanding of the laws of logic (or more formally Boolean algebra) that connect conditional statements together. These can be described by the operation of just 3 connectives, They are

Problem specification - Adding a Table of Contents.

The aim is to be able to show a complete novice to HTML, how to add a Table of Contents (TOC) to a page inside a pair of div tag (with id="toc") provided for this purpose. Initially the TOC should list all H3 headers. and each item in the TOC must include a hypertext link to the relevant (h3) paragraph. Then having established a procedure, to use javascript to achieve the same result automatically.

Programming projects (or extended programming examples)

There is no single path to learning any programming language, Sure there are some basic concepts you need to get out of the way first, but after that you learn the bits that are relevant to the current problem.

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.

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.

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.