Squares together: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Leoni (Diskussion | Beiträge) (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…“) |
Leoni (Diskussion | Beiträge) 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. | ||
Bild | |||
Zeile 9: | Zeile 9: | ||
//////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////// | ||
// S&&O SS2020 // course: *From Space to Space* | // S&&O SS2020 // course: *From Space to Space* | ||
//////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////// | ||
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/ | String mePlayer = "/typing-together/orange/p2"; | ||
String otherPlayer = "/typing-together/ | String otherPlayer = "/typing-together/orange/p1"; | ||
//////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////// | ||
int otherMouseX = 0; //for incoming values from other player's mouse xy | |||
int otherMouseY = 0; | |||
int | int otherPreviousMouseX = 0; //to keep track of last mouse position for drawing line | ||
int | int otherPreviousMouseY = 0; | ||
int | |||
int | 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:// | 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 | ||
} | } | ||
Zeile 57: | Zeile 49: | ||
//////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////// | ||
// RECEIVE | // RECEIVE // | ||
//////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////// | ||
void messageReceived(String topic, byte[] payload) { | void messageReceived(String topic, byte[] payload) { | ||
// the incoming MQTT "message" is a String: "xValue,yValue" | |||
println("new message: " + topic + " | // 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 & | // SEND & DRAW my line // | ||
//////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////// | ||
void | //!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() { | void draw() { | ||
if ( | |||
//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); | |||
} | |||
//////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////// |
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");
}