I am very new in processing js, the following question is stupid but I don't know why when it happend...

It is a simplify code to show my problem, the translate function are not working when I run this code as html file using processing js. (Start from the comment line //****). I have tested it in processing and it is works fine, those rectangles should go to next row if they are out of the screen. But I just see the first row of rects when I running as html file.

Can anyone tell me what's wrong? Thank you very much!!!!!!

1. <script src="processing-1.3.6.min.js"></script>

   <script type="text/processing" data-processing-target="mycanvas">

   
   

2. 
   
3. 
   
4. 
   
5. int CubeSize = 40 * 4;
6. int CubeCenter = 20 * 4;
7. int MaxBoundary = 30 * 4;
8. int MinBoundary = 10 * 4;
9. 
   
10. 
    
11. int alphaValue = 200;
12. int CubeNum = 100;
13. 
    
14. 
    
15. int x = 0;
16. int countRan = 0;
17. 
    
18. 
    
19. 
    
20. boolean checked = false;
21. 
    
22. 
    
23. void setup() {
24. 
    
25.   background(100);
26.   size(800, 800);
27.   smooth();
28.   noStroke();
29. 
    
30.   
31. 
    
32.   int CubeRow = (800 /  (CubeSize += 5))-1;
33. 
    
35. 
    
36.   for (int i = 0; i < CubeNum; i++) {
37. 
    
38. 
    
39.         if (i == 0) {
40.       translate(5, 0);
41.     }
42.     else {
43. //*************************
44.       if (x == CubeRow) {
45.         int Zero = ((CubeSize ) * (CubeRow-1));
46.         translate(-Zero, 0);
47.         translate(0, CubeSize);
48.         x = 0;
49.       }
50.       else {
51.         translate(CubeSize, 0);
52.       }
53.     }
54. 
    
55. 
    
56.     text(i, CubeCenter, CubeCenter);
57. rect(0, 0, 50, 50);
58.     x++;
59.   }
60. }
61. 
    

62. </script>

    
    

    
    

    <canvas id="mycanvas"></canvas>