Connected mouse

Aus hyperdramatik
Wechseln zu: Navigation, Suche

I experimented with how I can somehow "connect" the two players' mouses. Everytime I draw a line, there is also some drawing around the other persons mouse position dependant on my movement.

Connection test.png

/// using mqtt protokoll via shiftr.io
// https://docs.shiftr.io/manuals/processing/

import mqtt.*;
MQTTClient client;


/// Connection to other player 
String mePlayer = "/playing-together/red/p1/xy";
String otherPlayer = "/playing-together/red/p2/xy";

/// variables for position of others players mouse
int otherMouseX = 0;
int otherMouseY = 0;
int otherPreviousMouseX = 0;  //to keep track of last mouse position for drawing line
int otherPreviousMouseY = 0;

int xMovementMe = 0;
int yMovementMe = 0;
int xMovementOther = 0;
int yMovementOther = 0;

//set fix color for players
int p1color, p2color;

// time variables for mqtt
long timeStamp; 
int delayTime = 1000/35;

//int mouseClick = 1;

void setup() {
  client = new MQTTClient (this);
client.connect("mqtt://YOUR_SHIFTER_IO_Username:YOUR_SHIFTER_IO_Password@broker.shiftr.io", "YOUR_SHIFTER_IO_Username");
  size(600, 600);
  background(255);

  p1color = #AD2C2C;  // color for player 1
  p2color = #230E9D; // color for player 2
}

// RECEIVE messages of other player///

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

void messageReceived(String topic, byte [] payload) {
  // the incoming MQTT "message" is a String: "xValue,yValue"
  // to unpack it we use the "split" function:
  String incomingPayload = new String(payload);
  String [] xy = split(incomingPayload, ',');
  if (int(xy[0])== 0 && int(xy[1])== 0) {
    background(255);
  } else {
    println("new message: " + topic + " x: " + xy[0] + " y: " +xy[1]);
    otherMouseX = int(xy[0]);
    otherMouseY = int(xy[1]);
  }
}

//SEND my mouse x, y //


// DRAW 

void draw() {


  xMovementMe = mouseX-pmouseX;
  yMovementMe = mouseY-pmouseY;
  xMovementOther = otherMouseX-otherPreviousMouseX;
  yMovementOther = otherMouseY-otherPreviousMouseY;

  strokeWeight(5);  //line thickness

  if (otherMouseX != otherPreviousMouseX) {

    if (mePlayer == "/playing-together/red/p1/xy") {
      stroke(p1color);
    } else if (mePlayer == "/playing-together/red/p2/xy") {
      stroke(p2color);
    } 
    line (mouseX, mouseY, mouseX+xMovementOther, mouseY+yMovementOther);
  }
  // set right color for player //
  if (otherPlayer == "/playing-together/red/p1/xy") {
    stroke(p1color);
  } else if (otherPlayer == "/playing-together/red/p2/xy") {
    stroke(p2color);
  }  
  line(otherPreviousMouseX, otherPreviousMouseY, otherMouseX, otherMouseY);
  otherPreviousMouseX = otherMouseX;  //update previous to be current
  otherPreviousMouseY = otherMouseY;  //update previous to be current
}

void mouseDragged() {
  //the MQTT connection will close if you send more than 25 operations per second!
  //so we implement a delay to SEND my coordinates only every xxx milliseconds:
  if (millis() - timeStamp > delayTime) {
    timeStamp = millis();
    client.publish(mePlayer, mouseX + "," + mouseY);
  }

  strokeWeight(5); // set line thickness

  // set right color for player //
  if (mePlayer == "/playing-together/red/p1/xy") {
    stroke(p1color);
  } else if (mePlayer == "/playing-together/red/p2/xy") {
    stroke(p2color);
  } 
  line (pmouseX, pmouseY, mouseX, mouseY);

  //set right color for player //
  if (mePlayer == "/playing-together/red/p1/xy") {
    stroke(p2color);
  } else if (mePlayer == "/playing-together/red/p2/xy") {
    stroke(p1color);
  }
  line (otherMouseX, otherMouseY, otherPreviousMouseX+xMovementMe, otherPreviousMouseY+yMovementMe);
}


// reset canvas //

void keyPressed() {
  background(255);
  client.publish(mePlayer, 0 + "," + 0);
}


//DEFECT REPORT ///
void connectionList() {
  println("connection lost");
}