Behold your vector nightmare, Amiga fans!

2021-03-06 - Reading time: 6 minutes

Kickstart1_3[3].pngOver on Hacker News there was an entry about the "awful" Amiga Kickstart 1.x icon and why it looked the way it did. This led to a link over on Stack Overflow where it was revealed that this was graphic actually drawn in a vector style, as opposed to raster pixels.

They also provided the actual bytes used to render the graphic. I thought it'd be fun to write a little parser to render these bytes.

And so did several other people, apparently, as I'm discovering now. :|

Anyway, here's my humble Codepen. And if that goes down, the original code is below the embed. 😎

(I skipped flood fill because I used two.js for this, and didn't realize until it was too late that I'd chosen poorly. Easy enough to swap out the graphics library, but it's time to move on.)

See the Pen Amiga Kickstart vector parser by Toby D (@Fortyseven) on CodePen.

Inspired by:


const floppy = [
    0xFF, 0x01, 0x23, 0x0B, 0x3A, 0x0B, 0x3A, 0x21, 0x71, 0x21, 0x71, 0x0B, 0x7D, 0x0B, 0x88, 
    0x16, 0x88, 0x5E, 0x7F, 0x5E, 0x7F, 0x38, 0x40, 0x38, 0x3E, 0x36, 0x35, 0x36, 0x34, 0x38, 
    0x2D, 0x38, 0x2D, 0x41, 0x23, 0x48, 0x23, 0x0B, 0xFE, 0x02, 0x25, 0x45, 0xFF, 0x01, 0x21, 
    0x48, 0x21, 0x0A, 0x7E, 0x0A, 0x8A, 0x16, 0x8A, 0x5F, 0x56, 0x5F, 0x56, 0x64, 0x52, 0x6C, 
    0x4E, 0x71, 0x4A, 0x74, 0x44, 0x7D, 0x3C, 0x81, 0x3C, 0x8C, 0x0A, 0x8C, 0x0A, 0x6D, 0x09, 
    0x6D, 0x09, 0x51, 0x0D, 0x4B, 0x14, 0x45, 0x15, 0x41, 0x19, 0x3A, 0x1E, 0x37, 0x21, 0x36, 
    0x21, 0x36, 0x1E, 0x38, 0x1A, 0x3A, 0x16, 0x41, 0x15, 0x45, 0x0E, 0x4B, 0x0A, 0x51, 0x0A, 
    0x6C, 0x0B, 0x6D, 0x0B, 0x8B, 0x28, 0x8B, 0x28, 0x76, 0x30, 0x76, 0x34, 0x72, 0x34, 0x5F,
    0x32, 0x5C, 0x32, 0x52, 0x41, 0x45, 0x41, 0x39, 0x3E, 0x37, 0x3B, 0x37, 0x3E, 0x3A, 0x3E, 
    0x41, 0x3D, 0x42, 0x36, 0x42, 0x33, 0x3F, 0x2A, 0x46, 0x1E, 0x4C, 0x12, 0x55, 0x12, 0x54, 
    0x1E, 0x4B, 0x1A, 0x4A, 0x17, 0x47, 0x1A, 0x49, 0x1E, 0x4A, 0x21, 0x48, 0xFF, 0x01, 0x32, 
    0x3D, 0x34, 0x36, 0x3C, 0x37, 0x3D, 0x3A, 0x3D, 0x41, 0x36, 0x41, 0x32, 0x3D, 0xFF, 0x01, 
    0x33, 0x5C, 0x33, 0x52, 0x42, 0x45, 0x42, 0x39, 0x7D, 0x39, 0x7D, 0x5E, 0x34, 0x5E, 0x33, 
    0x5A, 0xFF, 0x01, 0x3C, 0x0B, 0x6F, 0x0B, 0x6F, 0x20, 0x3C, 0x20, 0x3C, 0x0B, 0xFF, 0x01, 
    0x60, 0x0E, 0x6B, 0x0E, 0x6B, 0x1C, 0x60, 0x1C, 0x60, 0x0E, 0xFE, 0x03, 0x3E, 0x1F, 0xFF, 
    0x01, 0x62, 0x0F, 0x69, 0x0F, 0x69, 0x1B, 0x62, 0x1B, 0x62, 0x0F, 0xFE, 0x02, 0x63, 0x1A,
    0xFF, 0x01, 0x2F, 0x39, 0x32, 0x39, 0x32, 0x3B, 0x2F, 0x3F, 0x2F, 0x39, 0xFF, 0x01, 0x29, 
    0x8B, 0x29, 0x77, 0x30, 0x77, 0x35, 0x72, 0x35, 0x69, 0x39, 0x6B, 0x41, 0x6B, 0x41, 0x6D, 
    0x45, 0x72, 0x49, 0x72, 0x49, 0x74, 0x43, 0x7D, 0x3B, 0x80, 0x3B, 0x8B, 0x29, 0x8B, 0xFF, 
    0x01, 0x35, 0x5F, 0x35, 0x64, 0x3A, 0x61, 0x35, 0x5F, 0xFF, 0x01, 0x39, 0x62, 0x35, 0x64, 
    0x35, 0x5F, 0x4A, 0x5F, 0x40, 0x69, 0x3F, 0x69, 0x41, 0x67, 0x3C, 0x62, 0x39, 0x62, 0xFF, 
    0x01, 0x4E, 0x5F, 0x55, 0x5F, 0x55, 0x64, 0x51, 0x6C, 0x4E, 0x70, 0x49, 0x71, 0x46, 0x71, 
    0x43, 0x6D, 0x43, 0x6A, 0x4E, 0x5F, 0xFF, 0x01, 0x44, 0x6A, 0x44, 0x6D, 0x46, 0x70, 0x48, 
    0x70, 0x4C, 0x6F, 0x4D, 0x6C, 0x49, 0x69, 0x44, 0x6A, 0xFF, 0x01, 0x36, 0x68, 0x3E, 0x6A,
    0x40, 0x67, 0x3C, 0x63, 0x39, 0x63, 0x36, 0x65, 0x36, 0x68, 0xFF, 0x01, 0x7E, 0x0B, 0x89, 
    0x16, 0x89, 0x5E, 0xFE, 0x01, 0x22, 0x0B, 0xFE, 0x01, 0x3B, 0x0B, 0xFE, 0x01, 0x61, 0x0F, 
    0xFE, 0x01, 0x6A, 0x1B, 0xFE, 0x01, 0x70, 0x0F, 0xFE, 0x01, 0x7E, 0x5E, 0xFE, 0x01, 0x4B, 
    0x60, 0xFE, 0x01, 0x2E, 0x39, 0xFF, 0xFF

class AmigaVectParser {
    constructor(bytes, elem) {
        this.palette = ["#FFFFFF", "#000000", "#7777CC", "#BBBBBB"];
        this.offset = [0,0];
        this.prevOffset = [0,0];
        this.curColor = 0;
        this.isDrawing = false;
        this.buffer = bytes || [0xff, 0xff];
        this.done = false;

        this.two = new Two({ width: 640, height: 400 }).appendTo(elem);

    doCmd(cmd_pair) {
        if (cmd_pair[0] === 0xff) {
            this.isDrawing = false;
            if (cmd_pair[1] === 0xff) {
                // cmd_done
                this.done = true;
            } else {
                // cmd_colorSet
                this.curColor = cmd_pair[1];
        } else if (cmd_pair[0] === 0xfe) {
            // cmd_floodFill
            this.isDrawing = false;
            this.pointer += 2; //TODO FLOOD FILL
        if (!this.isDrawing) {
            // first coordinate in a poly-line
            this.prevOffset[0] = cmd_pair[0];
            this.prevOffset[1] = cmd_pair[1];
            this.isDrawing = true;
        } else {
            // continuing the poly-line
            this.offset[0] = cmd_pair[0];
            this.offset[1] = cmd_pair[1];

            let line = this.two.makeLine(
                this.prevOffset[0] * 2,
                this.prevOffset[1] * 2, // doubling up X/Y to make it easier to see at 640x400
                this.offset[0] * 2,
                this.offset[1] * 2

            line.stroke = this.palette[this.curColor];
            line.linewidth = 1;

            this.prevOffset[0] = this.offset[0];
            this.prevOffset[1] = this.offset[1];

    draw() {
        let cmd = [0, 0];
        let pointer = 0;        
        this.done = false;

        while (!this.done) {
            cmd[0] = this.buffer[pointer++];
            cmd[1] = this.buffer[pointer++];

renderer = new AmigaVectParser(floppy, document.getElementById("draw-shapes"));