Typing together

This sketch receives keyboard input. Each keypress is typed to the screen and sent to the other player, and you receive the other player's keys in a different colour.

////////////////////////////////////////////////////////////////////
// S&&O SS2020 // course: *From Space to Space*
////////////////////////////////////////////////////////////////////
// this sketch receives keyboard input.
// each keypress is typed to the screen and sent to the other player,
// and you receive the other player's keys in a different colour.
// code based on example by Joël Gähwiler
// https://github.com/256dpi/processing-mqtt
////////////////////////////////////////////////////////////////////

import mqtt.*;
MQTTClient client;

////////////////////////////////////////////////////////////////////
///////////////////// DECLARE GLOBAL VARIABLES /////////////////////
////////////////////////////////////////////////////////////////////

// !!! CHANGE p1 and p2 depending on which player you are !!! //
String mePlayer = "/typing-together/grey/p2";
String otherPlayer = "/typing-together/grey/p1";
////////////////////////////////////////////////////////////////////

PFont f;
String t;
int letterWidth = 15;
int letterHeight = 40;
int x = letterWidth;
int y = letterHeight;

////////////////////////////////////////////////////////////////////

void setup() {
  client = new MQTTClient(this);
  client.connect("mqtt://SpielObjekt:5p13l0j3ct@broker.shiftr.io", "processing");

  size(600, 600);
  background(100);  //set background colour

  //printArray(PFont.list());  //print out list of available fonts
  f = createFont("Courier", 24);
  textFont(f);
  textAlign(CENTER);
}

void clientConnected() {
  println("client connected");
  client.subscribe(otherPlayer);
}

////////////////////////////////////////////////////////////////////
// RECEIVE & TYPE //
////////////////////////////////////////////////////////////////////
void messageReceived(String topic, byte[] payload) {
  t = new String(payload);
  println("new message: " + topic + " - " + t);
  fill(200, 130, 130);  //the other player's text will be this colour
  text(t, x, y);  //draw key on screen
  x+=letterWidth;  //increment position
}

////////////////////////////////////////////////////////////////////
// SEND & TYPE //
////////////////////////////////////////////////////////////////////

void keyPressed() {
  client.publish(mePlayer, str(key));  //send key to other player
  fill(100, 150, 150);  //your text will be this colour
  text(key, x, y);  //draw key on screen
  x+=letterWidth;  //increment position
}

void draw() {
  if (x > width-letterWidth) {
    x=letterWidth;
    y+=letterHeight;
  }
  if (y> height-letterHeight) {
    y=letterHeight;
    saveFrame();  //save an image of the window into sketch folder
  }
}

////////////////////////////////////////////////////////////////////

void connectionLost() {
  println("connection lost");
}