Processing Librairie Network : L’exemple sharedCanvas en local :

La librairie Network de Processing est un outil puissant qui permet aux développeurs de créer des applications réseau. Elle offre une variété de fonctionnalités qui peuvent être utilisées pour créer des applications réseau complexes et intéressantes. Dans cet article, nous allons examiner l’exemple sharedCanvas en local, qui est une fonctionnalité de la librairie Network qui permet aux développeurs de créer des applications réseau qui partagent des données entre plusieurs utilisateurs. Nous verrons comment cette fonctionnalité peut être utilisée pour créer des applications réseau intéressantes et comment elle peut être mise en œuvre en local.

Processing Librairie Network : L’exemple sharedCanvas en local :

Explication

cette page reprend le double programme « client/serveur » fournit en exemple dans Processing et qui permet de refléter le mouvement de la souris dans la fenêtre serveur en fonction du mouvement de la souris dans la fenêtre client.
l’intérêt ici est de faire la procédure en local, utile en phase de mise au point.

Ressources utiles

librairie Network : http://processing.org/reference/libraries/net/index.html

Fonctionnement :

On lance d’abord le programme serveur (si on lance le client en 1er, on a un message d’erreur car le client ne trouve pas le serveur…)
puis on lance le programme client (qui se connecte au serveur..)
Les mouvements de la souris dans la fenêtre client se répercute dans la fenêtre Serveur.

L’utilisation de l’adresse 127.0.0.1 permet de développer une application « serveur/client » en local ce qui est très intéressant en phase de programmation et de mise au point.
Ensuite, on pourra déployer le double programme dans un vrai réseau.

Le programme Processing « client »

Ce programme est fourni avec le logiciel Processing et se trouve dans Examples > Libraries > Network > SharedCanvasClient

/**
* Shared Drawing Canvas (Client)
* by Alexander R. Galloway.
*
* The Processing Client class is instantiated by specifying a remote
* address and port number to which the socket connection should be made.
* Once the connection is made, the client may read (or write) data to the server.
* Before running this program, start the Shared Drawing Canvas (Server) program.
*/

import processing.net.*;

Client c;
String input;
int data[];

void setup()
{
size(450, 255);
background(204);
stroke(0);
frameRate(5); // Slow it down a little
// Connect to the server’s IP address and port
c = new Client(this, « 127.0.0.1 », 12345); // Replace with your server’s IP and port
}

void draw()
{
if (mousePressed == true) {
// Draw our line
stroke(255);
line(pmouseX, pmouseY, mouseX, mouseY);
// Send mouse coords to other person
c.write(pmouseX + » « + pmouseY + » « + mouseX + » « + mouseY + « \n« );
}
// Receive data from server
if (c.available() > 0) {
input = c.readString();
input = input.substring(0, input.indexOf(« \n« )); // Only up to the newline
data = int(split(input, ‘ ‘)); // Split values into an array
// Draw line using received coords
stroke(0);
line(data[0], data[1], data[2], data[3]);
}
}

[$[Get Code]]

Le programme Processing « serveur »

Ce programme est fourni avec le logiciel Processing et se trouve dans Examples > Libraries > Network > SharedCanvasServer

/**
* Shared Drawing Canvas (Server)
* by Alexander R. Galloway.
*
* A server that shares a drawing canvas between two computers.
* In order to open a socket connection, a server must select a
* port on which to listen for incoming clients and through which
* to communicate. Once the socket is established, a client may
* connect to the server and send or receive commands and data.
* Get this program running and then start the Shared Drawing
* Canvas (Client) program so see how they interact.
*/

import processing.net.*;

Server s;
Client c;
String input;
int data[];

void setup()
{
size(450, 255);
background(204);
stroke(0);
frameRate(5); // Slow it down a little
s = new Server(this, 12345); // Start a simple server on a port
}

void draw()
{
if (mousePressed == true) {
// Draw our line
stroke(255);
line(pmouseX, pmouseY, mouseX, mouseY);
// Send mouse coords to other person
s.write(pmouseX + » « + pmouseY + » « + mouseX + » « + mouseY + « \n« );
}
// Receive data from client
c = s.available();
if (c != null) {
input = c.readString();
input = input.substring(0, input.indexOf(« \n« )); // Only up to the newline
data = int(split(input, ‘ ‘)); // Split values into an array
// Draw line using received coords
stroke(0);
line(data[0], data[1], data[2], data[3]);
}
}