tutorials on S Anand

Mapscii Rendering

Wed, 26 Nov 2025 00:00:00 +0530

I asked Claude Sonnet 4.5 on GitHub Copilot:

How does mapscii render vector tiles as text blocks on the terminal? What are the libraries it uses and how does it use them? Explain as a detailed tutorial with examples so that I can learn how to rasterize vector shapes on the terminal.

Below’s the explanation. What’s noteworthy to me is:

How it uses Braille characters to get 8 pixels per character cell (2x4 grid).
How it fills polygons using (a) triangulation and (b) getting all edge points using Bresenham’s algorithm, then (c) filling horizontal spans between edge pairs.

I’ll help you understand how mapscii renders vector tiles as text blocks on the terminal. Let me search through the repository to find the relevant code and understand the architecture. Now let me get more specific files to understand the rendering pipeline better:# How MapSCII Renders Vector Tiles as Text Blocks on the Terminal

MapSCII is a fascinating project that transforms geographic vector tiles into ASCII/Braille art on your terminal. Let me break down the complete rendering pipeline with detailed examples so you can learn how to rasterize vector shapes on the terminal.

Architecture Overview

The rendering pipeline consists of several key components:

TileSource - Fetches and manages vector tiles
Tile - Parses vector tile data (Protobuf format)
Renderer - Orchestrates the rendering process
Canvas - Provides drawing primitives (lines, polygons)
BrailleBuffer - Converts pixels to Braille/ASCII characters

Key Libraries Used

{
  "@mapbox/vector-tile": "^1.3.1", // Parse vector tile format
  "pbf": "^3.2.1", // Protobuf decoding
  "earcut": "^2.2.2", // Polygon triangulation
  "rbush": "^3.0.1", // 2D spatial indexing
  "bresenham": "0.0.4", // Line rasterization
  "simplify-js": "^1.2.4", // Polyline simplification
  "x256": "0.0.2" // Color conversion to xterm-256
}

Step-by-Step Tutorial

Step 1: Understanding Braille Characters for Pixels

Braille characters are perfect for terminal graphics because each character represents a 2×4 pixel grid:

// BrailleBuffer uses Unicode Braille patterns (U+2800 - U+28FF)
// Each Braille character has 8 dots in a 2×4 grid:
//
// ⠁ ⠂  (left column: 0x1, 0x2, 0x4, 0x40)
// ⠄ ⠈  (right column: 0x8, 0x10, 0x20, 0x80)
// ⠐ ⠠
// ⠈ ⡀

const brailleMap = [
  [0x1, 0x8],
  [0x2, 0x10],
  [0x4, 0x20],
  [0x40, 0x80],
];

Each Braille character gives you 8 pixels in just one terminal cell, effectively quadrupling your resolution!

Step 2: Creating a Braille Buffer

class BrailleBuffer {
  constructor(width, height) {
    // Map of which bits correspond to which dot positions
    this.brailleMap = [
      [0x1, 0x8],
      [0x2, 0x10],
      [0x4, 0x20],
      [0x40, 0x80],
    ];

    // Store pixel state, colors
    const size = (width * height) / 8; // Each cell stores 8 pixels
    this.pixelBuffer = Buffer.alloc(size);
    this.foregroundBuffer = Buffer.alloc(size);
    this.backgroundBuffer = Buffer.alloc(size);
  }

  // Set a single pixel at (x, y)
  setPixel(x, y, color) {
    if (x >= 0 && x < this.width && y >= 0 && y < this.height) {
      // Project x,y to buffer index
      const idx = (x >> 1) + (this.width >> 1) * (y >> 2);

      // Get the specific dot mask for this pixel
      const mask = this.brailleMap[y & 3][x & 1];

      // Set the bit
      this.pixelBuffer[idx] |= mask;
      this.foregroundBuffer[idx] = color;
    }
  }

  // Generate terminal output
  frame() {
    const output = [];
    let currentColor = null;

    for (let y = 0; y < this.height / 4; y++) {
      for (let x = 0; x < this.width / 2; x++) {
        const idx = (y * this.width) / 2 + x;

        // Add ANSI color codes when color changes
        const colorCode = this._termColor(
          this.foregroundBuffer[idx],
          this.backgroundBuffer[idx],
        );
        if (currentColor !== colorCode) {
          output.push(currentColor = colorCode);
        }

        // Convert pixel bits to Braille character
        const brailleChar = String.fromCharCode(0x2800 + this.pixelBuffer[idx]);
        output.push(brailleChar);
      }
      output.push("\n");
    }

    return output.join("");
  }

  _termColor(foreground, background) {
    if (foreground && background) {
      return `\x1B[38;5;${foreground};48;5;${background}m`;
    } else if (foreground) {
      return `\x1B[49;38;5;${foreground}m`;
    }
    return "\x1B[39;49m"; // Reset
  }
}

Step 3: Drawing Lines with Bresenham’s Algorithm

const bresenham = require("bresenham");

class Canvas {
  constructor(width, height) {
    this.buffer = new BrailleBuffer(width, height);
  }

  // Draw a line from point A to point B
  line(from, to, color, width = 1) {
    if (width === 1) {
      // Simple bresenham for single-pixel width
      bresenham(from.x, from.y, to.x, to.y, (x, y) => {
        this.buffer.setPixel(x, y, color);
      });
    } else {
      // Thick line using Bresenham with width
      this._thickLine(from.x, from.y, to.x, to.y, width, color);
    }
  }

  // Draw a polyline (e.g., roads, rivers)
  polyline(points, color, width = 1) {
    for (let i = 1; i < points.length; i++) {
      this.line(points[i - 1], points[i], color, width);
    }
  }
}

Step 4: Drawing Filled Polygons with Earcut

For filled areas (buildings, water bodies), MapSCII uses polygon triangulation:

const earcut = require("earcut");

class Canvas {
  polygon(rings, color) {
    // Convert rings to flat array of vertices
    const vertices = [];
    const holes = [];

    for (const ring of rings) {
      if (vertices.length) {
        holes.push(vertices.length / 2); // Mark hole start
      }
      for (const point of ring) {
        vertices.push(point.x);
        vertices.push(point.y);
      }
    }

    // Triangulate the polygon
    const triangles = earcut(vertices, holes);

    // Draw each triangle
    for (let i = 0; i < triangles.length; i += 3) {
      const pa = [vertices[triangles[i] * 2], vertices[triangles[i] * 2 + 1]];
      const pb = [
        vertices[triangles[i + 1] * 2],
        vertices[triangles[i + 1] * 2 + 1],
      ];
      const pc = [
        vertices[triangles[i + 2] * 2],
        vertices[triangles[i + 2] * 2 + 1],
      ];

      this._filledTriangle(pa, pb, pc, color);
    }
  }

  _filledTriangle(pointA, pointB, pointC, color) {
    // Get edges using Bresenham
    const a = bresenham(pointB[0], pointB[1], pointC[0], pointC[1]);
    const b = bresenham(pointA[0], pointA[1], pointC[0], pointC[1]);
    const c = bresenham(pointA[0], pointA[1], pointB[0], pointB[1]);

    // Combine and sort all edge points by Y, then X
    const points = a
      .concat(b)
      .concat(c)
      .filter((p) => p.y >= 0 && p.y < this.height)
      .sort((a, b) => (a.y === b.y ? a.x - b.x : a.y - b.y));

    // Fill horizontal spans between edge pairs
    for (let i = 0; i < points.length - 1; i++) {
      const point = points[i];
      const next = points[i + 1];

      if (point.y === next.y) {
        // Draw horizontal line
        for (let x = point.x; x <= next.x; x++) {
          this.buffer.setPixel(x, point.y, color);
        }
      } else {
        this.buffer.setPixel(point.x, point.y, color);
      }
    }
  }
}

Step 5: Processing Vector Tiles

const VectorTile = require("@mapbox/vector-tile").VectorTile;
const Protobuf = require("pbf");
const RBush = require("rbush");
const zlib = require("zlib");

class Tile {
  async load(buffer) {
    // Decompress if gzipped
    if (this._isGzipped(buffer)) {
      buffer = await new Promise((resolve, reject) => {
        zlib.gunzip(buffer, (err, data) => {
          err ? reject(err) : resolve(data);
        });
      });
    }

    // Parse Protobuf
    this.tile = new VectorTile(new Protobuf(buffer));

    // Process each layer
    const layers = {};
    for (const name in this.tile.layers) {
      const layer = this.tile.layers[name];
      const nodes = [];

      for (let i = 0; i < layer.length; i++) {
        const feature = layer.feature(i);
        const geometries = feature.loadGeometry();

        // Get style for this feature
        const style = this.styler.getStyleFor(name, feature);
        if (!style) continue;

        // Convert geometries to nodes with boundaries
        for (const points of geometries) {
          nodes.push(
            this._addBoundaries({
              layer: name,
              style,
              points,
              color: this._getColor(style),
            }),
          );
        }
      }

      // Create spatial index for efficient querying
      const tree = new RBush(18);
      tree.load(nodes);

      layers[name] = {
        extent: layer.extent,
        tree,
      };
    }

    return layers;
  }
}

Step 6: The Complete Rendering Pipeline

class Renderer {
  async draw(center, zoom) {
    this.canvas.clear();

    // 1. Calculate visible tiles
    const tiles = this._visibleTiles(center, zoom);

    // 2.  Fetch all tiles in parallel
    await Promise.all(
      tiles.map(async (tile) => {
        tile.data = await this.tileSource.getTile(
          tile.xyz.z,
          tile.xyz.x,
          tile.xyz.y,
        );

        // 3. Query spatial index for visible features
        const scale = tile.data.layers[layerId].extent / tileSize;
        tile.layers[layerId].features = tile.data.layers[layerId].tree.search({
          minX: -tile.position.x * scale,
          minY: -tile.position.y * scale,
          maxX: (this.width - tile.position.x) * scale,
          maxY: (this.height - tile.position.y) * scale,
        });
      }),
    );

    // 4. Draw features in correct order (background to foreground)
    const drawOrder = ["water", "landuse", "building", "road", "poi_label"];
    for (const layerId of drawOrder) {
      for (const tile of tiles) {
        for (const feature of tile.layers[layerId].features) {
          this._drawFeature(tile, feature, scale);
        }
      }
    }

    // 5. Generate terminal output
    return this.canvas.frame();
  }

  _drawFeature(tile, feature, scale) {
    // Transform coordinates from tile space to screen space
    const points = feature.points.map((p) => ({
      x: Math.floor(tile.position.x + p.x / scale),
      y: Math.floor(tile.position.y + p.y / scale),
    }));

    // Draw based on geometry type
    switch (feature.style.type) {
      case "line":
        this.canvas.polyline(
          points,
          feature.color,
          feature.style.paint["line-width"],
        );
        break;
      case "fill":
        this.canvas.polygon([points], feature.color);
        break;
      case "symbol":
        this.canvas.text(
          feature.label,
          points[0].x,
          points[0].y,
          feature.color,
        );
        break;
    }
  }
}

Step 7: Coordinate Transformations

const utils = {
  // Convert lat/lon to tile coordinates at zoom level
  ll2tile(lon, lat, zoom) {
    const n = Math.pow(2, zoom);
    return {
      x: ((lon + 180) / 360) * n,
      y: ((1
        - Math.log(
            Math.tan((lat * Math.PI) / 180)
              + 1 / Math.cos((lat * Math.PI) / 180),
          ) / Math.PI) / 2) * n,
    };
  },

  // Convert tile coordinates back to lat/lon
  tile2ll(x, y, zoom) {
    const n = Math.pow(2, zoom);
    return {
      lon: (x / n) * 360 - 180,
      lat: (Math.atan(Math.sinh(Math.PI * (1 - (2 * y) / n))) * 180) / Math.PI,
    };
  },

  // Get tile size in pixels at fractional zoom
  tilesizeAtZoom(zoom) {
    return Math.pow(2, zoom - Math.floor(zoom)) * 256;
  },
};

Complete Example: Drawing a Simple Map

const Canvas = require("./Canvas");
const x256 = require("x256");

// Create a 160x64 pixel canvas (80x16 terminal cells in Braille mode)
const canvas = new Canvas(160, 64);

// Define some colors (xterm-256 color codes)
const BLUE = x256([0, 0, 255]);
const GREEN = x256([0, 200, 0]);
const GRAY = x256([128, 128, 128]);

// Draw a river (polyline)
const riverPoints = [
  { x: 20, y: 50 },
  { x: 40, y: 45 },
  { x: 60, y: 40 },
  { x: 80, y: 35 },
  { x: 100, y: 30 },
];
canvas.polyline(riverPoints, BLUE, 3);

// Draw a building (polygon)
const buildingRing = [
  { x: 70, y: 20 },
  { x: 90, y: 20 },
  { x: 90, y: 40 },
  { x: 70, y: 40 },
];
canvas.polygon([buildingRing], GRAY);

// Draw a road (polyline)
const roadPoints = [
  { x: 0, y: 25 },
  { x: 160, y: 25 },
];
canvas.polyline(roadPoints, GRAY, 2);

// Draw a label
canvas.text("Town Hall", 80, 30, GRAY);

// Output to terminal
process.stdout.write(canvas.frame());

Performance Optimizations

MapSCII uses several clever optimizations:

RBush Spatial Index: Only processes features visible in the viewport
Polyline Simplification: Uses simplify-js to reduce point counts
Tile Padding: Renders slightly beyond viewport to avoid edge artifacts
Draw Order Optimization: Different layer orders for different zoom levels
Color Caching: Avoids repeated color conversions

Key Takeaways

To rasterize vector shapes on the terminal:

Use Braille characters for 4x resolution boost (2×4 pixels per cell)
Implement a pixel buffer that maps coordinates to Braille dot positions
Use Bresenham’s algorithm for line rasterization
Use Earcut for polygon triangulation and scanline filling
Leverage xterm-256 colors with ANSI escape codes
Transform coordinates from geographic space to screen space
Use spatial indexing (RBush) for efficient viewport queries

The complete rendering pipeline is: Vector Tiles → Parse Protobuf → Query Spatial Index → Transform Coordinates → Rasterize to Pixels → Convert to Braille → Output ANSI Codes

You can explore more implementation details in the rastapasta/mapscii repository.

Wed, 23 Jun 2021 14:14:05 +0000

The #HarryPotter Screen Time video featured a bar chart race made in PowerPoint. Many of you asked how I made it.

Here’s a step-by-step tutorial. https://youtu.be/E1SeoUV8awI

(BTW, there are just 9 people on LinkedIn who match “bar chart race” and #powerpoint. This is for you, friends!)

Gramener converted this feature into a product, SlideSense.ai. But more on that later 🙂

The original video is at https://www.linkedin.com/feed/update/urn%3Ali%3Aactivity%3A6801138072068214784/

Programming Minecraft with Websockets

Wed, 20 Jan 2021 03:40:09 +0000

Minecraft lets you connect to a websocket server when you’re in a game. The server can receive and send any commands. This lets you build a bot that you can … (well, I don’t know what it can do, let’s explore.)

Minecraft has commands you can type on a chat window. For example, type / to start a command and type setblock ~1 ~0 ~0 grass changes the block 1 north of you into grass. (~ means relative to you. Coordinates are specified as X, Y and Z.)

Note: These instructions were tested on Minecraft Bedrock 1.16. I haven’t tested them on the Java Edition.

Connect to Minecraft

You can send any command to Minecraft from a websocket server. Let’s use JavaScript for this.

First, run npm install ws uuid. (We need ws for websockets and uuid to generate unique IDs.)

Then create this mineserver1.js:

const WebSocket = require("ws");
const uuid = require("uuid"); // For later use

// Create a new websocket server on port 3000
console.log("Ready. On MineCraft chat, type /connect localhost:3000");
const wss = new WebSocket.Server({ port: 3000 });

// On Minecraft, when you type "/connect localhost:3000" it creates a connection
wss.on("connection", socket => {
  console.log("Connected");
});

On Minecraft > Settings > General > Profile, turn off the “Require Encrypted Websockets” setting.

Run node mineserver1.js. Then type /connect localhost:3000 in a Minecraft chat window. You’ll see 2 things:

MineCraft says “Connection established to server: ws://localhost:3000”
Node prints “Connected”

Now, our program is connected to Minecraft, and can send/receive messages.

Notes:

The Python equivalent is in mineserver1.py. Run python mineserver1.py.
If you get an Uncaught Error: Cannot find module 'ws', make sure you ran npm install ws uuid.
If you get an “Encrypted Session Required” error, make sure you turned off the “Require Encrypted Websockets” setting mentioned above.
To disconnect, run /connect off

Now let’s listen to the players’ chat.

A connected websocket server can send a “subscribe” message to Minecraft saying it wants to “listen” to specific actions. For example, you can subscribe to “PlayerMessage”. Whenever a player sents a chat message, Minecraft will notify the websocket client.

Here’s how to do that. Add this code in the wss.on('connection', socket => { ... }) function.

// Tell Minecraft to send all chat messages. Required once after Minecraft starts
socket.send(JSON.stringify({
  "header": {
    "version": 1, // We're using the version 1 message protocol
    "requestId": uuid.v4(), // A unique ID for the request
    "messageType": "commandRequest", // This is a request ...
    "messagePurpose": "subscribe", // ... to subscribe to ...
  },
  "body": {
    "eventName": "PlayerMessage", // ... all player messages.
  },
}));

Now, every time a player types something in the chat window, the socket will receive it. Add this code below the above code:

// When MineCraft sends a message (e.g. on player chat), print it.
socket.on("message", packet => {
  const msg = JSON.parse(packet);
  console.log(msg);
});

This code parses all the messages it receives and prints them.

This code in is mineserver2.js. Run node mineserver2.js. Then type /connect localhost:3000 in a Minecraft chat window. Then type a message (e.g. “alpha”) in the chat window. You’ll see a message like this in the console.

{
  header: {
    messagePurpose: 'event',        // This is an event
    requestId: '00000000-0000-0000-0000-000000000000',
    version: 1                      // using version 1 message protocol
  },
  body: {
    eventName: 'PlayerMessage',
    measurements: null,
    properties: {
      AccountType: 1,
      ActiveSessionID: 'e0afde71-9a15-401b-ba38-82c64a94048d',
      AppSessionID: 'b2f5dddc-2a2d-4ec1-bf7b-578038967f9a',
      Biome: 1,                     // Plains Biome. https://minecraft.gamepedia.com/Biome
      Build: '1.16.201',            // That's my build
      BuildNum: '5131175',
      BuildPlat: 7,
      Cheevos: false,
      ClientId: 'fcaa9859-0921-348e-bc7c-1c91b72ccec1',
      CurrentNumDevices: 1,
      DeviceSessionId: 'b2f5dddc-2a2d-4ec1-bf7b-578038967f9a',
      Difficulty: 'NORMAL',         // I'm playing on normal difficulty
      Dim: 0,
      GlobalMultiplayerCorrelationId: '91967b8c-01c6-4708-8a31-f111ddaa8174',
      Message: 'alpha',             // This is the message I typed
      MessageType: 'chat',          // It's of type chat
      Mode: 1,
      NetworkType: 0,
      Plat: 'Win 10.0.19041.1',
      PlayerGameMode: 1,            // Creative. https://minecraft.gamepedia.com/Commands/gamemode
      Sender: 'Anand',              // That's me.
      Seq: 497,
      WorldFeature: 0,
      WorldSessionId: '8c9b4d3b-7118-4324-ba32-c357c709d682',
      editionType: 'win10',
      isTrial: 0,
      locale: 'en_IN',
      vrMode: false
    }
  }
}

Notes:

The Python equivalent is in mineserver2.py. Run python mineserver2.py.
The official Minecraft docs say that the MCWSS protocol is outdated. But it seems to work.
The full list of things we can subscribe to is undocumented, but @jocopa3 has reverse-engineered a list of messages we can subscribe to, and they’re somewhat meaningful.
This Go package has code that explores the protocol further.
This chat has more details. There’s also an outdated list of JSON messages from @jocopa3.
Here’s a sample program that places a block in Minecraft

Build structures using chat

Let’s create a pyramid of size 10 around us when we type pyramid 10 in the chat window.

The first step is to check if the player sent a chat message like pyramid 10 (or another number). Add this code below the above code:

// When MineCraft sends a message (e.g. on player chat), act on it.
socket.on("message", packet => {
  const msg = JSON.parse(packet);
  // If this is a chat window
  if (msg.body.eventName === "PlayerMessage") {
    // ... and it's like "pyramid 10" (or some number), draw a pyramid
    const match = msg.body.properties.Message.match(/^pyramid (\d+)/i);
    if (match) {
      draw_pyramid(+match[1]);
    }
  }
});

If the user types “pyramid 3” on the chat window, draw_pyramid(3) is called.

In draw_pyramid(), let’s send commands to build a pyramid. To send a command, we need to create a JSON with the command (e.g. setblock ~1 ~0 ~0 grass). Add this code below the above code:

function send(cmd) {
  const msg = {
    "header": {
      "version": 1,
      "requestId": uuid.v4(), // Send unique ID each time
      "messagePurpose": "commandRequest",
      "messageType": "commandRequest",
    },
    "body": {
      "version": 1, // TODO: Needed?
      "commandLine": cmd, // Define the command
      "origin": {
        "type": "player", // Message comes from player
      },
    },
  };
  socket.send(JSON.stringify(msg)); // Send the JSON string
}

Let’s write draw_pyramid() to create a pyramid using glowstone by adding this code below the above code:

// Draw a pyramid of size "size" around the player.
function draw_pyramid(size) {
  // y is the height of the pyramid. Start with y=0, and keep building up
  for (let y = 0; y < size + 1; y++) {
    // At the specified y, place blocks in a rectangle of size "side"
    let side = size - y;
    for (let x = -side; x < side + 1; x++) {
      send(`setblock ~${x} ~${y} ~${-side} glowstone`);
      send(`setblock ~${x} ~${y} ~${+side} glowstone`);
      send(`setblock ~${-side} ~${y} ~${x} glowstone`);
      send(`setblock ~${+side} ~${y} ~${x} glowstone`);
    }
  }
}

This code in is mineserver3.js.

Run node mineserver3.js.
Then type /connect localhost:3000 in a Minecraft chat window.
Then type pyramid 3 in the chat window.
You’ll be surrounded by a glowstone pyramid.

Notes:

The Python equivalent is in mineserver3.py. Run python mineserver3.py.
The “requestId” needs to be a UUID – at least for block commands. I tried unique “requestId” values like 1, 2, 3 etc. That didn’t work.

Understand Minecraft’s responses

For every command you send, Minecraft sends a response. It’s “header” looks like this:

{
  "header": {
    "version": 1,
    "messagePurpose": "commandResponse",                  // Response to your command
    "requestId": "97dee9a3-a716-4caa-aef9-ddbd642f2650"   // ... and your requestId
  }
}

If the command is successful, the response has body.statusCode == 0. For example:

{
  "body": {
    "statusCode": 0,                  // No error
    "statusMessage": "Block placed",  // It placed the block you wanted
    "position": { "x": 0, "y": 64, "z": 0 }   // ... at this location
  },
}

If the command failed, the response has a negative body.statusCode. For example:

{
  "body": {
    "statusCode": -2147352576,        // This is an error
    "statusMessage": "The block couldn't be placed"
  },
}

To print these, add this to socket.on('message', ...):

// If we get a command response, print it
if (msg.header.messagePurpose == "commandResponse") {
  console.log(msg);
}

This code in is mineserver4.js.

Run node mineserver4.js.
Then type /connect localhost:3000 in a Minecraft chat window.
Then type pyramid 3 in the chat window.
You’ll be surrounded by a glowstone pyramid, and the console will show every command response.

Notes on common error messages:

The block couldn't be placed (-2147352576): The same block was already at that location.
Syntax error: Unexpected "xxx": at "~0 ~9 ~-1 >>xxx<<" (-2147483648): You gave wrong arguments to the command.
Too many commands have been requested, wait for one to be done (-2147418109): Minecraft only allows 100 commands can be executed without waiting for their response.
More error messages here.

Wait for commands to be done

Typing “pyramid 3” works just fine. But try “pyramid 5” and your pyramid is incomplete.

That’s because Minecraft only allows up to 100 messages in its queue. On the 101st message, you get a Too many commands have been requested, wait for one to be done error.

{
  "header": {
    "version": 1,
    "messagePurpose": "error",
    "requestId": "a5051664-e9f4-4f9f-96b8-a56b5783117b"
  },
  "body": {
    "statusCode": -2147418109,
    "statusMessage": "Too many commands have been requested, wait for one to be done"
  }
}

So let’s modify send() to add to a queue and send in batches. We’ll create two queues:

const sendQueue = []; // Queue of commands to be sent
const awaitedQueue = {}; // Queue of responses awaited from Minecraft

In wss.on('connection', ...), when Minecraft completes a command, we’ll remove it from the awaitedQueue. If the command has an error, we’ll report it.

// If we get a command response
if (msg.header.messagePurpose == "commandResponse") {
  // ... and it's for an awaited command
  if (msg.header.requestId in awaitedQueue) {
    // Print errors 5(if any)
    if (msg.body.statusCode < 0) {
      console.log(
        awaitedQueue[msg.header.requestId].body.commandLine,
        msg.body.statusMessage,
      );
    }
    // ... and delete it from the awaited queue
    delete awaitedQueue[msg.header.requestId];
  }
}
// Now, we've cleared all completed commands from the awaitedQueue.

Once we’ve processed Minecraft’s response, we’ll send pending messages from sendQueue, upto 100 and add them to the awaitedQueue.

// We can send new commands from the sendQueue -- up to a maximum of 100.
let count = Math.min(100 - Object.keys(awaitedQueue).length, sendQueue.length);
for (let i = 0; i < count; i++) {
  // Each time, send the first command in sendQueue, and add it to the awaitedQueue
  let command = sendQueue.shift();
  socket.send(JSON.stringify(command));
  awaitedQueue[command.header.requestId] = command;
}
// Now we've sent as many commands as we can. Wait till the next PlayerMessage/commandResponse

Finally, in function send(), instead of socket.send(JSON.stringify(msg)), we use sendQueue.push(msg) to add the message to the queue.

This code in is mineserver5.js.

Run node mineserver5.js.
Then type /connect localhost:3000 in a Minecraft chat window.
Then type pyramid 6 in the chat window.
You’ll be surrounded by a large glowstone pyramid.
The console will print messages like setblock ~0 ~6 ~0 glowstone The block couldn't be placed because we’re trying to place duplicate blocks.

Comments

Rodland 8 Mar 2021 12:45 am:Thanks for a great tutorial.However when I try to implement the chat listener (server2.js) i get an JSON error from MineCraft (in node.js console):“kryptert økt kreves” = “Needs secure connection”
Ready. On MineCraft chat, type /connect localhost:3000 Connected { body: { statusCode: -2147418107, statusMessage: ‘Kryptert økt kreves’ }, header: { messagePurpose: ’error’, requestId: ‘3522bb53-5256-4030-b827-4b411ae72a6c’, version: 1 } }
S Anand 8 Mar 2021 4:07 pm: Under Settings > General > Profile, please turn off the “Require Encrypted Websockets” setting. I’ve added this to the tutorial. Thanks for flagging this!
S Anand 2 Jan 2022 9:48 am: That’s right. Looks like you resolved it and changed localhost to minecraft-server.warpedwartwars.repl.co 👍
WarpedWartWars 21 Jun 2022 6:48 am: Got it working on localhost, using the Python mineserver3.py, but the message protocol seems to have changed, to this: {‘body’: {‘message’: ‘pyramid 32’, ‘receiver’: ‘’, ‘sender’: ‘WarpedWartWars’, ’type’: ‘chat’}, ‘header’: {’eventName’: ‘PlayerMessage’, ‘messagePurpose’: ’event’, ‘version’: 16842752}}
WarpedWartWars 15 Dec 2021 8:27 am: I tried this, as it seemed to be the best guide I could find. I made a Replit Repl: https://replit.com/@WarpedWartWars/minecraft-server?v=1 and I ran it, then tried “/connect localhost:3000” in Minecraft Bedrock 1.18.2, and I got “Could not connect to server: ws://localhost:3000”. I imagine I have to change “localhost” to something else.
someGuy 23 Feb 2022 8:11 am: This will be deleted in couple of days but some of the reasons people are getting issues connecting is because of UWP loopback restrictions source: https://stackoverflow.com/questions/34589522/cant-see-localhost-from-uwp-app to resolve this problem for windows: https://docs.microsoft.com/en-us/minecraft/creator/documents/scriptdevelopertools. run this in system administrator command prompt: CheckNetIsolation.exe LoopbackExempt -a -p=S-1-15-2-1958404141-86561845-1752920682-3514627264-368642714-62675701-733520436

Photoshop comic effect

Mon, 18 Apr 2005 12:00:00 +0000

Adobe Photoshop comic art effect.

Pen-spinning

Tue, 14 May 2002 12:00:00 +0000

The art of pen-spinning. A site dedicated to teaching you about twirling pens on your fingers.

Learning Flash

Fri, 29 Mar 2002 12:00:00 +0000

I’m learning Flash.

Tutorial find

Sat, 09 Dec 2000 12:00:00 +0000

Find tutorials with tutorialfind.

How Stuff Works

Tue, 18 Jul 2000 12:00:00 +0000

HowStuffWorks and Learn2 are great places to learn something new on the Net. I learnt how to tie a necktie at Learn2.

tutorials on S Anand

Mapscii Rendering

Architecture Overview

Key Libraries Used

Step-by-Step Tutorial

Step 1: Understanding Braille Characters for Pixels

Step 2: Creating a Braille Buffer

Step 3: Drawing Lines with Bresenham’s Algorithm

Step 4: Drawing Filled Polygons with Earcut

Step 5: Processing Vector Tiles

Step 6: The Complete Rendering Pipeline

Step 7: Coordinate Transformations

Complete Example: Drawing a Simple Map

Performance Optimizations

Key Takeaways

Programming Minecraft with Websockets

Connect to Minecraft

Subscribe to chat messages

Build structures using chat

Understand Minecraft’s responses

Wait for commands to be done

Comments

Rodland 8 Mar 2021 12:45 am:Thanks for a great tutorial.However when I try to implement the chat listener (server2.js) i get an JSON error from MineCraft (in node.js console):“kryptert økt kreves” = “Needs secure connection”

Photoshop comic effect

Pen-spinning

Learning Flash

Tutorial find

How Stuff Works