Dictionary - defining new operators

Our PostScript machine uses the stack as main data structure, but it has also a dictionary. The dictionary allows to define values and to use them later.

We adapt the machine to allow for dictionaries. There is a new state "name" initiated with the slash character and "procedure" in curly brackets. We also better define whitespace.

Javascript

rpn = function(s, context = null ) {
    if (!context) {
       context = {};
       context.stack = [];
       context.dict = {};
    }
    const list = s.concat(" ").split("");
    var state = "start";
    var current = "";
    for (elem of list) {
        switch (state) {
            case "start":
                if (/[0-9-]/.test(elem)) {
                    state = "number";
                    current = elem;
                } else if (/[a-zA-Z]/.test(elem)) {
                    state = "operator";
                    current = elem;
                }  else if (elem == "/") {
                    state = "namestart";
                }  else if (elem == "{") {
                    state = "procedure";
                }  else if (elem.trim() === '') {
                    // ignore whitespace
                }  else  {
                    throw new Error ("invalid character " + elem)
                } 
                break;
            case "number":
                if (/[0-9]/.test(elem)) {
                    current += elem;
                } else if (elem == ".") {
                    state = "fraction";
                    current += elem;
                } else if (/[a-zA-Z-]/.test(elem)) {
                    throw new Error ("invalid character " + current + elem);
                }  else if (elem.trim() === '') {
                    context.stack.push(parseFloat(current));
                    state = "start";
                    current = "";
                }  else {
                    throw new Error ("invalid character " + current + elem);
                }
                break;
            case "fraction":
                if (/[0-9]/.test(elem)) {
                    current += elem;
                } else if (elem.trim() === '') {
                    context.stack.push(parseFloat(current));
                    state = "start";
                    current = "";
               } else {
                    throw new Error("invalid character " + current + elem);
               }
               break;
            case "operator":
                if (/[a-zA-Z0-9]/.test(elem)) {
                    current += elem;
                } else if (elem.trim() === '') {
                    const name = context.dict[current];
                    const op = operators[current];
                    if (name) {
                       context = rpn(name, context);
                    } else if (op) {
                       context = op(context);
                    } else {
                        throw new Error("invalid operator " + current);
                    }
                    state = "start";
                    current = "";
                } else {
                    throw new Error("invalid character " + current + elem);
                }
                break;
           case "namestart":
                if (/[a-zA-Z]/.test(elem)) {
                    state = "name";
                    current = elem;
                } else {
                   throw new Error("invalid character /" +  current + elem);
                }
                break;
            case "name":
                if (/[a-zA-Z0-9]/.test(elem)) {
                    current += elem;
                } else if (elem.trim() === '') {
                    context.stack.push(current);
                    state = "start";
                    current = "";
               } else  {
                    throw new Error("invalid character " + current + elem);
               }
                break;
            case "procedure":
               if (elem == "}") {
                   context.stack.push(current);
                   state = "start";
                   current = "";
               } else {
                   current += elem;
               }
               break;
        } // switch state
    } // for
    if (state !== "start") {
         throw new Error("invalid state " + state + " " + current + elem);
    }
      return context;
};

We did also rewrite the return. The rpn function now not only returns the top of a stack, but also the entire context. We rewrite postScriptEditor to show the elements properly.

Javascript

postScriptEditor = function(code) {
    const id = Math.floor(Math.random() * 1000);  // create unique id for console.log
    const node = document.createElement("DIV");   // build the HTML nodes
    node.id = "id" & id;
    node.className = "psmain";
    const node2 = document.createElement("DIV");
    node2.className = "editzone";
    node.appendChild(node2);
    const node3 = document.createElement("DIV");
    node3.className = "editheader";
    node3.innerHTML = "PostScript";
    node2.appendChild(node3);
    const node4 = document.createElement("FORM");
    node2.appendChild(node4);
    const node5 = document.createElement("BUTTON");
    node5.type = "button";
    node5.id = "button" + id;
    node5.innerHTML = "Run";
    node4.appendChild(node5);
    const node6 = document.createElement("TEXTAREA"); 
    node6.id = "editor" + id; 
    node6.className = "pseditor"; 
    node6.innerHTML = code
    node4.appendChild(node6);
    const node7 = document.createElement("DIV");
    node7.id = "console" + id;
    node7.className = "jsconsole";
    node.appendChild(node7);
    console.log(node.outerHTML);  // add the node to the parent element

const script = `redirectConsole($id);
        run$id = function() {
        redirectConsole($id);
        const code = document.getElementById("editor$id").value;
        const context = rpn(code);
        console.log(context.stack.join(" "));
        for (key in context.dict) {
           console.log(key+" = " + context.dict[key]);
        }
    };
    document.getElementById("button$id").onclick = run$id;`.replaceAll("$id", id).replaceAll("$code",code);
    const scriptnode = document.createElement("SCRIPT");
    scriptnode.innerHTML = script;
    document.body.appendChild(scriptnode);  // run the script
};

We add new operator def. However, we see that the operator uses not only the stack, but also the dict. We therefore refactor the operators that they work on a context which includes stack and dict.

Javascript

We try it out. We define foo, bar and then put foo on the stack.

Javascript Editor

If you define a name by another name it is not the same if you define directly the value (early binding) or if you define it in a procedure (late binding).

Javascript Editor

We can now define a new operator and use it

Javascript Editor

What if we need to use the parameter multiple times, for example if we square? We add the most PostScript stack operators dup, pop, exch.

Javascript

Javascript Editor

We add trigonometric functions to create a function with two parameters.

Javascript

So we convert polar coordinates to cartesian coordinates

Javascript Editor

This method to capture multiple parameters is propably more readable than handling the stack, though it is possible. Be aware that you must capture the stack in reverse order. Note also, that the dictionary we have implemented uses a global namespace. We will correct that later.

The dictionary can also overrule the operators, though it is not sure when this would make sense.

Javascript Editor

The current code is now 236 lines ps20240627.js

My Journey to PostScript