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. }

I'm trying to create a program that recognizes electric blue color at a particular depth. For this I'm using a kinect and SimpleOpenNI library in Processing 2.0b5. When I try to display the image created after filtering the colors I don't want, the pixels too far and the ones too close from my 'depth of interest', the program complains about running out of memory soon after it started. 

I'd appreciate some advice of what I could I change to avoid the memory problem (I already tried increasing the limit in the IDE preferences window to 1 GB but it was unsuccessful).

The code:

2. import SimpleOpenNI.*;
3. SimpleOpenNI kinect;
4. 
   
5. int closestValue;
6. int closestX;
7. int closestY;
8. 
   
9. int minRange = 600;
10. int maxRange= 1400;
11. 
    
12. PImage ttoolCursor;
13. PImage ttoolDrawing;
14. 
    
15. float lastX;
16. float lastY;
17. 
    
18. void setup()
19. {
20.   size(640, 480);
21.   colorMode(HSB, 359);
22.   kinect = new SimpleOpenNI(this);
23.   kinect.enableDepth();
24.   kinect.enableRGB();  
25.   kinect.alternativeViewPointDepthToImage();
26.   
27.   ttoolCursor = loadImage("pde-16.png");
28.   ttoolDrawing = createImage(640, 480, RGB);
29. 
    
30.   stroke(245, 359, 359);
31.   fill(245, 359, 359);
32.   strokeWeight(3);
33. 
    
34.   background(0);
35. }
36. 
    
37. void draw()
38. {
39.   background(0);
40.   closestValue = 8000;
41.   kinect.update();
42.   PImage rgbImage = kinect.rgbImage();
43.   PImage rgbImageMirror = createImage(640, 480, RGB);
44.   int[] depthValues = kinect.depthMap();
45.   
46.   rgbImage.loadPixels();
47.   for (int i = 0; i < rgbImage.pixels.length; i++) {
48.     if (depthValues[i] <= minRange || depthValues[i] >= maxRange) {
49.       rgbImage.pixels[i] = color(0, 0, 0);
50.     }
51.     else if (hue(rgbImage.pixels[i]) <= 200 || hue(rgbImage.pixels[i]) >=260 || hue(rgbImage.pixels[i]) <=215 || brightness(rgbImage.pixels[i]) <=215) {
52.       rgbImage.pixels[i] = color(0, 0, 0);
53.     }
54.   }
55.   rgbImage.updatePixels();
56.   
57.   rgbImageMirror.loadPixels();
58.   for (int y = 0; y < 480; y++) {
59.     for (int x = 0; x < 640; x++) {
60.       int reversedX = 640-x-1;
61.       int i = reversedX + y * 640;
62.       int j = x + y * 640;
63.       rgbImageMirror.pixels[j] = rgbImage.pixels[i];
64.     }
65.   }
66.   rgbImageMirror.updatePixels();
67.   
68.   //float interpolatedX = lerp(lastX, closestX, 0.3f);   
69.   //float interpolatedY = lerp(lastY, closestY, 0.3f);
70.   
71.   image(rgbImageMirror, 0, 0);
72.   //image(ttoolCursor, interpolatedX, interpolatedY);
73.   //lastX = interpolatedX;
74.   //lastY = interpolatedY;
75.   
76.   println(frameRate);
77. }
78.