If all colour information is taken away, all that is left is a map of brightness, aka a greyscale image. But RGB image formats do not store luma (Y’) separately. To achieve this effect, the luma (brightness) has to be deduced from the colour components. The most common method to convert an image to greyscale is by setting the grey value to the weighted sum of the colour’s red, green and blue values, using the following formula:

Of course RGB formats do not have a ‘grey value’. What will happen is, all three colour values are set to Y’. This results in an greyscale image. No colours can be perceived. Note that if a point has already a grey value (R=G=B), the luma of that point will be Y’=R=G=B. That is because 0.3 + 0.59 + 0.11 = 1.

The colour components are weighted because of the perceived difference of brightness of colours with the same value. For example, a green value 208 (0xD0) is perceived to be brighter than a red value of 208, and that again brighter as a blue value of 208. See if you agree:

Converted to greyscale, these colours translate to (have a luma of)

• R = 62 = 0.3 x 208
• G = 123 = 0.59 x 208
• B = 23 = 0.11 x 208

And if we now show these grey values:

To turn this around, can we find different colour values that have the same luma? Of course. If we want to stick with the primary colours and completely disregard combinations of RGB, we immediately realise, that the highest luma we can achieve in blue is 255 x 0.11 = 28 = 0x1C. Further we find:

• Y’_R = 28 = 0.3 x 93
• Y’_G = 28 = 0.59 x 47
• Y’_B = 28 = 0.11 x 255

Let’s have a look how these colours are displayed:

Whether these colours look like they have the same brightness largely depends on your screen. On my laptop it looks as if blue is way brighter than red and green. I wonder if anybody still has a CRT monitor, maybe the colours are equally bright on one of those?

The 0.3 / 0.59 / 0.11 rule is very simple, it can never be right for all monitors or even one monitor. It is based on the recommendation of Rec. 601[1]. The exact values are:

It appears this is how PAL/SECAM/NTSC systems calculate luma. HDTV uses an amended formula according to Rec. 709[2]:

Blue comes out even darker, and green is brighter still. To illustrate this point, try to move your mouse over the image below. A grey vertical stripe will appear around the mouse position. Watch closely, above the mouse pointer grey is calculated according to Rec. 601, below the mouse pointer according to Rec. 709. You will notice that 601 red is lighter, and 601 green is darker than under 709.
(Refresh page if you can’t see the image)

The author with his helmet.

Conclusion: There is no all-purpose greyscale algorithm. Different images call for different methods.

teeth = 12;
paths = new Array();
paths[1] = getPath(180, 180, 120, 12, 0);
paths[2] = getPath(180, 180, 120, 24, 0);

180, 180 is the centre point, 120 is the radius, and 12 & 24 are number of teeth. The function to morph is:

function morph()
{
	teeth = 36 - teeth;
	big.animate({path:paths[teeth/12]},5000); 
}

As teeth oscillates between 12 and 24, the path is set to either paths[1] or paths[2]. 5000 is the duration of the animation in milliseconds. We are ready to go. Press Morph!

Oops, something went wrong. Looks like when we double or halve the number of teeth, Raphaël is messing up the points on the path that are for teeth and the points for the holes. A point is a point, Raphaël has no concept of what the points are for. The best solution to this I could think of is to give the 12 teeth cogwheel twice as many points, the second half all being identical to the last of the first half, if that makes sense. The cogwheel will still look the same, but when morphed to a 24 teeth cogwheel the number of points is identical and hence the allocation of points to teeth and holes is the same.

In the code that builds the path we add four dummy points for every tooth we are planning to add. This is because every tooth consists of two half circles, one convex and one concave, each requiring a start and an end point:

/* add extras */
extras = 4 * extras;
while (extras--)
{
	path = path +" L " +(cx+x1)+","+(cy+y1);
}

This should do the trick. Or does it? Click Morph below. It works great for one tooth, and for the 12/24 teeth cog the holes stay intact. But it still doesn’t look right.

What we can do is add one tooth at the time. After all, this seems to work. Click on Morph to see this in action.

How is it done? We use 13 paths, one for each new tooth. Then we animate from one path to the next. Since we are using the same paths over and over again in this little app it makes sense to store them in an array.

paths = new Array();
paths[12] = getPath(180, 180, 120, 12, 12);
paths[13] = getPath(180, 180, 120, 13, 11);
paths[14] = getPath(180, 180, 120, 14, 10);
paths[15] = getPath(180, 180, 120, 15, 9);
paths[16] = getPath(180, 180, 120, 16, 8);
paths[17] = getPath(180, 180, 120, 17, 7);
paths[18] = getPath(180, 180, 120, 18, 6);
paths[19] = getPath(180, 180, 120, 19, 5);
paths[20] = getPath(180, 180, 120, 20, 4);
paths[21] = getPath(180, 180, 120, 21, 3);
paths[22] = getPath(180, 180, 120, 22, 2);
paths[23] = getPath(180, 180, 120, 23, 1);
paths[24] = getPath(180, 180, 120, 24, 0);

The last two parameters passed to getPath() are the number of actual and dummy teeth. See how the number of teeth – actual plus dummy – is constant. These variables could easily be set in a loop, or be calculated when needed. In our case it makes sense to store the paths. In real life, once the number of teeth has been reduced to the final count – in our case 12, be should then get rid of the dummy points in the path with:

cog.attr({path: getPath(180, 180, 120, 12, 0)});

Time to take a look at the morph() function.

function morph()
{
	if (teeth == 12)
		grow(); /* grow teeth */
	else
		lose(); /* lose teeth */
}
function grow()
{
	if (teeth < 24)
	cog.animate({path:paths[++teeth]},500,grow); 
}
function lose()
{
	if (teeth > 12)
	cog.animate({path:paths[--teeth]},500,lose); 
}

Depending on the number of teeth the cogwheel has at the moment, we will either grow teeth or lose teeth. The grow() function animates the path to the one with one more tooth, the lose() function animates the path to the one with one less tooth. See how both function use the animate method with the callback argument, calling itself once one step of the animation had finished. Only until we have reached the intended number of teeth – 24 or 12 respectively.

Adding one tooth at a time is great, but why don’t we try and add the teeth in between the existing teeth? Then we only need two paths to morph between.

While we animate the growing teeth so elegantly, the wheel rolls from side to side as well. And why not?

paths = new Array();
paths[1] = getPath(170, 180, 120, 12, 12);
paths[2] = getPath(440, 180, 120, 24, 0);
 
function morph()
{
	teeth = 36 - teeth;
	cog.animate({path:paths[teeth/12], rotation:teeth*7.5},8000,'<>'); 
}

Let’s finish this article with a bit of fun.

which appears to have been described by de Moivre some 50 years before Binet was born, I was calculating

for no good reason on my very own Casio FX730P

when a friend looked over my shoulder and made a discovery. She had noticed that

(The prime 5 had soon to be excluded, since F₅ = 5 ≡ 0 (mod 5).)

The program was modified to confirm this conjecture, at least in the Casio’s integer range. It became clear that a prime p was sufficient but not necessary, because early on we found

Those were all even numbers, they couldn’t be prime anyway. We were now looking for

Those were the first we found

I could not find how these numbers were connected. Still, our initial conjecture was pretty cool. I showed it to a few mathematicians who assured me we were on to something. I never managed to prove it and eventually forgot about it. Then in May 2008 a paper captured my attention[1]. It includes reference to a proof in [2]. It turns out that the conjecture can be made more precise:

[1] V. E. Hoggatt, Jr. and Marjorie Bicknell: Some Congruences of the Fibonacci Numbers Modulo a Prime P; Mathematics Magazine, Vol. 47, No. 4, (Sep., 1974), pp. 210-214

[2] G. H. Hardy, and E. M. Wright: An Introduction to the Theory of Numbers; 4th ed., Oxford University Press, 1960

First create canvas.

var r = Raphael("canvas", 600, 450);

Next define a cogwheel() function, that takes radius and number of teeth as arguments.

function cogwheel(radius, teeth)
{
	var path = getPath(0, 0, radius, teeth);
	var cog = r.path(path);
	
	return cog; 
}

Finally create two cogs. The radius and number of teeth of the second wheel are three times that of the first. See how we shift the wheels and set attributes like fill gradient and stroke width.

small = cogwheel(50,13).translate(343,88).attr({
	gradient: '90-#526c7a-#64a0c1',  
	stroke: '#3b4449',  
	'stroke-width': 3,  
	'stroke-linejoin': 'round'
	}); 
big = cogwheel(150,39).translate(200,230).attr({
	gradient: '90-#7a6c52-#a0c164',  
	stroke: '#49443b',  
	'stroke-width': 3,  
	'stroke-linejoin': 'round'
	});

To generate a path that describes a cogwheel, the cogwheel() uses function getPath(). This returns a string holding the path for a cogwheel. A point [x,y] on the x-axis is rotated by an angle equivalent to 360°/(number of teeth). For 12 teeth this would be 30°. Since a tooth consists of a convex and a concave half circle, we also need a point in the middle, hence the rotation of [x,y] by sector/2. Note how we add the coordinates of the centre point [cx,cy] to the path. This is so as to make the rotation of [x,y] around [0,0], which is the easiest.

/* now rotate */
var z = teeth;
while (z--)
{
	x1 = x * Math.cos(sector) - y * Math.sin(sector);
	y1 = x * Math.sin(sector) + y * Math.cos(sector);
	x2 = x * Math.cos(sector/2) - y * Math.sin(sector/2);
	y2 = x * Math.sin(sector/2) + y * Math.cos(sector/2);
	
	path = path + " A "+rs+","+rs+"  0 1,1 "+(cx+x2) + "," + (cy+y2); 
	path = path + " A "+rs+","+rs+"  0 0,0 "+(cx+x1) + "," + (cy+y1); 
	x = x1;
	y = y1;
}

This is what we have got so far. We have 12 teeth, three in each quadrant:

It is easy to add a hole in the middle. We do this by building a circle out of two half circles.

rs1 = radius / 10;
path = path + " M "+(cx-rs1)+","+cy;
path = path + " A "+rs1+","+rs1+"  0 0,0 "+(cx+rs1) + ","+cy; 
path = path + " A "+rs1+","+rs1+"  0 0,0 "+(cx-rs1) + ","+cy; 

The trick is to make the teeth go around clockwise, and the hole in the middle counter clockwise. That way the area, that this path describes, is subtracted from the object.

The last thing we need to do is to make the spokes by adding four fan-shaped holes. Each of these consists of two lines and two arcs. I spare you the maths. Here is the finished cogwheel:

Below is one digit of the 7 segment LED. Click the buttons to control the segments and the decimal point.

Because the digit is slanted, it can easily be put into a row to form a calculator display. There is space for the decimal point. How convinient.

Now let’s look at the simplified code for this LED digit. After creating the Raphaël canvas we set a black background for the LED digit.

window.onload = function () 
{
  var r = Raphael("canvas", 240, 250);
  var display = r.rect(0,0,185,244,0).animate({fill: "#000"},0);

The digit is stored in a set. We push on the paths for the segments and a circle for the decimal point.

  led = r.set();
  led.push(
    r.path("M 11,0 L 35,0 35,1 32,4 12,4 8,1 z"),
    r.path("M 32,4 L 36,1 37,3 33,22 31,24 29,22 z"),
    r.path("M 28,27 L 30,25 31,25 32,27 29,45 28,48 25,45 z"),
    r.path("M 4,45 L 24,45 27,48 25,49 2,49 1,48 z"),
    r.path("M 6,25 L 7,27 4,44 0,48 0,47 3,27 z"),
    r.path("M 8,1 L 11,4 8,21 6,24 4,22 7,3 z"),
    r.path("M 9,22 L 28,22 30,24 28,26 8,26 6,25 6,24 z"),
    r.circle(34,47,2)
  );

After that the segments are filled with a dark grey.

  for (var i = 0; i<8; i++) 
  {
    led[i].animate({fill:colourledoff, "stroke-width": 0}, 1000);
  }
}

We now need a function to switch the relevant segments on or off. First we create an array of on/off flags for every segment and every symbol, i.e. ’0′..’9′, ‘-’, and ‘E’. For example, to show a ’5′ all segments are on apart from segments 2 and 5. We also define the colours to use for the segments.

var colourledon  = "#0F0";
var colourledoff = "#444";

var segments = [];
segments['0'] = new Array(1,1,1,1,1,1,0);
segments['1'] = new Array(0,1,1,0,0,0,0);
segments['2'] = new Array(1,1,0,1,1,0,1);
segments['3'] = new Array(1,1,1,1,0,0,1);
segments['4'] = new Array(0,1,1,0,0,1,1);
segments['5'] = new Array(1,0,1,1,0,1,1);
segments['6'] = new Array(1,0,1,1,1,1,1);
segments['7'] = new Array(1,1,1,0,0,0,0);
segments['8'] = new Array(1,1,1,1,1,1,1);
segments['9'] = new Array(1,1,1,1,0,1,1);
segments['-'] = new Array(0,0,0,0,0,0,1);
segments['E'] = new Array(1,0,0,1,1,1,1);

This array is used in the update() function, which takes one character as its argument:

function update(num) 
{
  var x=7;
  while (x--)
  {
    if (segments[num][x])
    {
      led[x].animate({fill:colourledon}, 1000);
    }
    else
    {
      led[x].animate({fill:colourledoff}, 1000);
    }
  }
}

A similar function controls the decimal point.

function decimal(pChecked) 
{
  if (pChecked)
  {
    colour=colourledon;
  }
  else
  {
    colour=colourledoff;
  }
  led[7].animate({fill:colour}, 1000);
}

This was the simplified code for one digit. In the calculator code the digit is cloned into an array of LED digits:

/* clone single LED */
var ledrow=[];
ledrow[0] = led;
var z=10;
while (z--)
{
  ledrow[10-z] = ledrow[9-z].clone();
  ledrow[10-z].translate(-41,0)
}

When you flip the display and you have a really slow computer you might see the segments being dragged behind as shown in the following screenshot:

prefix character : X | Y | Z | x | y | z
subscript number : 0..127

The string of digits that form the subscript is interpreted as a number and internally stored as such against a variable prefix. This is not the prefix given by yourself. Rather, prefixes are dished out in the order

X, Y, Z, x, y, z

Read variable names like so:

Y3 => Y₃
x14 => x₁₄
z027 => z27 => z₂₇
X => X0 => X₀
Y312 => Y56 => Y₅₆

Note how 027 is equivalent to 27. Further notice that a variable prefix on its own implies subscript 0. The last line illustrates another peculiarity. Subscripts are in the range 0..127. The variable name Y312 will internally be represented as Y₅₆.

Since values are stored against a prefix and its subscript, the variable name that was used when the variable has been defined is lost and cannot be restored. Prefix and subscript depend on the position of the variable in a clause. Confused?

Let’s try this. Gives us a chance to interact with the system. First we enter a program:

&.((Reverse y26 X40)
1.   (Reverse y026 () X40))
&.(Reverse (x0|Y2) x2 z0)
1.   (Reverse Y2 (x|x2) z0))
&.(Reverse () z z)
&.

The variable names are a bit silly, but this is for demonstration purposes. Now let’s run the program.

&.?((Reverse (1 2 3 4 5 6) x8) (P x8))
(6 5 4 3 2 1)
&.

It works. Time to list the Reverse program:

&.LIST (Reverse)
&.((Reverse X Y)
1.   (Reverse X () Y))
&.(Reverse (X|Y) Z x)
1.   (Reverse Y (X|Z) x))
&.(Reverse () X X)
&.

If this is what you have expected then give yourself a pat on the shoulder.

What’s this about? The reason for this strange naming convention is simply the fact that the tokeniser has to make a distinction between variable names and constants. If it is not a variable name it is a constant.

These are not variable names:

K023
Name
post_code
$temp
X_01

Stuck with it? No, not at all. The syntax rules were provided in an editable file and could thus be changed. For example, the prefix characters could be changed from

X | Y | Z | x | y | z

to

a | b | c | d | e | f | g | h | i | j | k | l | m | n | o | p | q | r | s | t | u | v | w | x | y | z

making all tokens starting with a lowercase letter followed by a number a variable name, and the rest a constant.

<isindex> All that is needed is adding the isindex tag to the head of the html document:

<html>
<head>
<isindex>
...
</head>
<body>
...

This tag would tell the browser that this document is searchable (is an index). The browser now has to provide means for the user to enter search terms. As an example here a screenshot of how Mosaic 1.0 did this in 1993. The search field is placed below the rendered html page:

Other browsers I have tried show the input field as part of the html page, at the very top and usually separated from the actual page by a horizontal ruler. You will find more examples, including from recent browsers, at the bottom of this post.

Suppose the user enters search words and presses return. What then?

Search What happens is this: The browser requests the same page again, but this time the search words are appended to the URL. The search words are combined with the ‘+’ sign. The separator between URL and search string is the question mark. Example:

http://www.server.com/index.html?africa+magpie

You will have three thoughts now:
1. This looks kind of familiar.
2. What happens if this hits the server? What does search mean?
3. How can a html document perform a search anyway?

1. The URL looks like a URL passing GET parameters from a form, only – not quite. What is missing is the name of the form field:

http://www.server.com/index.html?search=africa+magpie

2. The meaning of search is not defined. It is up to the server to perform a search suiting the presented data. The server could highlight all search words in the document, or only display chapters with one of the search words in the title. The sky is the limit!

3. You are right, it can’t. The actual search would be carried out by a CGI, in those days probably a command-line executable. The easiest way to achieve this is to have the start page generated by the CGI as well. The URL could then look something like that:

http://www.server.com/cgi-bin/index.cgi?africa+magpie

The alternative is to modify index.html in this way:

<html>
<head>
<isindex>
<base href="http://www.server.com/cgi-bin/index.cgi">
...
</head>
<body>
...

Either way, index.cgi will be able to access the search words in two ways:

• Each word is a command-line parameter of the executable.
• The entire search string is present in the environment variable QUERY_STRING (sounds familiar?).

Example Try it while you can. (isindex is deprecated in HTML 4.) Have a look how your browser handles isindex. I have changed the default prompt. (Styling is possible by playing with the body tag.)

<isindex prompt="Find Shakespeare Play">

Enter a word to filter the list of Shakespear’s plays:

Browsers Below a few examples, including recent browsers.

Netscape 1.1 (1995):

Opera 6.0 (2001):

Opera 7.50 (2003):

Firefox 3.6 (2010):

Safari 5 (2011):

Google Chrome 11 (2011):

Internet Explorer 9 (2011):

Here you can see my original 8″ floppy. If only I had a drive to read it, I would be able to play with the interpreter again! For those who don’t know what 8″ are I have included a smartcard for reference. Click to enlarge.

Programs What is called a function or a routine in other systems is called a program in micro-PROLOG. Here are the famous two clauses that define the append program. The ampersand is the supervisor prompt, the dot the prompt of the read function. Note that on line three there is no supervisor prompt as the clause has not been entered completely. The read function displays the number of open parentheses and its prompt, the dot, to say it is ready for more input.

&.((Append () x x))
&.((Append (x|X) Y (x|Z))
1.     (Append X Y Z))
&.

Before we try and run a program, let’s look at the SUM program for a moment. Here are examples of how it can be used:

(SUM 3 4 x) yields x = 7
(SUM 1 x 9) yields x = 8
(SUM x 5 11) yields x = 6

But there is another way to use it. Can you guess?

(SUM 17 26 43) succeeds
(SUM 13 42 54) fails

To execute a program, the run command “?” is used. The run command will only report if the goal succeeded or failed. If the goal succeeds, the run command finishes silently and the supervisor prompt is shown. The supervisor is ready for new input.

&.?(SUM 1 x 9)
&.

If the goal fails, run will print a “?” before handing over to the supervisor:

&.?(SUM 13 42 54)
?
&.

To see the actual result of a calulation, a print instruction needs to be included in the goal. As an example we use PROD which does multiplication:

&.?((PROD x 7 35) (PP The result is x))
The result is 5
&.

SUM and PROD are built-in programs. Needless to say, there are no programs for subtraction and division. One more interesting fact about the PROD program shall be mentioned here. It can be matched with four arguments, the last being the remainder of the division:

&.?((PROD 4 x 19 y) (PP factor x remainder y))
factor 4 remainder 3
&.

To round off this post, we finally run the append function we defined at the beginning of his post. First we append one list to another.

&.?((Append (1 2) (3 4) x) (P x))
(1 2 3 4)
&.

Next find the missing sub-list:

&.?((Append x (6 7) (3 4 5 6 7)) (P x))
(3 4 5)
&.?((Append (1 2) x (1 2 3 4 5 6 7)) (P x))
(3 4 5 6 7)
&.

Split a list:

&.?((Append x y (1 2 3 4 5)) (P x y))
() (1 2 3 4 5)
(1) (2 3 4 5)
(1 2) (3 4 5)
(1 2 3) (4 5)
(1 2 3 4) (5)
(1 2 3 4 5) ()
&.

I know what you are thinking now. Can we use PROD for factorisation?

&.?((PROD x y 60) (LESS x y) (P x y))
1 60
2 30
3 20
4 15
5 12
6 10
&.

Unfortunately, the built-in PROD program does not support this.

Features There are other topics I would like to write about. I plan to do a short post on tail recursion, optimisation, the list constructor, and even on variable names.

This train started as a cartoon from a book. There it had a diesel engine. I have ruined the joke by replacing that with a steam engine. Then I made it go round the track (1996).

The animation consists of 27 images. To safe space an optimizer was run to find those areas of a frame that have changed in relation to the previous frame. Only the first image is full size, the rest merely update an area. The next image shows this in slow motion:

Note that the train is pulling a ‘tail’ of empty space. This is to get rid of the end of the last carriage.

The animation was created with Advanced GIF Animator, a Canadian software if memory serves, and the killer app of the day.