Problem ellipse appears and disappears

jyciap11

The problem is this: the program draws many ellipse how many users are connected, but every time the ellipse appear and disappear like that?

To see this: - Start the server and double-click on the client (there are two windows open). - Try to play. are two codes because one is the client, and the other server.

//SERVER
    import processing.net.*;
    Server s;
    Client c;
    String input;
    int colore;
    String data[];
    float pedina [];

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

    void draw(){
      // Receive data from client
      c = s.available();
      if (c != null) {
        background(0);
        input = c.readString();
        input = input.substring(0, input.indexOf("\n")); // Only up to the newline
        data = splitTokens(input);
        pedina[0] = float (data[1]); //cordinate x
        pedina[1] = float (data[2]); //coordinate y
        pedina[2] = float (data[3]); //raggio
        colore = int (data[4]); // informazioni colore
        String nome = data[0]; //nome
        if(colore == 1){
          fill(255, 0, 0);
          //background(0);
          ellipse(pedina[0],pedina[1],pedina[2],pedina[2]); 
        }
        if(colore == 2){
          fill(255, 0, 255);
          //background(0);
          ellipse(pedina[0],pedina[1],pedina[2],pedina[2]); 
        }
        if(colore == 3){
          fill(130, 0, 255);
          //background(0);
          ellipse(pedina[0],pedina[1],pedina[2],pedina[2]); 
        }
      }   
    }

    class Posizione{
      float x, y, r;

      Posizione(float a, float b, float s) {
        x = a;
        y = b;
        r = s;
      }
      Posizione(float a, float b){
        x=a;
        y=b;
      }

    }

    class Utente{
      String nome;
      color colore;
      Utente (String nome1, color c){
        nome = nome1;
        colore = c;
      }
    }

/////////////SECOND////////////////////

//CLIENT
    Posizione pedina;
    import processing.net.*;
   /* Variabili di Stato*/
    final int menu =0;
    final int play = 1;
    final int play2 = 2;
    int stato;
    /*********************/

    Client client;
    float x = random(0,449);
    float y = random(0,254);
    String input;
    int data[];
    String nome =  " ";

    /* Variabili Colore*/
    int coloreUtente;
    color c = color(0, 0, 0);
    /*******************/


    void setup(){
      stato = menu;
      size(450, 255);
      background(255);
      stroke(0);
      pedina = new Posizione(x,y, 20);
      // Connect to the server's IP address and port
      client = new Client(this, "127.0.0.1", 12345); // Replace with your server's IP and port
    }

    void draw(){
      frameRate(5);
      if (stato== menu){
        text("Nickname: ",50,40);
        text(nome +(frameCount/10 % 2 == 0 ? "_" : ""), 110, 40);
        colore();
        rect(100, 100, 50, 20);
      }
      if (stato==play){
        gioco();
      }
      //mantengo a video il nome del Player
      if (stato == play || stato == play2){
        fill(0);
        text("Player: "+ nome,350,30); 
      }
     }

    class Posizione{
      float x, y, r;

      Posizione(float a, float b, float s) {
        x = a;
        y = b;
        r = s;
      }
      Posizione(float a, float b){
        x=a;
        y=b;
      }

    }

    void colore(){
      //red
      fill(255, 0, 0);
      rect(50, 50, 20, 20);
      //pink
      fill(255, 0, 255);
      rect(90, 50, 20, 20);
      //purple
      fill(130, 0, 255);
      rect(140, 50, 20, 20);
    }

    void gioco(){
        stato= play;
        if(stato==play){
          background(255);
          stroke(5);
          fill(c);
          ellipse(pedina.x, pedina.y, pedina.r, pedina.r);
        }

    }

    void keyPressed(){ 
      if (stato == menu){ 
        if (key != CODED) {
          switch(key) {
            case BACKSPACE:
              nome = nome.substring(0,max(0,nome.length()-1));
              break;
            case TAB:
              nome += "    ";
              break;
            case ENTER:
              println(nome);
              break;
            case ESC:
              exit();
              break;
            default:
              nome += key;
          }
        }
      }
      if(stato==play){
         if(key==CODED){
          if (keyCode == UP){
            pedina.y-=5;
            stato=play2;
            avanzamento();
          }
          if (keyCode == DOWN){
            pedina.y+=5;
            stato=play2;
            avanzamento();
          }
          if (keyCode == RIGHT){
            pedina.x+=5;
            stato=play2;
            avanzamento();
          }
          if (keyCode == LEFT){
            pedina.x-=5;
            stato=play2;
            avanzamento();
          }
        }
      }
    }

    void mousePressed(){
      if (stato==menu){
        if(mouseX > 50 && mouseX < 70 && mouseY > 50 && mouseY < 70){
          c = color(255, 0, 0);
          coloreUtente=1;
        }
        if(mouseX > 90  && mouseX < 110 && mouseY > 50 && mouseY <70){
          c = color(255, 0, 255);
          coloreUtente=2;
        }
        if(mouseX > 130 && mouseX < 160 && mouseY > 50 && mouseY <70){
          c = color(130, 0, 255);
          coloreUtente=3;
        }
        if(mouseX > 100 && mouseX < 150 && mouseY > 100 && mouseY < 120){ 
            stato=play2; 
            avanzamento();
        }
      }
    }

    void avanzamento(){
     if(stato == play2){
      client.write(nome + " " + pedina.x + " " + pedina.y + " " + pedina.r + " " + coloreUtente + "\n");
      stato=play;
     }
    }

PhiLho

Note 1: frameRate() is generally set in setup(), not need to change in on each frame!
Note 2: Your client code probably miss a background() call at the start of draw().
Note 3: when the server receives data, it calls background(), so indeed it deletes the previously drawn ellipse(s).

background() is called when you need to clear and redraw entirely the screen, and avoided when you draw cumulative drawings.

jyciap11

If you do not take my background so many are drawn ellipse one behind the other

jyciap11

This is the problem

PhiLho

OK, so it is intended. Re-reading your message, I think you need to know each client that can be connected and to retain information about their ellipse.

draw() is called many times per second. It will receive data from one client only (unlikely to have simultaneous data receiving from two different clients), so it will draw only one ellipse, the previous one being erased by the background() call.

You have to persist each ellipse position, color, etc. Using a class is probably the best way.

You might also need to manage when a client disconnects...

jyciap11

Can you help me?

jyciap11

I also tried with arrays, it is impossible! For the program each time a client connects starts all over again from scratch.

PhiLho

Show your attempts with array, it might be a simple error, like not declaring them at a global level.

jyciap11

He does not draw anything at all, I do not know how to do!!

//SERVER
import processing.net.*;

Server s;
Client c;
String input;
int colore;
String data[];
int NClient=0;
float pedina [];
Posizione [] p;


void setup() 
{
  size(450, 255);
  background(255);
  stroke(0);
  frameRate(5); // Slow it down a little
  s = new Server(this, 12345); // Start a simple server on a port
  data = new String[1000];
  pedina = new float [1000];
  p = new Posizione[1000];
}

void draw(){
  // Receive data from client
  c = s.available();
  if (c != null) {
    background(0);
    input = c.readString();
    input = input.substring(0, input.indexOf("\n")); // Only up to the newline
    data = splitTokens(input);
    pedina[0] = float (data[1]); //cordinate x
    pedina[1] = float (data[2]); //coordinate y
    pedina[2] = float (data[3]); //raggio
    colore = int (data[4]); // informazioni colore
    String nome = data[0]; //nome
    for(int i=0;i< NClient; i++){
      p[i].x = pedina[0];
      p[i].y = pedina[1];
      p[i].r = pedina[2];
    if(colore == 1){
      fill(255, 0, 0);
      //background(0);
      ellipse(p[i].x,p[i].y,p[i].r,p[i].r); 
    }
    if(colore == 2){
      fill(255, 0, 255);
      //background(0);
      ellipse(p[i].x,p[i].y,p[i].r,p[i].r); 
    }
    if(colore == 3){
      fill(130, 0, 255);
      //background(0);
      ellipse(p[i].x,p[i].y,p[i].r,p[i].r); 
    }
    }
  }   
}


class Posizione{
  float x,y,r;
  Posizione(float a, float b, float z){
    x=a;
    y=b;
    r=z;
  }
}

class Utente{
  String nome;
  color colore;
  Utente (String nome1, color c){
    nome = nome1;
    colore = c;
  }
}

void serverEvent(Server server, Client client) {
  NClient++;
}



//CLIENT
Posizione pedina;
import processing.net.*;

/* Variabili di Stato*/
final int menu =0;
final int play = 1;
final int play2 = 2;
int stato;
/*********************/

Client client;
float x = random(0,449);
float y = random(0,254);
String input;
int data[];
String nome =  " ";

/* Variabili Colore*/
int coloreUtente;
color c = color(0, 0, 0);
/*******************/

void setup(){
  stato = menu;
  size(450, 255);
  background(255);
  stroke(0);
  pedina = new Posizione(x,y, 20);
  // Connect to the server's IP address and port
  client = new Client(this, "127.0.0.1", 12345); // Replace with your server's IP and port
}

void draw(){
  frameRate(5);
  if (stato== menu){
    text("Nickname: ",50,40);
    text(nome +(frameCount/10 % 2 == 0 ? "_" : ""), 110, 40);
    colore();
    rect(100, 100, 50, 20);
  }
  if (stato==play){
    gioco();
  }
  //mantengo a video il nome del Player
  if (stato == play || stato == play2){
    fill(0);
    text("Player: "+ nome,350,30); 
  }
 }

class Posizione{
  float x, y, r;

  Posizione(float a, float b, float s) {
    x = a;
    y = b;
    r = s;
  }
  Posizione(float a, float b){
    x=a;
    y=b;
  }

}

void colore(){
  //red
  fill(255, 0, 0);
  rect(50, 50, 20, 20);
  //pink
  fill(255, 0, 255);
  rect(90, 50, 20, 20);
  //purple
  fill(130, 0, 255);
  rect(140, 50, 20, 20);
}

void gioco(){
    stato= play;
    if(stato==play){
      background(255);
      stroke(5);
      fill(c);
      ellipse(pedina.x, pedina.y, pedina.r, pedina.r);
    }

}

void keyPressed(){ 
  if (stato == menu){ 
    if (key != CODED) {
      switch(key) {
        case BACKSPACE:
          nome = nome.substring(0,max(0,nome.length()-1));
          break;
        case TAB:
          nome += "    ";
          break;
        case ENTER:
          println(nome);
          break;
        case ESC:
          exit();
          break;
        default:
          nome += key;
      }
    }
  }
  if(stato==play){
     if(key==CODED){
      if (keyCode == UP){
        pedina.y-=5;
        stato=play2;
        avanzamento();
      }
      if (keyCode == DOWN){
        pedina.y+=5;
        stato=play2;
        avanzamento();
      }
      if (keyCode == RIGHT){
        pedina.x+=5;
        stato=play2;
        avanzamento();
      }
      if (keyCode == LEFT){
        pedina.x-=5;
        stato=play2;
        avanzamento();
      }
    }
  }
}

void mousePressed(){
  if (stato==menu){
    if(mouseX > 50 && mouseX < 70 && mouseY > 50 && mouseY < 70){
      c = color(255, 0, 0);
      //variabile da passare al server per fargli capire che colore è stato scelto
      coloreUtente=1;
    }
    if(mouseX > 90  && mouseX < 110 && mouseY > 50 && mouseY <70){
      c = color(255, 0, 255);
      //variabile da passare al server per fargli capire che colore è stato scelto
      coloreUtente=2;
    }
    if(mouseX > 130 && mouseX < 160 && mouseY > 50 && mouseY <70){

      c = color(130, 0, 255);
      //variabile da passare al server per fargli capire che colore è stato scelto
      coloreUtente=3;
    }
    if(mouseX > 100 && mouseX < 150 && mouseY > 100 && mouseY < 120){ 
        //una volta premuto su Play lo stato cambia e, per proseguire correttamente nel gioco,
        //viene creata una piccola funzione che funge da "routine"  
        stato=play2; 
        avanzamento();
    }
  }
}

void avanzamento(){

 if(stato == play2){
  client.write(nome + " " + pedina.x + " " + pedina.y + " " + pedina.r + " " + coloreUtente + "\n");
  stato=play;
 }
}

jyciap11

Error is: Null Pointer Exception, in this for

    for(int i=0;i< NClient; i++){
          p[i].x = pedina[0];
          p[i].y = pedina[1];
          p[i].r = pedina[2];

jyciap11

I do not know how to do with this error !

PhiLho

for(int i=0;i< NClient; i++){
  p[i].x = pedina[0];
  p[i].y = pedina[1];
  p[i].r = pedina[2];

Why pedina has a size of 1000, while you only use 3 entries? Beside, you receive data from one client, then you fill all the p array with this information, loosing the information you got from all other clients!

You must only fill p[index] for the connected client with id index. Then loop on the existing p to draw the ellipses.

But the problem might be to identify clients... I have some ideas, but it can be a bit beyond your current level. (Using, for example, a HashMap with client id as key, client position / data as value.)

jyciap11

Each client (each time) is deleted and only the last written! Can you let me see your idea?

PhiLho

OK, here is the general idea, untested:

class ClientInfo
{
  String id;
  float x, y;
  float r;
  color c;
}

HashMap<String, ClientInfo> clients = new HashMap<String, ClientInfo>();

void draw(){
  background(0); // Always!

  // 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 = splitTokens(input);
    ClientInfo ci = new ClientInfo();
    ci.id = data[0]; // Supposing the information provided by the client starts with the id
    ci.x = float(data[1]); //cordinate x
    ci.y = float(data[2]); //coordinate y
    ci.r = float(data[3]); //raggio
    ci.c = int(data[4]); // informazioni colore
    // Add new client, or update an existing one, if it has an id already stored
    clients.put(ci.id, ci);
  } // End of new information
  // Now, draw the data we stored
  for (ClientInfo ci : clients.values()) {
    if (ci.c== 1) {
      fill(255, 0, 0);
    }
    else if (ci.c== 2) {
      fill(255, 0, 255);
    }
    else if (ci.c== 3) {
      fill(130, 0, 255);
    }
    // It is the same drawing whatever the color!
    ellipse(ci.x, ci.y, ci.r, ci.r);
  }  
}

You have to change the client code to send a unique (per client) id at position zero of the data it sends.

jyciap11

good idea!!!