I've tried to optimize your code to the best of my knowledge. But failed!  

You can visit here to check how far I've got:
Ball-Maker Arm

Here's the tweaked code:

/***
 * Ball-Maker Arm (v2.75)
 * by Rondelle (2013/Jan)
 *
 * forum.processing.org/topic/issues-porting-a-processing-sketch-in-processing-js
 * studio.processingtogether.com/sp/pad/export/ro.93VCFUSEvr318/latest
 */

import processing.opengl.*;

final static byte  armSize = 75, addRatio = 1, fps = 30;
final static float xInc = .004f, yInc = .01f;
final static float FOUR_PI = 2f*TWO_PI;
final static color armColor = 0xC8FF0000, ballColor = 0x280000FF;
final static color bg = 0250;

float xOff, yOff;
boolean showInfo = true, showArm = true;

final static List<Ball> ball = new ArrayList(400);

class Ball {
  int x, y;
  final static byte fallSpd  = 1;
  final static byte ballSize = 10;

  Ball(float xInit, float yInit) {
    x = (int) xInit;
    y = (int) yInit;
  }

  boolean run() {
    ellipse(x, y, ballSize, ballSize);
    return (y += fallSpd) > height + ballSize;
  }
}

void setup() {
  size(500, 400, OPENGL);
  frameRate(fps);
  smooth();
}

void draw() {
  background(bg);

  pushMatrix();
  translate(width>>1, height>>1, 0);
  rotateZ( noise(xOff += xInc) * FOUR_PI );
  if (showArm) {
    stroke(armColor);
    line(0, 0, 0, armSize, 0, 0);
  }

  pushMatrix();
  translate(armSize, 0, 0);
  rotate( noise(yOff += yInc) * FOUR_PI );
  if (showArm)  line(0, 0, 0, armSize, 0, 0);

  translate(armSize, 0, 0);
  if (frameCount % addRatio == 0)
    ball.add(new Ball( modelX(0, 0, 0), modelY(0, 0, 0) ));

  popMatrix();
  popMatrix();

  setBallColors();

  for (int b=ball.size(); b!=0;)
    if ( ball.get(--b).run() )    ball.remove(b);

  if (showInfo)    infos();
}

void keyPressed() {
  if (keyCode == 'I')        showInfo = !showInfo;
  else if (keyCode == 'A')   showArm  = !showArm;
}

void infos() {
  fill(#006400);
  text("FPS:    " + round(frameRate), width-60, 20);
  text("Balls: "  + ball.size(), width-60, 40);
}

void setBallColors() {
  noStroke();
  fill(ballColor);
}

Thanks GoToLoop !
I'm looking at the tweaked code, and I'm trying to understand the changes ;)

This is not working properly yet, indeed. But thanks anyway
I'll see what I can do to make this work !

It seems the problem comes from the use of arrays, or array lists.
Really slow on processing.js.
I don't know how I can optimize this, neither if there is another way of doing it.

Maybe someone has a hint ;)

I changed my code thanks to GoToLoop work.
But this is still pretty slow.

1. import processing.opengl.*;
2. final static byte addRatio=1;
3. final static float xinc=0.009,yinc=0.01;
4. final static color c=color(0,0,255),C=color(255,0,0);
5. float xo,yo,n,m;
6. List<Ball> ball = new ArrayList();
7. class Ball{int x,y;final static byte vit=.5;
8. Ball(float X,float Y){x=(int)X;y=(int)Y;}
9. boolean run(){ellipse(x,y,10,10);return (y+=vit)>height+10;
10. }
11. }
12. void setup(){
13. size(400,400,OPENGL);
14. smooth(8);
15. frameRate(25);}
16. void draw(){
17. background(255); 
18. float n=noise(xo)*PI*4.00;xo+=xinc;
19. float m=noise(yo)*PI*4.00;yo+=yinc;
20. pushMatrix();
21. translate(width/2,height/2,0);
22. rotate(n);
23. stroke(255,0,0);
24. line(0,0,75,0,0);
25. pushMatrix();
26. translate(75,0,0);
27. rotate(m);
28. line(0,0,75,0,0);
29. translate(75,0,0);
30. noStroke();
31. fill(255,0,0);
32. if(frameCount%addRatio==0)ball.add(new Ball(modelX(0,0,0),modelY(0,0,0)));
33. popMatrix();
34. popMatrix();
35. for(int b=ball.size()-1;b>0;b--)if(ball.get(b).run()){ball.remove(b);}
36. }

In this latest version, it is using 2D engine instead.
However, it is now too fast, but jerky, when running on JavaScript!!!  

/**
 * Ball-Maker Arm (v3.10)
 * by Rondelle (2013/Jan)
 *
 * http://forum.processing.org/topic/issues-porting-a-processing-sketch-in-processing-js
 * http://studio.processingtogether.com/sp/pad/export/ro.93VCFUSEvr318/latest
 */

final static byte  armSize = 75, addRatio = 2, fps = 45;
final static float xInc = .009f, yInc = .01f;
final static float FOUR_PI  = 2f*TWO_PI;
final static color armColor = #FF0000, ballColor = 0x380000FF;
final static color bg = 0250;

float xo, yo;
boolean showInfo = true, showArm = true, showCoord = false;

final static List<Ball> ball = new ArrayList(400);

class Ball {
    int x;
    float y;
    final static float fallSpd  = .5f;
    final static byte  ballSize = 10;

    Ball(float xInit, float yInit) {
        x = (int) xInit;
        y = (int) yInit;

        if (showCoord)    println(x+"\t"+y);
    }

    boolean run() {
        ellipse(x, y, ballSize, ballSize);
        return (y += fallSpd) > height + ballSize;
    }
}

void setup() {
    size(400, 400);
    frameRate(fps);
    smooth();
}

void draw() {
    background(bg);

    pushMatrix();

    translate(width>>1, height>>1);
    rotate( noise(xo += xInc) * FOUR_PI );
    if (showArm) {
        stroke(armColor);
        line(0, 0, armSize, 0);
    }

    translate(armSize, 0);
    rotate( noise(yo += yInc) * FOUR_PI );
    if (showArm)  line(0, 0, armSize, 0);

    if (frameCount % addRatio == 0) {
        translate(armSize, 0);
        ball.add(new Ball( screenX(0, 0), screenY(0, 0) ));
    }

    popMatrix();

    initBallGraph();

    for (int b=ball.size(); b!=0;)
        if ( ball.get(--b).run() )    ball.remove(b);

    if (showInfo)    infos();
}

void keyPressed() {
    if (keyCode == 'I')        showInfo  = !showInfo;
    else if (keyCode == 'A')   showArm   = !showArm;
    else if (keyCode == 'C')   showCoord = !showCoord;
}

void infos() {
    fill(#006400);
    text("Balls: "  + ball.size(), width-70, 40);
    text("FPS:    " + round(frameRate), width-70, 20);
}

void initBallGraph() {
    noStroke();
    fill(ballColor);
}

Can I ask what version of Processing you guys are running?

I'm using Processing 2.0b7.  The latest code GoToLoop posted I had to add "import java.util.List;" to before it would run in Java-mode, and when I flipped accross to JavaScript-mode I don't think it got past the first frame before freezing.

The latest code Rondelle posted works nicely in JavaScript-mode but sometime during the port it seems to have lost it's Java-mode compatibility.

The stuff that does run all looks very impressive though, thanks :-)

For now, I'm using v1.5.1 exclusively!

The new 2.x series are in a Java feature-cutting overdrive mode!  
And most are being hard-coded, so no one can mend what is being done at all!

Problem is, in the name of canonizing the Processing "language", much of the smart code already available in v1.5.1, which is capable to translate most of the Java language into JavaScript, is being cutting off.

In short, it is being dumbing-down and getting more strict about the features which can be converted to JavaScript!  

What I meant by JavaScript is the Java source code translated into JavaScript via those code host sites.

You can check mine bugged-working below:

http://studio.processingtogether.com/sp/pad/export/ro.93VCFUSEvr318/latest

Yeah it seems porting a processing sketche on processing.js is not an easy task.

Your last code works really nicelly GoToLoop (there is still this kinda strange "line" of balls on the right).

I figured out that, in the previous version, using OPENGL, if the ellipses were replaced by points, the code would run really nicelly. But since there is no strokeCap function in pjs to make them round...

Also, using OPENGL was kind of a problem to me, due to the lack of cross platform compatibility.

So I tried something just a bit different, in 2D mode, using vectors (but it seems using screenX as you did is also a good idea).

Here the java version.

1. /**
    * Bot making lines
    * by Rondelle (2013/Jan)
    */
   

2. final static float xinc=0.01, yinc = 0.02;
3. float xo,yo;
4. List<Ball> ball = new ArrayList();
5. final static int addRatio=10;
6. class Ball{
7.   float x,y;
8.   final static float vit=.5;
9.   Ball(float X,float Y){
10.     x=X;y=Y;
11.   }
12.   boolean run(){
13.     return (y+=vit)>3*height/2+150;
14.   }
15. }
16. void setup() {
17.   size(800,600);
18.   smooth();
19.   noFill();
20.   strokeWeight(0.5);
21. }
22.  
23. void draw() {
24.   background(255);
25.   xo += xinc;
26.   yo += yinc;
27.   float n=noise(xo);
28.   float m=noise(yo);
29.   background(255);
30.  
31.   stroke(255,0,0);
32.   PVector v1 = new PVector(0, -75);
33.   PVector v2 = new PVector(0, -75);
34.   v1.rotate(n * TWO_PI - PI);
35.   v2.rotate(m * TWO_PI - PI);
36.   line(width/2,height/2,width/2 + v1.x,height/2 + v1.y);
37.   line(width/2 + v1.x,height/2 + v1.y,width/2 + v1.x + v2.x,height/2 + v1.y + v2.y);
38.  
39. if(frameCount%addRatio==0)ball.add(new Ball(width/2 + v1.x + v2.x,height/2 + v1.y + v2.y));
40.  
41. stroke(0);
42. beginShape();
43. for(int b=ball.size()-1;b>0;b--)
44. {
45. if(ball.get(b).run()){ball.remove(b);}
46. vertex(ball.get(b).x,ball.get(b).y);
47. }
48. endShape();
49. }

Now I have to bypass the rotate vector function, not available in pjs.
This is not optimized yet.

Yay !
Made this work in pjs.

Demo here

Here is the new code :

1. final static float xinc=0.005, yinc = 0.01;
2. float xo,yo;
3. List<Ball> ball = new ArrayList();
4. final static int addRatio=10;
5. class Ball{float x,y;final static float vit=.5;
6. Ball(float X,float Y){x=X;y=Y;}
7. boolean run(){return(y+=vit)>3*height/2+150;}}
8. void setup() {
9.   size(window.innerWidth, window.innerHeight);
10.   smooth();
11.   noFill();
12.   strokeWeight(0.5);
13. }
14.  
15. void draw() {
16. background(255);
17. xo += xinc;
18. yo += yinc;
19. float n=noise(xo);
20. float m=noise(yo);
21. background(255);
22.  
23. stroke(255,0,0);
24. PVector v1 = new PVector(0, -75);
25. PVector v2 = new PVector(0, -75);
26. rotateV(v1,n * 2 * TWO_PI );
27. rotateV(v2,m * 2 * TWO_PI );
28. line(width/2,height/2,width/2 + v1.x,height/2 + v1.y);
29. line(width/2 + v1.x,height/2 + v1.y,width/2 + v1.x + v2.x,height/2 + v1.y + v2.y);
30.  
31. if(frameCount%addRatio==0)ball.add(new Ball(width/2 + v1.x + v2.x,height/2 + v1.y + v2.y));
32.  
33. stroke(0);
34. beginShape();
35. for(int b=ball.size()-1;b>0;b--)
36. {if(ball.get(b).run()){ball.remove(b);}vertex(ball.get(b).x,ball.get(b).y);}
37. endShape();
38. }
39. float heading(PVector vector){return atan2(vector.y,vector.x);}
40. void rotateV(PVector vector, float ang){
41. float oldAng = heading(vector);
42. float newAng = oldAng + ang;
43. float r = vector.mag();
44. float x = r * cos(newAng);
45. float y = r * sin(newAng);
46. vector.set(x, y, 0);
47. }

Now I'd like to implement a function for the user to be able to save a frame (that would be opened in a new window).