Converting 3D Plot is the last of my preparation before tackling Awari. The main challenges with 3D Plot was how to properly handle the tab statements, and how to handle the animation of what used run on a tractor-feed printer.

3D Plot is the last of the BASIC Computer Games that the appears alphabetically before the rest of the already converted games, when the downloaded source files are sorted alphabetically. My main reason for doing them this way is to help prevent some of them being missed out.

The existing ConsoleWindow currently doesn’t handle tabs. BASIC uses tabs for two different purposes. One is to jump to the next tab stop, similar to when pressing the tab-key while in an editor, and the other is to move the cursor to a specific column number. Only the second part is used in 3D Plot so I’ll start with that one, and move on to the other use in Awari when the need calls for it.

Tracking our position

Before being able to move to a specific column number, we need ConsoleWindow to know at what X position the cursor is located. Up until now it didn’t know anything about where it was, and just blindly added text content to the output.

The following is all that was added to the write method, the simpler the better:

this.cursor.x = (this.cursor.x + text.length) % this.columns;

How do we want to use tabs

The BASIC code that uses tabs commonly looks like this:

1 PRINT TAB(32);"3D PLOT"
2 PRINT TAB(15);"CREATIVE COMPUTING  MORRISTOWN, NEW JERSEY"

After assigning it to a variable called “con” for the sake of brevity, I want to tabs in a similar way to how they were used in BASIC, but will have to do it via the con object.

con.writeLine(con.tab(32) + "3D PLOT");
con.writeLine(con.tab(15) + "CREATIVE COMPUTING  MORRISTOWN, NEW JERSEY");

Adding the tabs feature

Hopefully a simple addition to ConsoleWindow is all that’s required to achieve this:

this.tab = function (col) {
    if (this.cursor.x <= col) {
        this.write(" ".repeat(col - this.cursor.x));
    } else {
        this.writeLine();
    }
    return "";
};

Because it’s used from within the midst of a text output area, an empty string also needs to be returned from it.

Converting 3D Plot

The original program is quite simple with this one. No input is performed, all it does is to output a nice looking plot of some waves, which can be seen on the original 3D Plot page.

The main difference I made from the original is to allow the plot to be seen on the page as it’s being made, by faking a for loop and temporarily halting the script for 100 milliseconds after each line was created.

Normally a for loop looks like this:

var x;
for (x = -30; x <= 30; x += 1.5) {
    ...
}

By putting it in a named function, I can stop it, then arbitrarily later set it going on the next line, 100 milliseconds later in this case.

var x = -30;
function plot() {
    if (x <= 30) {
        ...
        x += 1.5;
        setTimeout(plot, 100);
    }
}

This now lets us simulate it being printed on a tractor-feed printer.

The final result can be seen at the 3d Plot codepen page. I think that I am now ready to take on the big challenge, the game of Awari that halted the previous person’s conversion efforts.

Advertisements