http://hyperdramatik.net/mediawiki/index.php?action=history&feed=atom&title=Drawing_bodies
Drawing bodies - Versionsgeschichte
2026-05-20T20:38:31Z
Versionsgeschichte dieser Seite in hyperdramatik
MediaWiki 1.38.2
http://hyperdramatik.net/mediawiki/index.php?title=Drawing_bodies&diff=1173&oldid=prev
Jnkummer: Die Seite wurde neu angelegt: „Datei:Drawing bodies.PNG //////////////////////////////////////////////////////////////////// // S&&O SS2020 // course: *From Space to Space* ////////////…“
2020-05-06T07:54:25Z
<p>Die Seite wurde neu angelegt: „<a href="/mediawiki/index.php/Datei:Drawing_bodies.PNG" title="Datei:Drawing bodies.PNG">Datei:Drawing bodies.PNG</a> //////////////////////////////////////////////////////////////////// // S&&O SS2020 // course: *From Space to Space* ////////////…“</p>
<p><b>Neue Seite</b></p><div>[[Datei:Drawing bodies.PNG]]<br />
<br />
////////////////////////////////////////////////////////////////////<br />
// S&&O SS2020 // course: *From Space to Space*<br />
////////////////////////////////////////////////////////////////////<br />
// this sketch sends your mouse x,y coordinates to a shiftr namespace <br />
// and receives other mouse x,y coordinates from the same namespace<br />
// code based on example by Joël Gähwiler<br />
// https://github.com/256dpi/processing-mqtt<br />
////////////////////////////////////////////////////////////////////<br />
<br />
import mqtt.*; // import MQTT library<br />
MQTTClient client; // create instance of MQTTClient<br />
<br />
////////////////////////////////////////////////////////////////////<br />
///////////////////// DECLARE GLOBAL VARIABLES /////////////////////<br />
////////////////////////////////////////////////////////////////////<br />
// !!! CHANGE p1 and p2 depending on which player you are !!! //<br />
String mePlayer = "/janne_multiplayer/orange/p2";<br />
String otherPlayer = "/janne_multiplayer/orange/p1";<br />
////////////////////////////////////////////////////////////////////<br />
<br />
int otherMouseX = 0; //for incoming values from other player's mouse xy<br />
int otherMouseY = 0;<br />
int otherPreviousMouseX = 0; //to keep track of last mouse position for drawing line<br />
int otherPreviousMouseY = 0;<br />
<br />
long timeStamp; //to keep track of time<br />
int delayTime = 500/35; //for use to publish messages only every 35 milliseconds!<br />
<br />
int mouseClick = 0; //used to toggle between background fade and no-fade<br />
PImage layout;<br />
PImage drawer;<br />
PImage drawer2;<br />
boolean showImage = false;<br />
<br />
////////////////////////////////////////////////////////////////////<br />
<br />
void setup() {<br />
client = new MQTTClient(this);<br />
client.connect("mqtt://jannenora:Monkey47@broker.shiftr.io", "works");<br />
size(800, 550);<br />
layout = loadImage("drops2.jpeg");<br />
drawer = loadImage("jannesmall_character.png");<br />
drawer2 = loadImage("waldgeister.png");<br />
}<br />
<br />
////////////////////////////////////////////////////////////////////<br />
// RECEIVE //<br />
////////////////////////////////////////////////////////////////////<br />
<br />
void clientConnected() {<br />
println("client connected");<br />
client.subscribe(otherPlayer + "/xy");<br />
}<br />
<br />
void messageReceived(String topic, byte[] payload) {<br />
<br />
if (topic.equals(otherPlayer + "/xy") == true) {<br />
// the incoming MQTT "message" is a String: "xValue,yValue"<br />
// to unpack it we use the "split" function:<br />
String incomingCoordinates = new String(payload); <br />
String[] xy = split(incomingCoordinates, ',');<br />
println("new message: " + topic + " x: " + xy[0] + " y: " +xy[1]);<br />
otherMouseX = int(xy[0]);<br />
otherMouseY = int(xy[1]);<br />
}<br />
}<br />
<br />
////////////////////////////////////////////////////////////////////<br />
// SEND & DRAW my line //<br />
////////////////////////////////////////////////////////////////////<br />
<br />
//!only DRAW my line and publish my coordinates when my mouse moves:<br />
void mouseMoved() { <br />
image(drawer, pmouseX, pmouseY, mouseX, mouseY);<br />
/*stroke(19, 120, 200); //set line colour R,G,B<br />
strokeWeight(10); //line thickness<br />
fill (356);<br />
ellipse (pmouseX, pmouseY, mouseX, mouseY);*/<br />
<br />
//the MQTT connection will close if you send more than 25 operations per second!<br />
//so we implement a delay to SEND my coordinates only every xxx milliseconds:<br />
if (millis() - timeStamp > delayTime) {<br />
timeStamp = millis();<br />
client.publish(mePlayer + "/xy", mouseX + "," + mouseY); // ("topic", "message")<br />
}<br />
}<br />
<br />
////////////////////////////////////////////////////////////////////<br />
// DRAW other line //<br />
////////////////////////////////////////////////////////////////////<br />
<br />
void draw() {<br />
if (mouseClick % 2 == 0) {<br />
tint(255, 100); //tint=tönen. gives the image transparency to slowly fade over line<br />
image(layout, 0, 0);<br />
}<br />
image(drawer2, pmouseX, pmouseY, mouseX, mouseY);<br />
<br />
/*stroke(10, 160, 230); //set line colour R,G,B<br />
strokeWeight(10); //line thickness<br />
line(otherPreviousMouseX, otherPreviousMouseY, otherMouseX, otherMouseY); */<br />
otherPreviousMouseX = otherMouseX;<br />
otherPreviousMouseY = otherMouseY; //click mouse to turn on/off fade effect:<br />
}<br />
<br />
////////////////////////////////////////////////////////////////////<br />
<br />
void mouseClicked() {<br />
mouseClick++;<br />
println(mouseClick);<br />
if (mouseClick % 2 != 0) {<br />
image(layout, 0, 0);<br />
}<br />
} <br />
<br />
////////////////////////////////////////////////////////////////////<br />
<br />
void connectionLost() {<br />
println("connection lost");<br />
}</div>
Jnkummer