hi !
I'm having great fun learning and experimenting with Processing,
and I'm trying to run a sketch on processing.js.

First of all, the sketch runs very slowly on processing.js while I have no problem in processing.
I'm using P3D mode because I'm using modelX() function.
Maybe the sketch would run better in 2D mode, but I can't find a similar function (modelX) in 2D mode.

Here is my code :

1. int nmax = 3000;
2. int NB = 0;
3. Ball[] ball = new Ball[0];
4. float xoff = 0.0;
5. float yoff = 0.0;
6. float xincrement = 0.004;
7. float yincrement = 0.01;
8. float vitesse = 0.5;
9. boolean info = true;
10. boolean arm = true;
11. String s;
12. class Ball
13. {
14.   float taille;
15.   float xinc;
16.   float yinc;
17.  
18.   Ball(float X,float Y)
19.   {
20.     xinc = X;
21.     yinc = Y;
22.   }
23.   void display()
24.   {
25.     noStroke();
26.     fill(0,0,255,40);
27.     ellipse(xinc,yinc,10,10);
28.   }
29.   void move()
30.   {yinc += vitesse;
31.   }
32. }
33. void setup()
34. {
35.   size(800,400,P3D);
36.   background(255);
37.   smooth(4);
38.   frameRate(25);
39. }
40. void draw()
41. {
42.   background(255); 
43.   if(info){infos();}
44.   float n = noise(xoff)*PI*4.00;
45.   xoff += xincrement;
46.   float m = noise(yoff)*PI*4.00;
47.   yoff += yincrement;
48.   pushMatrix();
49.   translate(width/2,height/2,0);
50.   stroke(255,0,0,200);
51.   rotateZ(n);
52.   if(arm){line(0,0,0,75,0,0);}
53.  
54.   pushMatrix();
55.   translate(75,0,0);
56.   rotate(m);
57.   if(arm){line(0,0,0,75,0,0);}
58.   translate(75,0,0);
59.   float x = modelX(0, 0, 0);
60.   float y = modelY(0, 0, 0);
61.   popMatrix();
62.   popMatrix();
63.   NB += 1;
64.   if(NB > nmax){NB = nmax;}
65.   if(NB < nmax)
66.   {
67.     ball = (Ball[]) expand(ball, ball.length + 1);
68.     ball[ball.length-1] = new Ball(x,y);
69.   }
70.   if(NB == nmax)
71.   {
72.     for(int j = 0; j<ball.length-1; j++)
73.     {
74.       ball[j] = ball[j+1];
75.     }
76.     ball[ball.length-1] = new Ball(x,y);
77.   }
78.   for(int i=0; i<ball.length;i++)
79.   {
80.     ball[i].display();
81.     ball[i].move();
82.   }
83. }
84. void keyPressed()
85. {
86.   if(key == 'i'){info=!info;}
87.   if(key == 'a'){arm=!arm;}
88. }
89. void infos()
90. {
91.   fill(255,0,0);
92.   s = "         Bras \n";
93.   s += "------------\n";
94.   s += "fps                " + round(frameRate) + "\n";
95.   s += "------------\n";
96.   s +="i      ->    infos\n";
97.   s +="a     ->    arm\n";
98.   text(s,width-95,20);
99.   s = null;
100. }

I would greatly appreciate some help or advices.
Thank you in advance.

Hey guys.

I'm trying to make a sketch where some balls move, and there is connections drawing between them.
I feel like I succeed to do it, but It seems to me that each connection (lines) are displayed two times. One time with the good positionning, and a second time with the positionning of the previous frame or something like this.
Here I set a low framerate to show this.

I would greatly appreciate if someone could help me pointing out what is the problem.

1. final int objNB = 8;
2. final int circlesNB = 3;
3. int taillemax = 90;
4. int maxspeed = 5;
5. Circle[] circles = new Circle[objNB];
6. void setup()
7. {
8.   size(1024,576);
9.   background(0);
10.   smooth();
11.   frameRate(15);
12.   for(int i = 0;i<objNB;i++)
13.   {
14.     circles[i] = new Circle(random(taillemax-10,taillemax));
15.   }
16. }
17. class Circle
18. {
19.   float Xpos,Ypos;
20.   float Xspeed,Yspeed;
21.   float taille;
22.   float taille2;
23.   float taille3;
24.  
25.   Circle(float taillebase)
26.   {
27.     this(random(taillebase,width-taillebase),random(taillebase,height-taillebase),random(-maxspeed,maxspeed),random(-maxspeed,maxspeed),taillebase);
28.   }
29.   Circle(float x,float y, float sx, float sy, float r)
30.   {
31.     Xpos = x;
32.     Ypos = y;
33.     Xspeed = sx;
34.     Yspeed = sy;
35.     taille = r;
36.     taille2 = random(1,r);
37.     taille3 = random(1,r);
38.   }
39.  
40.   void drawlines()
41.   {
42.         for(int j=0; j<objNB; j++)
43.     {
44.      if (Xpos != circles[j].Xpos && Ypos != circles[j].Ypos){
45.      if (dist(Xpos,Ypos,circles[j].Xpos,circles[j].Ypos) < 350)
46.       {
47.        stroke(255,255,255);
48.        line(Xpos,Ypos,circles[j].Xpos,circles[j].Ypos);
49.       }
50.       }
51.     }
52.   }
53.   void move()
54.   {
55.     Xpos += Xspeed;
56.     if (Xpos < taille || Xpos > width - taille)
57.     {
58.       Xspeed = -Xspeed;
59.       Xpos += Xspeed;
60.     }
61.    
62.     Ypos += Yspeed;
63.     if (Ypos < taille || Ypos > height - taille)
64.     {
65.       Yspeed = -Yspeed;
66.       Ypos += Yspeed;
67.     }
68.   }
69.  
70.   void display()
71.   {
72.     noStroke();
73.     fill(255,255,255,20);
74.     ellipse(Xpos, Ypos, taille * 2, taille * 2);
75.     ellipse(Xpos, Ypos, taille2 * 2, taille2 * 2);
76.     ellipse(Xpos, Ypos, taille3 * 2, taille3 * 2);
77.   }
78. }
79.    
80. void draw()
81. {
82.   background(0);
83.   for(int i = 0;i<objNB;i++)
84.   {
85.     circles[i].drawlines();   
86.     circles[i].display();
87.     circles[i].move();
88.   }
89. }

Thank you in advance.