Sketch using ArrayList won't display in JavaScript mode

ScoT5

Preface: I started learning processing ~ two months ago for a class. Prior to that, my only experience with code is HTML/CSS.

My problem is the sketch won't display in JS mode and it must also be hosted online. It works perfectly in java, just not JS. I have two questions: 1) is it possible to display this sketch in JS mode, and how? 2) how would I use an Array instead of an ArrayList? I suspect this might be the cause of the display problem

Code: http://jsfiddle.net/LbsHp/

 ArrayList<Relatives> points;
PImage worldmap; 
void setup() {
  size(1427, 628);
  worldmap = loadImage("worldmap.jpg");
  noStroke();
  smooth();
  points = new ArrayList<Relatives>();
  String a = ("Ft. Collins, CO. 4th gen: brother, me");
  String b = ("Burbank, CA. 3rd gen: father");
  String c = ("St Louis, MO. 2nd gen: grandma(ms)");
  String d = ("Miami, FL. 3rd gen: mother, uncle x 2");
  String e = ("Cincinatti, OH. 1st gen: great-grandma (ms)");
  String f = ("NYC, New York. 1st & 2nd gen: grandpa and great-grandma (ms)");
  String g = ("Ketchican, AK. 3rd gen: uncle (fs)");
  String h = ("Marshall, AR. 3rd gen: grandpa (fs)");
  String i = ("Sandy, Bedfordshire, England. 1st - 3rd gen: great-grandma, grandma, uncle (fs)");
  String j = ("Unknown, Russia. 4th gen: great-grandpa x 2 (ms)");



  points.add(new Relatives(235,181, a));
  points.add(new Relatives(175,208, b));
  points.add(new Relatives(293,193, c));
  points.add(new Relatives(317,243, d));
  points.add(new Relatives(318,183, e));
  points.add(new Relatives(361,175, f));
  points.add(new Relatives(191,103, g));
  points.add(new Relatives(309,197, h));
  points.add(new Relatives(643,125, i));
  points.add(new Relatives(774,111, j));

}

void draw() {
background(worldmap);
  for (Relatives ic : points) {
    ic.update();
    ic.display();
  }
}


class Relatives {
  int x, y, transparency;
  String text;

  Relatives(int x, int y, String text) {
    this.x = x;
    this.y = y;
    this.text = text;
  }

  void update() {
    if (dist(mouseX, mouseY, x, y) < 15 && transparency < 255) {
      transparency += 7;
    } else if (transparency > 0) {
      transparency -= 3;
    }
  }

 void display() {
    fill(0);
    ellipse(x, y, 10, 10);
    fill(0, transparency);
    text(text, x - 50, y - 20);

  } 
}

ScoT5

tidier code: http://jsfiddle.net/LbsHp/

GoToLoop

If you wanna have a well-formatted code here too, when posting, highlight it and hit CTRL+K! ;;)

GoToLoop

Well, I did some tweaks to your code. You gotta toggle some comments to make it work anywhere though: >:)

/* @pjs pauseOnBlur = "true"; 
 preload = "worldmap.jpg"; */

// forum.processing.org/two/discussion/989/
// sketch-using-arraylist-wont-display-in-javascript-mode

final static int NUM = 10, FPS = 10;
final Relatives[] dots = new Relatives[NUM];

final static String NAME = "worldmap.jpg";

PImage worldMap;

void setup() {
  size(1427, 628);
  frameRate(FPS);

  smooth();
  noStroke();

  worldMap = loadImage(NAME);

  final String[] txts = {
    "Ft. Collins, CO. 4th gen: brother, me", 
    "Burbank, CA. 3rd gen: father", 
    "St Louis, MO. 2nd gen: grandma(ms)", 
    "Miami, FL. 3rd gen: mother, uncle x 2", 
    "Cincinatti, OH. 1st gen: great-grandma (ms)", 
    "NYC, New York. 1st & 2nd gen: grandpa and great-grandma (ms)", 
    "Ketchican, AK. 3rd gen: uncle (fs)", 
    "Marshall, AR. 3rd gen: grandpa (fs)", 
    "Sandy, Bedfordshire, England. 1st - 3rd gen: great-grandma, grandma, uncle (fs)", 
    "Unknown, Russia. 4th gen: great-grandpa x 2 (ms)",
  };

  final short dotsX[] = {
    235, 175, 293, 317, 318, 361, 191, 309, 643, 774
  };

  final short dotsY[] = {
    181, 208, 193, 243, 183, 175, 103, 197, 125, 111
  };

  for (int i = 0; i != NUM; ++i)
    dots[i] = new Relatives(dotsX[i], dotsY[i], txts[i]);
}

void draw() {
  background(worldMap); // Java
  //image(worldMap, 0, 0) // JS fix
  //background(0300);     // W/o image

  for (Relatives d: dots) {       // Any other browser
    //for (int i = 0; i != NUM;) {      // Firefox fix
    //final Relatives d = dots[i++];  // Firefox fix

    d.update();
    d.display();
  }
}

class Relatives {
  final static short DIM = 10, RAD = DIM >> 1;
  final static short INC = 35, DEC = -10;

  final static short OFF_X = -50, OFF_Y = -20;
  final static color DOT_C = #800000, TXT_C = #0000F0;

  color opaque;

  final short  x, y;
  final String txt;

  Relatives(int xx, int yy, String ss) {
    x = (short) xx;
    y = (short) yy;

    txt = ss;
  }

  void update() {
    opaque += sq(mouseX - x) + sq(mouseY - y) < RAD*RAD? INC:DEC;
    opaque =  constrain(opaque, 0, 0xFF);
  }

  void display() {
    fill(DOT_C);
    ellipse(x, y, DIM, DIM);

    fill(TXT_C, opaque);
    text(txt, x + OFF_X, y + OFF_Y);
  }
}

GoToLoop

P.S.: Beware of creating variables w/ same name as functions! :O
In JS, functions are stored in variables. And creating a field like text would deconstruct text() there!!! b-(

ScoT5

wow you are awesome!

thanks so much for your help.