Squares together

Aus hyperdramatik
Wechseln zu: Navigation, Suche

This sketch receives OnMouseClick and MousePosition input. Each position of the mouse is visible on the screen as a little square and sent to the other player, and you receive the other player's keys in a different colour.

Squares.jpg


////////////////////////////////////////////////////////////////////
// S&&O SS2020 // course: *From Space to Space*
////////////////////////////////////////////////////////////////////

import mqtt.*;
MQTTClient client;

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

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

int otherMouseX = 0;  //for incoming values from other player's mouse xy
int otherMouseY = 0;
int otherPreviousMouseX = 0;  //to keep track of last mouse position for drawing line
int otherPreviousMouseY = 0;

long timeStamp;  //to keep track of time
int delayTime = 2000/35;  //for use to publish messages only every 35 milliseconds!

int mouseClick = 1; //used to toggle between background fade and no-fade

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

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(100);  //set background colour
}

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

////////////////////////////////////////////////////////////////////
// RECEIVE //
////////////////////////////////////////////////////////////////////
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, ',');
  println("new message: " + topic + " x: " + xy[0] + " y: " +xy[1]);
  otherMouseX = int(xy[0]);
  otherMouseY = int(xy[1]);
}
////////////////////////////////////////////////////////////////////
// SEND & DRAW my line //
////////////////////////////////////////////////////////////////////

//!only DRAW my line and publish my coordinates when my mouse moves:
void mouseMoved() {  
  rect(60,60,100,100);
  fill(230, 170, 70);  //set line colour R,G,B
  strokeWeight(5);  //line thickness
  rect(random(pmouseX, pmouseY),random(pmouseY,pmouseX), random(10, 60), random(10,60));

  //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); // ("topic", "message")
  }
}

////////////////////////////////////////////////////////////////////
// DRAW other line //
////////////////////////////////////////////////////////////////////

void draw() {
  
   //click mouse to turn on/off fade effect:
  if (mouseClick % 2 == 0) {  //if even number of clicks
    noStroke();
    fill(10, 10); //fill(grayscale, alpha)
    rect(0, 0, width, height);  //draw rect full screen
  }
  
  rect(60,60,100,100);
  fill(70, 230, 160);  //set line colour R,G,B
  strokeWeight(5);  //line thickness
  rect(otherPreviousMouseX, otherPreviousMouseY, otherMouseX, otherMouseY);
  otherPreviousMouseX = otherMouseX;  //update previous to be current
  otherPreviousMouseY = otherMouseY;  //update previous to be current
}

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

void mouseClicked() {
  mouseClick++;
  println(mouseClick);
}  

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

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