Implementing Transform

We can now start to code. First we add the transformation matrix to context.graphics. As the context is becoming larger and larger, we profit to remove it from the rpn function and create an own class it. All but trivial manipulations of the context will be delegated to the context. We must also adapt postScriptEditor and profit to move the canvas above, as the console output gets longer.

Javascript Editor

rpnContext = class {
    constructor() { 
        this.stack = [];
        this.dict = {};
        this.heap = [];
        this.lasterror = "";
        this.currentcode = "";
        this.width = 600;
        this.height = 800;
        this.data = new Uint8ClampedArray(this.width * this.height * 4);
        this.graphics = { path: [], current: [], color: [0, 0, 0, 255], linewidth: 1, matrix : [1, 0, 0, 1, 0, 0] };        
    }
    error(s) {
        this.lasterror = s;
        this.stack.push(new rpnError(s));
        return this;
    }
    itransform(x,y) {
       const m = this.graphics.matrix; 
       const det = m[0]*m[3] - m[1]*m[2]
       return [ (x*m[3] - y*m[2] +m[2]*m[5] - m[4]*m[3])/det, 
(-x*m[1] + y*m[0] + m[4]*m[1] - m[0]*m[5])/det ]
    }
    pop(...parameters) {
        if (this.stack.length < parameters.length) {
            this.error("stackunderflow");
            return [];
        }
        const result = [];
        for (var p of parameters) {
            const data = this.stack.pop(); 
            if (p == "any") {
                result.push(data);
            } else if (p.includes(data.type)) {
                result.push(data);   
            } else {
                this.error("typeerror");
                return [];
            }
         }
         return result;
    }
    popArray() {
        var found = false;
        var arr = [];
        while (this.stack.length && ! found) {
            const value = this.stack.pop();
            if (value.type == "mark") {
                found = true;
            } else {
                arr.push(value);
            }   
        }
        if (! found) {
            return this.error("stackunderflow");
        }
        arr.reverse();
        const a = new rpnArray(arr, this);
        a.reference.inc();
        this.stack.push(a); 
    }
    transform(x,y) {
       const m = this.graphics.matrix; 
       return [ x * m[0] + y * m[2] + m[4],
x * m[1] + y * m[3] + m[5] ];
    }
};

rpn = function(s, context = null ) {  
    if (!context) context = new rpnContext();
    const list = s.concat(" ").split("");
    var state = "start";
    var current = "";
    var depth = 0;
    for (elem of list) {
        if (context.lasterror) {
           return context;
        }
        context.currentcode += elem;
        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 == "(") {
                    state = "string";
                }  else if (elem == "[") {
                    context.stack.push(new rpnMark()); //mark
                }  else if (elem == "]") {
                    context.popArray();
                }  else if (elem == "%") {
                    state = "comment";
                }  else if (elem.trim() === '') {
                    // ignore whitespace
                }  else  {
                    context.error("syntaxerror");
                } 
                break;
            case "number":
                if (/[0-9]/.test(elem)) {
                    current += elem;
                } else if (elem == ".") {
                    state = "fraction";
                    current += elem;
                } else if (/[a-zA-Z-]/.test(elem)) {
                    context.error("syntaxerror");
                }  else if (elem.trim() === "") {
                    context.stack.push(new rpnNumber(parseFloat(current)));
                    state = "start";
                    current = "";
                } else if (elem == "]") {
                    context.stack.push(new rpnNumber(parseFloat(current)));
                    state = "start";
                    current = "";
                    context.popArray();
                }  else {
                    context.error("syntaxerror");
                }
                break;
            case "fraction":
                if (/[0-9]/.test(elem)) {
                    current += elem;
                } else if (elem.trim() === "") {
                    context.stack.push(new rpnNumber(parseFloat(current)));
                    state = "start";
                    current = "";
               } else if (elem == "]") {
                    context.stack.push(new rpnNumber(parseFloat(current)));
                    state = "start";
                    current = "";
                    context.popArray();
               } else {
                    context.error("syntaxerror");
               }
               break;
            case "operator":
                if (/[a-zA-Z0-9]/.test(elem)) {
                    current += elem;
                } else if (elem.trim() !== "" && elem != "]"){
                    context.error("syntaxerror");
                } else {
                    const data = context.dict[current];
                    const op = operators[current];
                    if (data) {
                       if (data.type == "procedure") {
                          context = rpn(data.value, context);
                       } else if (data.type == "array"){
                            data.reference.inc();
                            context.stack.push(data);
                       } else if (data.type == "string"){
                            data.reference.inc();
                            context.stack.push(data);
                       } else {
                            context.stack.push(data);
                       }
                    } else if (op) {
                       context = op(context);
                    } else {
                    context.error("syntaxerror");
                    }
                    state = "start";
                    current = "";
                    if (elem == "]") {
                       context.popArray();
                    }

}
                break;
           case "namestart":
                if (/[a-zA-Z]/.test(elem)) {
                    state = "name";
                    current = elem;
                } else {
                    context.error("syntaxerror");
                }
                break;
            case "name":
                if (/[a-zA-Z0-9]/.test(elem)) {
                    current += elem;
                } else if (elem.trim() === "") {
                    context.stack.push(new rpnName(current));
                    state = "start";
                    current = "";
               } else if (elem == "]") {
                    context.stack.push(new rpnName(current));
                    state = "start";
                    current = "";
                    context.popArray();
               } else  {
                    context.error("syntaxerror");
               }
                break;
            case "procedure":
               if (elem == "}") {
                   if (depth) {
                      depth--;
                      current += elem;
                   } else {
                        context.stack.push(new rpnProcedure(current));
                        state = "start";
                        current = "";
                   }
               } else if (elem == "{") {
                  depth++;
                  current += elem;
               } else {
                   current += elem;
               }
               break;
           case "string":
               if (elem == ")") {
                   if (depth) {
                      depth--;
                      current += elem;
                   } else {
                        const s = new rpnString(current, context);
                        s.reference.inc();
                        context.stack.push(s);
                        state = "start";
                        current = "";
                   }
               } else if (elem == "(") {
                  depth++;
                  current += elem;
               } else {
                   current += elem;
               }
               break;
           case "comment":
             if (elem == endofline ) {
                state = "start";
             }
        } // switch state
    } // for
    if (state !== "start") {
       context.error("syntaxerror");
    }
    return context;
};

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;
    node6.rows = code.split(endofline).length + 1;
    node4.appendChild(node6);
    const node7 = document.createElement("DIV");
    node7.id = "console" + id;
    node7.className = "jsconsole";
    
    const node8 = document.createElement("CANVAS");
    node8.id = "canvas" + id;
    node8.className = "jscanvas";
    node8.width = 590;
    node8.height = 330;
    node.appendChild(node8);
    node.appendChild(node7);

console.log(node.outerHTML);  // add the node to the parent element

const script = `redirectConsole($id);
        run$id = function() {
        redirectConsole($id);
        const width = 590;
        const height = 330;
        const data = new Uint8ClampedArray(width * height * 4);
        // make it white
        for(i = 0; i< data.length; i++) data[i] = 255;
        const code = document.getElementById("editor$id").value;
        var context = new rpnContext; 
        context.data = data;
        context.width = width;
        context.height = height; 
        context = rpn(code, context);

console.log("stack: " + context.stack.reduce((acc,v) => acc + v.dump + " " , " "));
        if (context.lasterror) {
            console.log("rpn: " + context.currentcode);
        }
        for (key in context.graphics) {
            console.log(key + ": " + JSON.stringify(context.graphics[key]));
        }
        for (key in context.dict) {
            console.log(key + " = " + (context.dict[key].dump));
        }
       if (context.heap.length) { 
       console.log("heap: " + context.heap.reduce(                            function(acc, v) { 
          const val = v.value; 
          if (Array.isArray(val)) {
            return acc + "<br>[" + val.reduce( (acc2, v2) => acc2 + v2.dump + " " , " ") + "] "+v.counter+"<br>";
          } else if (val === null) {
            return acc + "<br>";
          } else {
            return acc + "<br>(" + val + ") "+v.counter;
          }
       }  , "")); 
    }
    const image = new ImageData(context.data, width);
    const canvas = document.getElementById("canvas$id");
    ctx = canvas.getContext("2d");
    ctx.putImageData(image, 0,0);
    };
    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 the operators that work with the matrix

Javascript Editor

operators.currentmatrix = function(context) {
    const m = []; 
    for (v of context.graphics.matrix) {
        m.push(new rpnNumber(v));
    }
    context.stack.push(new rpnArray(m, context));
    return context;
};
unitTest("currentmatrix","[1 0 0 1 0 0]");

operators.scale = function(context) {
    const [y, x] = context.pop("number","number");
    if (!x) return context;
    context.graphics.matrix[0] *= x.value;
    context.graphics.matrix[1] *= y.value;
    context.graphics.matrix[2] *= x.value;
    context.graphics.matrix[3] *= y.value;
    return context;
};

unitTest("2 2 scale currentmatrix","[2 0 0 2 0 0]");
unitTest("2 (a) scale currentmatrix","2 !typeerror");
unitTest("2 scale currentmatrix","2 !stackunderflow");

operators.rotate = function(context) {
    const [a] = context.pop("number");
    if (!a) return context;
    const v = a.value * 3.1415326536 / 180 * -1;
    const m = context.graphics.matrix.slice();
    context.graphics.matrix[0] = Math.cos(v)*m[0] - Math.sin(v)*m[2];
    context.graphics.matrix[1] = Math.cos(v)*m[1] - Math.sin(v)*m[3];
    context.graphics.matrix[2] = Math.sin(v)*m[0] + Math.cos(v)*m[2];
    context.graphics.matrix[3] = Math.sin(v)*m[1] + Math.cos(v)*m[3];
    return context;
};

unitTest("60 rotate currentmatrix","[0.5000173204051283 0.8660154036129353 -0.8660154036129353 0.5000173204051283 0 0]");
unitTest("(a) rotate currentmatrix","!typeerror");
unitTest("rotate currentmatrix","!stackunderflow");

operators.translate = function(context) {
    const [y, x] = context.pop("number","number");
    if (!x) return context;
    const m = context.graphics.matrix.slice();
    context.graphics.matrix[4] += x.value*m[0] + y.value*m[2];
    context.graphics.matrix[5] += x.value*m[1] + y.value*m[3];
    return context;
};

unitTest("50 100 translate currentmatrix","[1 0 0 1 50 100]");
unitTest("2 (a) translate currentmatrix","2 !typeerror");
unitTest("2 translate currentmatrix","2 !stackunderflow");

operators.transform = function(context) {
    const [y, x] = context.pop("number","number");
    if (!x) return context;
    const [x2, y2]  = context.transform(x.value,y.value);
    context.stack.push(new rpnNumber(x2));
    context.stack.push(new rpnNumber(y2));
    return context;
};
unitTest("2 2 translate 50 100 transform","52 102");
unitTest("50 100 transform","50 100");
unitTest("(a) 100 transform","!typeerror");
unitTest("50 transform","50 !stackunderflow");

operators.itransform = function(context) {
    const [y, x] = context.pop("number","number");
    if (!x) return context;
    const [x2, y2]  = context.itransform(x.value,y.value);
    context.stack.push(new rpnNumber(x2));
    context.stack.push(new rpnNumber(y2));
    return context;
};
unitTest("2 2 translate 52 102 itransform","50 100");
unitTest("50 100 itransform","50 100");
unitTest("(a) 100 itransform","!typeerror");
unitTest("50 itransform","50 !stackunderflow");

operators.setmatrix = function(context) {
    const [m] = context.pop("array");
    if (!m) return context;
    if (m.value.length != 6) {
        return context.error("typeerror"); 
    }
    for (var i = 0; i < 6; i++) {
        context.graphics.matrix[i] = m.value[i].value; 
    }
    return context;
};

unitTest("[1 2 3 4 5 6] setmatrix currentmatrix","[1 2 3 4 5 6]");

And we must now integrate transform in all operators that may manipulate user space coordinates.

Javascript Editor

operators.curveto = function(context) {
    const [y3, x3, y2, x2, y1, x1] = context.pop("number","number","number","number","number","number");
    if (!y3) return context;
    if (!context.graphics.current.length) {
       context.stack.push(new rpnError("nocurrentpoint"));
    } else if (!context.graphics.path.length) {
       context.stack.push(new rpnError("nocurrentpath"));
    } else {
      const subpath = context.graphics.path.pop();
      const [x1t, y1t] = context.transform(x1.value, y1.value); 
      const [x2t, y2t] = context.transform(x2.value, y2.value);
      const [x3t, y3t] = context.transform(x3.value, y3.value); 
      subpath.push([ "C", context.graphics.current[0], context.graphics.current[1], x1t, y1t, x2t, y2t, x3t, y3t ]);
      context.graphics.path.push(subpath); 
      context.graphics.current = [ x3t, y3t ];
    }
    return context;
};

operators.lineto = function(context) {
    const [y, x] = context.pop("number","number");
    if (!y) return context;
    if (!context.graphics.current.length) {
       context.stack.push(new rpnError("nocurrentpoint"));
    } else if (!context.graphics.path.length) {
       context.stack.push(new rpnError("nocurrentpath"));
    } else {
      const subpath = context.graphics.path.pop();
      const [xt, yt] = context.transform(x.value, y.value); 
      subpath.push([ "L", context.graphics.current[0], context.graphics.current[1], xt, yt]);
      context.graphics.path.push(subpath); 
      context.graphics.current = [ xt, yt ];
    }
    return context;
};

operators.moveto = function(context) {
    const [y, x] = context.pop("number","number");
    if (!y) return context;
    
    context.graphics.path.push([]);
    const [xt, yt] = context.transform(x.value, y.value); 
    context.graphics.current = [ xt, yt ];
    return context;
};

operators.rcurveto = function(context) {
    const [y3, x3, y2, x2, y1, x1] = context.pop("number","number","number","number","number","number");
    if (!y3) return context;
    if (!context.graphics.current.length) {
       context.stack.push(new rpnError("nocurrentpoint"));
    } else if (!context.graphics.path.length) {
       context.stack.push(new rpnError("nocurrentpath"));
    } else {
       const subpath = context.graphics.path.pop();
       const [xct, yct] = context.itransform(context.graphics.current[0], context.graphics.current[1]); 
       const [x1t, y1t] = context.transform(xct + x1.value, yct + y1.value); 
       const [x2t, y2t] = context.transform(xct + x2.value, yct + y2.value);
       const [x3t, y3t] = context.transform(xct + x3.value, yct + y3.value); 
       subpath.push([ "C", context.graphics.current[0], context.graphics.current[1], x1t, y1t, x2t, y2t, x3t, y3t]);
       context.graphics.path.push(subpath); 
       context.graphics.current = [ x3t, y3t ];       
    }
    return context;
};

operators.rlineto = function(context) {
    const [y, x] = context.pop("number","number");
    if (!y) return context;
    if (!context.graphics.current.length) {
       context.stack.push(new rpnError("nocurrentpoint"));
    } else if (!context.graphics.path.length) {
       context.stack.push(new rpnError("nocurrentpath"));
    } else {
       const subpath = context.graphics.path.pop();
       const [xct, yct] = context.itransform(context.graphics.current[0], context.graphics.current[1]); 
       const [xt, yt] = context.transform(xct + x.value, yct + y.value); 
       subpath.push([ "L", context.graphics.current[0], context.graphics.current[1], xt, yt ]);
       context.graphics.path.push(subpath); 
       context.graphics.current = [ xct, yct ];       
    }
    return context;
};

operators.rmoveto = function(context) {
    const [y, x] = context.pop("number","number");
    if (!y) return context;

if (!context.graphics.current.length) {
       context.stack.push(new rpnError("nocurrentpoint"));
    } else {
      context.graphics.path.push([]);
      const [xct, yct] = context.itransform(context.graphics.current[0], context.graphics.current[1]); 
      const [xt, yt] = context.transform(xct + x.value, yct + y.value); 
      context.graphics.current = [ xt, yt ];
    }

return context;
};

Let's see.

Javascript Editor

Seems to work, but it looks like we have a problem with scanFill. The rest of the T on the left is appearing on the right. We fix that next chapter.

The codebase has now 1540 lines ps20240728.js

My Journey to PostScript