I have a Processing.js sketch where all the devices connected to the same local network can access it for choosing a number between 0 and 150. The numbers float in the browser's window and when someone touches one of them it dissapears from the sketch.

The "normal" Processing sketch must know what numbers are still available for making an animation.

I don't know much Javascript, so please share a comprehensive explanation.

Processing.js sketch

2. String[] numbers_saved;
3. 
   
4. PFont font;
5. 
   
6. int numberQtty = 150;
7. int gridWidth = 15, gridHeight = 10;
8. int yOffset = 50, imageOffset = 10, textxOffset=21, textyOffset=25;
9. float scale_factor = 0.6, drift_speed = 0.08, font_size = 14;
10. int stage = 0;
11. int button_position = 151;
12. int program_counter = 0;
13. 
    
14. int[] numbers = new int[numberQtty];
15. boolean[] dissapear = new boolean[numberQtty];
16. 
    
17. 
    
18. /* @pjs preload="fondo.png, plano2.png, plano1.png, circulo.png, sello.png, bienvenida.png, boton.png, rombo.png, sello2.png, medio.png, salida.png"; */
19. PImage[] images = new PImage[11];
20. 
    
21. PVector[] origins = new PVector[numberQtty];
22. 
    
23. void setup()
24. {
25.   size(1024, 768, P2D);
26.   frameRate(12);
27.   background(255);
28. 
    
29.   font = loadFont("SegoeScript-18.vlw");
30.   textFont(font, 10);
31.   textSize(font_size);
32.   fill(255, 255, 255, 35);
33.   imageMode(CENTER);
34.   textAlign(CENTER, CENTER);
35. 
    
36.   for (int i=0; i<numberQtty; i++) {
37.     dissapear[i] = false;
38.   }
39. 
    
40.   images[0] = loadImage("fondo.png");
41.   images[1] = loadImage("plano2.png");
42.   images[2] = loadImage("plano1.png");
43.   images[3] = loadImage("circulo.png");
44.   images[4] = loadImage("sello.png");
45.   images[5] = loadImage("bienvenida.png");
46.   images[6] = loadImage("boton.png");
47.   images[7] = loadImage("rombo.png");
48.   images[8] = loadImage("sello2.png");
49.   images[9] = loadImage("medio.png");
50.   images[10] = loadImage("salida.png");
51. 
    
52. 
    
53.   imageMode(CORNER);
54.   for (int i=0; i<gridHeight; i++) {
55.     for (int j=0; j<gridWidth; j++) {
56.       origins[gridWidth*i + j] = new PVector(width*j/gridWidth + random(width*(1-scale_factor)/gridWidth-imageOffset), (height-yOffset)*i/gridHeight + random(height*(1-scale_factor)/gridHeight-imageOffset));
57.       image(images[8], origins[gridWidth*i + j].x, origins[gridWidth*i + j].y, width*scale_factor/gridWidth, (height-yOffset)*scale_factor/gridHeight);
58.       text(gridWidth*i + j, origins[gridWidth*i + j].x + textxOffset, origins[gridWidth*i + j].y + textyOffset);
59.     }
60.   }
61.   
62.   
63. }//setup
64. 
    
65. void draw() {
66. 
    
67.   background(255);
68. 
    
69.   imageMode(CENTER);
70.   image(images[0], width/2, height/2);
71.   image(images[1], width/2, height/2);
72.   image(images[2], width/2, height/2);
73.   image(images[3], width/2, height/2);
74.   image(images[7], width/2, height/2, 250, 175);
75. 
    
76.   numbers_saved = loadStrings("saved_numbers.txt");
77.   
78.   
79.   //println(numbers_saved.length);
80.   
81.   if(numbers_saved.length > 0) {
82.     for(int i=0; i<numbers_saved.length; i++) {
83.       dissapear[numbers_saved[i]-1] = true;
84.     }
85.   }
86. 
    
87.   //println(program_counter);
88. 
    
89.   if (stage == 0) {
90. 
    
91.     imageMode(CORNER);
92.     for (int i=0; i<gridHeight; i++) {
93.       for (int j=0; j<gridWidth; j++) {
94.         //origins[gridWidth*i + j] = new PVector(width*j/gridWidth + random(width*(1-scale_factor)/gridWidth-imageOffset)*drift_speed, (height-yOffset)*i/gridHeight + random(height*(1-scale_factor)/gridHeight-imageOffset)*drift_speed);
95.         if (dissapear[gridWidth*i + j] == false) {
96.           image(images[8], origins[gridWidth*i + j].x, origins[gridWidth*i + j].y, width*scale_factor/gridWidth, (height-yOffset)*scale_factor/gridHeight);
97.           fill(255, 255, 255, 50);
98.           textSize(font_size);
99.           text(gridWidth*i + j + 1, origins[gridWidth*i + j].x + textxOffset, origins[gridWidth*i + j].y + textyOffset);
100.         }
101.       }
102.     }
103. 
     
104.     imageMode(CENTER);
105.     image(images[5], width/2, height/2);
106.     image(images[6], width/2, height/2);
107.   }
108. 
     
109. 
     
110.   else if (stage == 1) {
111. 
     
112.     imageMode(CORNER);
113.     for (int i=0; i<gridHeight; i++) {
114.       for (int j=0; j<gridWidth; j++) {
115.         if ((gridWidth*i + j) != button_position) {
116.           origins[gridWidth*i + j] = new PVector(width*j/gridWidth + random(width*(1-scale_factor)/gridWidth-imageOffset)*drift_speed, (height-yOffset)*i/gridHeight + random(height*(1-scale_factor)/gridHeight-imageOffset)*drift_speed);
117.           scale_factor = 0.6;
118.           font_size=14;
119.           textxOffset=21;
120.           textyOffset=25;
121.         }
122.         else if ((gridWidth*i + j) == button_position) {
123.           origins[gridWidth*i + j] = new PVector(mouseX, mouseY);
124.           scale_factor = 0.9;
125.           font_size=20;
126.           textxOffset=30;
127.           textyOffset=35;
128.         }
129. 
     
130.         if (dissapear[gridWidth*i + j] == false) {
131.           image(images[4], origins[gridWidth*i + j].x, origins[gridWidth*i + j].y, width*scale_factor/gridWidth, (height-yOffset)*scale_factor/gridHeight);
132.           fill(255, 255, 255, 255);
133.           textSize(font_size);
134.           text(gridWidth*i + j + 1, origins[gridWidth*i + j].x + textxOffset, origins[gridWidth*i + j].y + textyOffset);
135.         }
136.       }
137.     }
138.     imageMode(CENTER);
139.     image(images[9], width/2, height/2);
140.   }
141. 
     
142. 
     
143.   else if (stage==2) {
144.     imageMode(CORNER);
145.     for (int i=0; i<gridHeight; i++) {
146.       for (int j=0; j<gridWidth; j++) {
147.         //origins[gridWidth*i + j] = new PVector(width*j/gridWidth + random(width*(1-scale_factor)/gridWidth-imageOffset)*drift_speed, (height-yOffset)*i/gridHeight + random(height*(1-scale_factor)/gridHeight-imageOffset)*drift_speed);
148.         if (dissapear[gridWidth*i + j] == false) {
149.           image(images[8], origins[gridWidth*i + j].x, origins[gridWidth*i + j].y, width*scale_factor/gridWidth, (height-yOffset)*scale_factor/gridHeight);
150.           fill(255, 255, 255, 50);
151.           textSize(font_size);
152.           text(gridWidth*i + j + 1, origins[gridWidth*i + j].x + textxOffset, origins[gridWidth*i + j].y + textyOffset);
153.         }
154.       }
155.     }
156. 
     
157.     imageMode(CENTER);
158.     image(images[10], width/2, height/2);
159.     program_counter++;
160.     if(program_counter == 36) {
161.       program_counter = 0;
162.       stage=0;
163.     }
164.   }
165. }//draw
166. 
     
167. void mouseClicked() {
168. 
     
169.   if (stage == 0) {
170.     if (mouse_over_button(425, 510, 425+155, 510+35)) stage++;
171.   }
172. }
173. 
     
174. void mousePressed() {
175.   button_position = int(what_button());
176. }
177. 
     
178. void mouseReleased() {
179.   if (stage == 1) {
180.     if (mouse_over_button(435, 300, 435+150, 300+150)) {
181.       dissapear[button_position] = true;
182.       stage++;
183.     }
184.   }
185.   button_position = 151;
186. }
187. 
     
188. 
     
189. int what_button() {
190.   int posX = int(mouseX*gridWidth/width);
191.   int posY = int(mouseY*gridHeight/height);
192. 
     
193.   int button = gridWidth*posY + posX;
194.   return button;
195. }
196. 
     
197. boolean mouse_over_button(float x1, float y1, float x2, float y2) {
198.   if (mouseX>x1 && mouseX<x2 && mouseY>y1 && mouseY<y2) {
199.     return true;
200.   }
201.   else return false;
202. }

Processing sketch

2. import controlP5.*;
3. 
   
4. ControlP5 cp5;
5. String NUMERO = "";
6. PFont font;
7. 
   
8. int numberQtty = 150;
9. int gridWidth = 15, gridHeight = 10;
10. 
    
11. PrintWriter output;
12. int[] saved_numbers = new int[numberQtty];
13. int new_number = 0, number_counter=0;
14. 
    
15. PImage[] images = new PImage[2];
16. 
    
17. void setup()
18. {
19.   size(960, 960, P2D);
20.   background(255);
21.   font = loadFont("Arial-BoldMT-20.vlw");
22.   textFont(font, 20);
23.   textSize(20);
24.   fill(0, 20, 100, 255);
25. 
    
26.   for (int i=0; i<numberQtty; i++) {
27.     saved_numbers[i] = 0;
28.   }
29. 
    
30.   output = createWriter("E:/windows/Dropbox/Processing/number_server/web-export/saved_numbers.txt");
31. 
    
32.   cp5 = new ControlP5(this);
33. 
    
34.   cp5.addTextfield("NUMERO")
35.     .setPosition(220, height-45)
36.       .setSize(50, 40)
37.         .setFont(font)
38.           .setAutoClear(true)
39.             ;
40. 
    
41.   images[0] = loadImage("sello.png");
42.   images[1] = loadImage("fondo.jpg");
43.   
44. }
45. 
    
46. void draw() {
47.   
48.   background(images[1]);
49. 
    
50.   new_number = int(NUMERO);
51. 
    
52.   if (new_number>0 && new_number<=150) {
53.     if (new_number != saved_numbers[new_number-1]) {
54.       output.println(new_number);
55.       output.flush();
56.       saved_numbers[new_number-1] = new_number;
57.       number_counter++;
58.       
59.       
60.     }
61.   }
62.   
63.   for (int i=0; i<gridHeight; i++) {
64.     for (int j=0; j<gridWidth; j++) {
65.       if (saved_numbers[gridWidth*i + j] != 0) {
66.         tint(255, 0);
67.         image(images[0], width*j/gridWidth, height*i/gridHeight, width/gridWidth, height/gridHeight);
68.       }
69.       else {
70.         tint(255, 255);
71.         image(images[0], width*j/gridWidth, height*i/gridHeight, width/gridWidth, height/gridHeight);
72.       }
73.     }
74.   }
75. 
    
76.   text("Ingresa tu Número: ", 20, height-20);
77. }
78. 
    
79. void stop() {
80.   output.close();
81. }