* Draw a logo using a LOGO / TURTLE type language with commands encoded into a bitfield

 * the three characters + space are all encoded into a single 32-bit value as a bitfield

 * the commands are embedded as 3-bit, commands move and draw in four directions + bottom left diagonal

 * there is also one command which move right and assign a color

 * it is used to skip to next char by using background color.

 *

 * The trick is to start from somewhere which has the maximum efficiency in term of number of commands (or type of commands)

 * so here i start from somewhere which only require the 'move right but don't draw' instruction to draw 

 * the whole text, there is still some commands left to do more stuff if required

 *

 * 8 possible commands in total can be encoded that way and 11 commands can be fetched for every 32-bit values

 *

 * This one is tinier than the first one by using a single instruction for direction change, drawing and skip command

 * it also add state change command to allow line length to be changed

 *

 * This one also widen the lines to draw 'widened' lines through a second loop

 * each commands now also change the direction in which to widen the line

 * it does not draw perfect blocks due to being unaware of the drawing direction, this is why it has centering issue or as well (can be fixed easily)

 * this actually give some stylization instead of blockiness it still remain small :)

 *

 * This code can be converted to assembly language for a very efficient way codesize wise to draw a text / logo

 * in assembly the function table is turned into some code next to a label which assign registers (could also be swapping)

 * and then jump again to draw code, the initial jump (fetch instruction & call) could be done as 2/3 instructions (logic OP, direct short jump)

 */

​

let lineLength = 64

let defaultBrightness = 255

​

// a series of commands as 32-bit values to draw whatever

let stack = [

  3877473931

]

​

let index = 0

​

let s = 1

​

let dummyf = () => { return { x: 0, y: 0 } }

// the jump table where each entry would basically be a label + simple register allocation for x,y with ASM code for example

let f = null

​

function computeStartPosition() {

  // compute start drawing position given as a precomputed index (a single instruction on x86)

  let x = width / 2 - lineLength * 5 / 2 + lineLength

  let y = height / 2 + lineLength / 2

  // fix the pixels to the grid

  x = Math.floor(x)

  y = Math.floor(y)

​

  index = (x + y * width) * 4

  // 

}

​

function initializeJumpTable() {

  f = [

    () => { s = 0; return 1 }, // move right (positioned here to act as a don't draw but move right command)

    () => { s = width; return -1 }, // move left

    () => { s = -1 + width; return width }, // move down

    () => { s = -1 + width; return -width }, // move up

    () => { s = 1; return -1 + width }, // move in diagonal bottom left

    () => { lineLength += 32 }, // state change command which increase line length

    () => { lineLength -= 32 }, // state change command which decrease line length

    () => { s = width - 1; return 1 } // move right

  ] 

}

​

function setup() {

  createCanvas(512, 512);

  background(0);

  computeStartPosition()

  initializeJumpTable()

  drawOnce()

}

​

function drawOnce() {

  loadPixels()

  while (v = stack.pop()) {

    for (let l = 0; l < 11; l += 1) {

      let g = v & 7 // get the virtual 'instruction'

​

      let r = f[g]() // basically a jump table: jmp g

      // abuse saturation so that the first command is a 'draw with color 0' command

      let c = g << 8

      // draw segment based on the instructions result

      for (let i = 0; i < lineLength; i += 1) {

        for (let j = 0; j < 31; j += 1) {

          let index2 = index + j * s * 4

          pixels[index2 + 0] = c

          pixels[index2 + 1] = c

          pixels[index2 + 2] = c

        }

        index += r * 4

      }

      v >>= 3 // move to the next instruction

    }

  }

  updatePixels() 

}

​

function draw() {

​

}