NGT31

The NGT31 is a Parallax Propeller based VGA driver and graphics device, provided as an Arduino shield. It uses a serial connection to the host device for communication, up to 250,000 baud with current firmware.

This device provides many useful graphics functions, including accelerated sprite drawing, text, and even drawing lines in 3D.

Firmware: https://git.nuclaer-servers.com/Nuclaer/ngt_firmware/-/tree/master

Arduino Library: https://git.nuclaer-servers.com/Nuclaer/nmt_gfx/-/tree/master

Example Code

Here is the demo included in the NMT_GFX library (https://git.nuclaer-servers.com/Nuclaer/nmt_gfx/-/blob/master/Examples/NGT31/NGT31_demo/NGT31_demo.ino):

#include <NMT_GFX.h>

byte tree[] = { 1,8,0,0,
  0b01010100,0b00010101,
  0b01010101,0b01010101,
  0b01010101,0b01010101,
  0b01010101,0b01010101,
  0b10100011,0b00001010,
  0b10100000,0b00001010,
  0b10100000,0b00001010,
  0b10101000,0b00101010
};

unsigned short cat[] = { 0, 0,
  0xaaa,0x0000, 0xffff, 0xffff, 0xc000,
  0xaaa,0xaaa3, 0xf555, 0x5557, 0xf000,
  0xaaa,0xaaa3, 0xd555, 0x5555, 0xf000,
  0xaaa,0xaaa3, 0x5555, 0x5555, 0x7000,
  0xaaa,0xaaa3, 0x5555, 0x4155, 0x7000,
  0xaaa,0xaaa3, 0x5555, 0x3c55, 0x70f0,
  0xaaa,0x00a3, 0x5555, 0x3f15, 0x73f0,
  0xaaa,0x3c23, 0x5555, 0x3fc0, 0x0ff0,
  0xaaa,0x0f03, 0x5555, 0x3fff, 0xfff0,
  0xaaa,0x83c3, 0x5554, 0xffff, 0xfffc,
  0xaaa,0xa0f3, 0x5554, 0xfe3f, 0xfe3c,
  0xaaa,0xa803, 0x5554, 0xfc3f, 0xcc3c,
  0xaaa,0xaa83, 0x5554, 0xd7ff, 0xffd4,
  0xaaa,0xaaa3, 0xd554, 0xd73f, 0x3cd4,
  0xaaa,0xaaa3, 0xf555, 0x3f00, 0x00f0,
  0xaaa,0x0000, 0xffff, 0xcfff, 0xffc0,
  0xaaa,0x003f, 0x0000, 0x0000, 0x0000,
  0xaaa,0x003c, 0x03c0, 0x00f0, 0x3c00
};


NMT_GFX ngt;

void setup() {
  Serial.begin(115200);
  ngt.begin(11,10);
  ngt.print("Hello!\nThis is an arduino writing\non screen with a ");
  ngt.println(ngt.get_card_ver());

  delay(1200);

  ngt.println("Look, I can even do colors!");
  ngt.set_color(3);
  ngt.print("green ");
  ngt.set_color(2);
  ngt.print("red ");
  ngt.set_color(1);
  ngt.println("and white");
  ngt.println("(plus much more)");

  delay(1400);

  ngt.fill(2);
  ngt.println("Screen fills can be done very fast.");
  delay(1700);

  ngt.clear();
  ngt.println("I dont only do text though, so");
  ngt.println("let me load my graphics");

  // This line simply sets the size and center of the sprite.
  // It modifies the 'cat' byte data, so that when it is
  // uploaded, it will be the correct size, and centered.
  // We don't do this for the tree, as this data is specified directly
  // in the initialization of the 'tree' array.  Either way
  // of initializing it works perfectly fine.
  Sprite catSprite((byte*)cat, 33, 17, 16, 16);

  int treeHandle = ngt.uploadSprite(tree);
  int catHandle = ngt.uploadSprite((byte*)cat);

  delay(750);

  ngt.println("I can do lines and sprites efficiently too.");

  byte x_tiles=ngt.x_tiles();              // Get tiles for x and y
  byte y_tiles=ngt.y_tiles();
  ngt.block_color(64+63,0b001100);
  ngt.block_color(128+63,0b011000);        // define tree colors
  ngt.block_color(192+63,0b010001);
  for(byte i=0;i<50;i++){    // make all tiles use text coloring
    ngt.tile_color(i,0);
  }
  for(byte i=x_tiles-1;i<50;i+=x_tiles){   // Make bottom tiles use tree coloring
    ngt.tile_color(i,63);
  }
  ngt.sprite(4, 180, 0, treeHandle);
  ngt.sprite(13, 180, 0, treeHandle);
  ngt.sprite(48, 180, 2, treeHandle);
  ngt.sprite(68, 180, 0, catHandle);
  ngt.sprite(28, 180, 1, treeHandle);
  ngt.line(0, 150, 30, 130);
  ngt.fast(60, 150);
  ngt.fast(90, 130);
  ngt.fast(120, 150);
  ngt.fast(150, 130);

  delay(1000);

  ngt.println(' ');
  ngt.set_color(1);
  ngt.println("The trees are drawn as sprites: an image of one is stored and copied to the screen using only one command, instead of resending the entire tree over serial.");

  delay(6000);

  ngt.set_cursor_pos(10, 190);
  ngt.println("Now I'll show you a moving rainbow sprite.");

  delay(1750);

  ngt.clear();

  // This sets up the colors for each tile
  for(byte i=0;i<64;i++){
    ngt.block_color(128+i,i); // RAINBOW
    ngt.block_color(64+i,25); // PINK for Nyan Cat
    ngt.block_color(192+i,0b101010); // GREY for Nyan Cat
  }

  // We only need to call these once.  Instead of clearing the screen each frame,
  // we will erase the old sprite right before drawing a new one.  This allows faster
  // rendering, and frees us from the need to write a message over and over again.
  ngt.clear();
  ngt.set_color(3);
  ngt.println("Moving rainbow sprite!");
  ngt.set_color(0);

  // This tells the NGT31 to draw only when nothing is being displayed.
  // Doing this reduces visual artifacts and makes the video data look cleaner.
  // This only really affects moving objects and changing images: static
  // text is not affected.
  // 'B' stands for 'Blanking' - it only draws when no video data is being sent to the monitor.
  ngt.set_draw_mode('B');

  int lastX = 0;
  int lastY = 40;
  int vx = 1, vy = 1;

  while(true) {
    long ls = millis();

    int x = lastX + vx;
    int y = lastY + vy;
    ngt.moveSprite(lastX, lastY, x, y, 0, catHandle);

    lastX = x;
    lastY = y;
    if (x >= 300)
      vx = -1;
    else if (x <= 0)
      vx = 1;
    if (y >= 240)
      vy = -1;
    else if (y <= 30)
      vy = 1;

    while(ls + 16 > millis());
  }
}

void loop() {

}

3D Example and Explanation

Drawing 3D lines, as part of a very simple 3D videogame demonstration:

#include <NMT_GFX.h>
#include <PS2Keyboard.h>

NMT_GFX ngt;

PS2Keyboard keyboard;

uint16_t buffer[256];

void setup() {
  Serial.begin(115200);
  keyboard.begin(4, 2);
  ngt.begin(11,10);
  ngt.println("Loading world...");

  Object3D world(ngt, buffer);
  world.addLine(-1000,-100,-1000,1000,-100,-1000,2);        
  world.addLine(1000,-100,-1000,1000,100,-1000,2);               
  world.addLine(1000,100,-1000,1000,100,1000,2);                 
  world.addLine(1000,100,1000,-1000,100,1000,2);              
  world.addLine(-1000,100,1000,-1000,-100,1000,2);              
  world.addLine(-1000,-100,1000,-1000,-100,-1000,2);

  world.addLine(-1000,-100,1000,1000,-100,1000,2);            
  world.addLine(1000,-100,-1000,1000,-100,1000,2);

  world.addLine(-1000,-100,-1000,-1000,100,-1000,2);
  world.addLine(1000,-100,1000,1000,100,1000,2);

  world.addLine(-1000,100,-1000,1000,100,-1000,2);
  world.addLine(-1000,100,-1000,-1000,100,1000,2);

  world.addLine(10,10,10,30,10,10,3);        
  world.addLine(30,10,10,30,30,10,3);               
  world.addLine(30,30,10,30,30,30,3);                 
  world.addLine(30,30,30,10,30,30,3);              
  world.addLine(10,30,30,10,10,30,3);              
  world.addLine(10,10,30,10,10,10,3);

  world.addLine(10,10,30,30,10,30,3);            
  world.addLine(30,10,10,30,10,30,3);

  world.addLine(10,10,10,10,30,10,3);
  world.addLine(30,10,30,30,30,30,3);

  world.addLine(10,30,10,30,30,10,3);
  world.addLine(10,30,10,10,30,30,3);

  world.upload();

  ngt.println("Setting up colors...");
  for(byte i=0;i<64;i++) {
    ngt.block_color(128 + i, 0b001011);
    ngt.block_color(192 + i, 0b111111);
  }

  // Supported on newer firmware - reduces flicker
  ngt.set_draw_mode('B');

  ngt.println("Ready to play...");
  delay(500);
  double x=0,z=0;
  int rot=0;
  while(true) {
    int32_t time=millis();
    if (keyboard.available()) {

      // read the next key
      char c = keyboard.read();
      if (c == PS2_LEFTARROW) {
        rot+=3;
      } else if (c == PS2_RIGHTARROW) {
        rot-=3;
      } else if (c == PS2_UPARROW) {
        x-=cos(rot*PI/180);
        z+=sin(rot*PI/180);
      } else if (c == PS2_DOWNARROW) {
        x+=cos(rot*PI/180);
        z-=sin(rot*PI/180);
      }
      ngt.rotatef(-rot,0);
      ngt.translatef((int32_t)x,0,(int32_t)z);
    }

    //ngt.clear();
    long timer = millis();
    world.draw();
    //Serial.println(millis() - timer);

    delay(max(1,(16+time)-(int32_t)millis()));
  }
}

void loop() {
}

Here, an Object3D is used to construct a bytecode of the 3D world. This bytecode can be rendered significantly faster than if individual commands were issued for each line or shape in the world. Due to the speed limitations of the serial port, issuing this many commands per frame would cut the FPS to less than 25 - and that does not include draw time. By using Object3D::draw(), the serial communication overhead is limited to less than 0.5ms for each draw.

The same Object3D may also be drawn multiple times at different locations by calling draw() multiple times, and calling translatef() in-between to change the position each time. Multiple Object3Ds may be loaded as well, and drawn as needed. This way each object can be kept in VRAM, and quickly drawn each time it needs to be.