Squares together: Unterschied zwischen den Versionen

Aus hyperdramatik
Zur Navigation springen Zur Suche springen
(Die Seite wurde neu angelegt: „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…“)
 
Keine Bearbeitungszusammenfassung
Zeile 3: Zeile 3:
and you receive the other player's keys in a different colour.
and you receive the other player's keys in a different colour.


https://live.staticflickr.com/65535/49857401148_0f6b53579f_c.jpg
Bild




Zeile 9: Zeile 9:
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
// S&&O SS2020 // course: *From Space to Space*
// 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
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////


Zeile 25: Zeile 19:


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


PFont f;
int otherMouseX = 0; //for incoming values from other player's mouse xy
String t;
int otherMouseY = 0;
int letterWidth = 15;
int otherPreviousMouseX = 0; //to keep track of last mouse position for drawing line
int letterHeight = 40;
int otherPreviousMouseY = 0;
int x = letterWidth;
 
int y = letterHeight;
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


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


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


Zeile 57: Zeile 49:


////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
// RECEIVE & TYPE //
// RECEIVE //
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
void messageReceived(String topic, byte[] payload) {
void messageReceived(String topic, byte[] payload) {
   t = new String(payload);
// the incoming MQTT "message" is a String: "xValue,yValue"
   println("new message: " + topic + " - " + t);
   // to unpack it we use the "split" function:
   fill(200, 130, 130); //the other player's text will be this colour
  String incomingPayload = new String(payload); 
   text(t, x, y); //draw key on screen
  String[] xy = split(incomingPayload, ',');
  x+=letterWidth;  //increment position
   println("new message: " + topic + " x: " + xy[0] + " y: " +xy[1]);
   otherMouseX = int(xy[0]);
   otherMouseY = int(xy[1]);
}
}
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
// SEND & TYPE //
// SEND & DRAW my line //
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////


void keyPressed() {
//!only DRAW my line and publish my coordinates when my mouse moves:
   client.publish(mePlayer, str(key));  //send key to other player
void mouseMoved() {
   fill(100, 150, 150);  //your text will be this colour
   rect(60,60,100,100);
   text(key, x, y); //draw key on screen
  fill(230, 170, 70);  //set line colour R,G,B
   x+=letterWidth; //increment position
   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() {
void draw() {
   if (x > width-letterWidth) {
 
     x=letterWidth;
  //click mouse to turn on/off fade effect:
     y+=letterHeight;
   if (mouseClick % 2 == 0) { //if even number of clicks
  }
     noStroke();
  if (y> height-letterHeight) {
     fill(10, 10); //fill(grayscale, alpha)
     y=letterHeight;
     rect(0, 0, width, height);  //draw rect full screen
    saveFrame();  //save an image of the window into sketch folder
   }
   }
 
  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);


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

Version vom 5. Mai 2020, 14:50 Uhr

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.

Bild


////////////////////////////////////////////////////////////////////
// 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://LeoniLeoni:leonileoni@broker.shiftr.io", "LeoniLeoni");

  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");
}