ConsoleLog

const maxConsoleLength = 8;

var consoleBuffer, consoleLog;

var graphicsBuffer;

​

function setup() {

  var canvasSize = min(windowWidth, windowHeight);

  createCanvas(canvasSize, canvasSize);

  imageMode(CENTER);

  background(360);

​

  graphicsBuffer = createGraphics(1024, 1024);

  graphicsBuffer.colorMode(HSB, 360);

  consoleBuffer = createGraphics(1024, 1024);

  consoleBuffer.colorMode(HSB, 360);

  consoleLog = [];

  updateConsole("Console initiated.");

}

​

function draw() {

  resetMatrix();

  translate(width * 0.5, height * 0.5);

  background(360);

  graphicsBuffer.background(360, 5);

  graphicsBuffer.ellipse(random(graphicsBuffer.width), random(graphicsBuffer.height), graphicsBuffer.height * 0.25 * random() * random());

  if (random() < 0.001) {

    updateConsole("Random event at " + frameCount);

  }

  if (random() < 0.05) {

    updateConsole("This is frame " + frameCount + ".");

  }

  renderConsole();

  image(graphicsBuffer, 0, 0, width, height);

  image(consoleBuffer, 0, 0, width, height);

}

​

function updateConsole(consoleLine) {

  for (var i = 0; i < maxConsoleLength; i += 1) {

    consoleLog.unshift("");

  }

  consoleLog.push(consoleLine);

  consoleLog = consoleLog.slice(Math.max(consoleLog.length - maxConsoleLength, 1));

}

​

function renderConsole() {

  consoleBuffer.resetMatrix();

  consoleBuffer.clear();

  consoleBuffer.textSize(consoleBuffer.height * 0.025);

  consoleBuffer.textAlign(LEFT, BOTTOM);

  consoleBuffer.translate(consoleBuffer.width * 0.02, consoleBuffer.height * 0.98);

  for (var i = consoleLog.length - 1; i >= 0; i -= 1) {

    consoleBuffer.noStroke();

    consoleBuffer.fill(0, map(i, 0, maxConsoleLength, 0, 360));

    consoleBuffer.translate(0, -consoleBuffer.height * 0.025);

    consoleBuffer.text(consoleLog[i], 0, 0);

  }

}

​

function keyTyped() {

    updateConsole(key + " was pressed.");

}