Graphing Raster Used for Tupper’s Formula

Plotting Tupper’s formula first involves understanding how to plot the raster. This is probably the simplest way to explain it, and I call it raster because back when I was a whippersnapper I used to repair TVs, so raster seems to be more logical.

JavaScript provides the canvas element for plotting, and not all browsers support the canvas element however it works fine on Firefox. Therefore, to create the testing raster, I am using the canvas element for plotting. I decided to use the following methods.

 1: ctx.fillStyle="#FF0000";

 2: ctx.fillRect(xs,ys,4,4);

This will draw a small square rectangle to represent a pixel. It is just amazing how programming has improved since my time with the Sinclair ZX80 Kit :-). As you can see this gem of a function is set to draw a square of size 4 × 4 pixels at any location (xs, ys). Once you can draw a square anywhere on the canvas element, all you need to do is to create some for loops to build the raster as mentioned in Mr Tupper’s paper.

Actual Code Running On this Page

 1: function Plot_Tupper() {

 2: with (Math) {

 3: var ys=80;

 4: var xs=0;

 5: var raster=document.getElementById("Plot_Tupper");

 6: var ctx=raster.getContext("2d");

 7:   for (x=0;x<=105;x++){

 8:   ys=80;

 9:      for (v=0;v<=16;v++){

 10:      ctx.fillStyle="#FF0000";ctx.fillRect(xs,ys,4,4);

 11:      ys=ys-5;

 12:     }

 13:  xs=xs+5;

 14:  }

 15: }

 16: }

I am drawing a 4 × 4 pixel square using the ctx.fillstyle method to draw a red square to represent each pixel of the bitmap, and leaving a 1-pixel gap between the squares to create a tiling effect.

As you can see the x count in the for loop begins at zero and ends at 105 the xs coordinate is therefore incremented by 5 - 4 for the square and one pixel for the gap. In JavaScript, the plot direction will therefore be from left to right.

The v counter counts from 0 to 16, but the plot coordinate Ys begins at 80 and plots up by decrementing 5 pixels - 4 for the square and 1 pixel for the gap. I chose to start from 80 for aesthetic reasons to align with my html layout. The plot begins from the bottom-left corner of the grid and the raster scans the columns as mentioned in Tupper’s paper by the following.

"pixel (x, y) corresponds to the region [L + x(R − L)W−1, L + (x + 1 )(R − L)W−1] × [B + y(T − B)H−1,B + (y + 1 )(T − B)H−1]"

When you press the button, the program should plot a grid of red squares. I chose red because in Mr Tupper’s paper, he mentions starting the plot with red coloured squares to indicate undefined regions, but I chose it because it looks "nice". :-)

This Article Continues...