rendercord

InstaCord renderer module. Draws images or animations, then serves them to discord.

Installation

npm install rendercord

Usage

Include the script as middleware

.middleware(require('rendercord')())

It then exposes actions.render (see full example script below)

Rendercord does not magically bypass the preview upload limit of 10mb, so don't make movie-length animations with it. Please be aware that this is not built-in middleware, and you can't load it using discord.mw('rendercord')().

Example code, which draws a red square moving from the top left to the bottom right:

const Discord = require("instacord");
const discord = new Discord();

discord
  .login(require('./secret.js'))
  .prefix("-")
  // Require the renderer middleware
  .middleware(require('rendercord')())
  // Command usage: '-render'
  .on('render', (actions, substr, storage) => {
    actions.log("Render image!");
    // Don't forget to return the promise!
    return actions.render({
      fps:     30, // The output framerate
      frames: 125, // The total frame count to render
      width:  400, // The output dimensions
      height: 300,
      quality: 100, // the jpeg quality. Default 100, you should probably leave this alone.
      buffer: 4096, // the output buffer size. Default 4096, you should probably leave this alone.
      animated: true, // If you don't use this, it'll just be a jpeg!
      jpegStream: true // default: true. Using a jpegStream is *much* faster than a pngStream, but you get jpeg.
    }, (canvas, frame) => {
      canvas.clearRect(0, 0, 400, 300);
      canvas.fillStyle = 'red';
      canvas.fillRect(frame/120 * 400, frame/120 * 300, 20, 20);
    }).then(() => {
      // Done! The image was automatically uploaded to discord.
    })
  })

  // Example of saving and loading the canvas
  // We'll store the frame in the db
  .database('rendercord-example')
  .middleware(discord.mw('db.loadKey')('lastFrame'))
  .on(/rect|cube|square/, (actions, substr, storage) => {
    actions.log("Render cubes!");
    return actions.render({
      source: storage.lastFrame, // Load an image as the first frame. Default: null,
      fit: true, // Fits the source to the canvas size. Default: false,
      animated: false,
      width:  200,
      height: 150
    }, (canvas, frame) => {
      // You can also load an image this way. Second value is fit.
      canvas.load(storage.lastFrame, false);

      var colors = [ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo' ]
      canvas.fillStyle = colors[Math.floor(Math.random()*colors.length)];
      var dims = [
        Math.random()*200,
        Math.random()*150,
        Math.random()*10+5,
        Math.random()*10+5
      ];
      canvas.fillRect(...dims);

      // canvas.save() returns a buffer. Don't overuse this because it
      // always saves as a PNG, which is far slower than the default renderer.
      storage.lastFrame = canvas.save();

      // Let's highlight the most recent rectangle, *after* saving it!
      canvas.strokeStyle = 'white';
      canvas.lineWidth = 2;
      canvas.strokeRect(...dims);
    })
  })