Connected mouse
Zur Navigation springen
Zur Suche springen
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.
/// 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");
}