如何在浏览器中运行 Processing+Twitter4j sketch

我是一个练习处理的新手程序员，我最近开发了一个使用Twitter4j的草图。当我从处理开发环境以 Java 模式运行草图时，它运行良好。此外，当我从 Java 模式导出草图时，生成的应用程序可以完美运行。但是，当我切换到JavaScript模式并尝试运行草图时，浏览器预览不会显示任何内容。

我相信这个问题与 Twitter4j 有关，因为当我从草图中删除与 Twitter4j 相关的代码并运行它（在 JavaScript 模式下）时，浏览器预览会显示处理视觉效果。

了几天，但找不到足够的答案。我遇到过解决相关问题的帖子，但答案只涉及"签署JAR文件"之类的术语（我认为，仅与Java模式相关），或者只阐明了在浏览器上运行JavaScript模式处理草图的问题 - 不包括涉及使用Twitter4j的草图。

我在下面包含了我整个代码的副本，非常感谢一个分步的答案，迎合新手。如果可能的话，我正在寻找一个解释，如果可能的话，让我的JavaScript模式导出的Processing + Twitter4j草图在HTML/我的网站中运行。

感谢您的时间和技能。我在这篇文章的末尾加入了一些关于代码的注释。

import twitter4j.conf.*;
import twitter4j.*;
import twitter4j.auth.*;
import twitter4j.api.*;
import java.util.*;
Twitter twitter;
String searchString = "#brokendreams";
List<Status> tweets;
int currentTweet;
PFont f;
int amount1 = 300;
Star[] meteors = new Star[45];
StarDust[] sprinkle = {};
String chatter;
void setup() {
  size(800,600);
  f = createFont("Tahoma", 13, true);
  textFont(f, 13);
  ConfigurationBuilder cb = new ConfigurationBuilder();
  cb.setOAuthConsumerKey("---");
  cb.setOAuthConsumerSecret("---");
  cb.setOAuthAccessToken("---");
  cb.setOAuthAccessTokenSecret("---");
  TwitterFactory tf = new TwitterFactory(cb.build());
  twitter = tf.getInstance();
  getNewTweets();
  currentTweet = 0;
  dustField();
  Status status = tweets.get(currentTweet);
  for (int j = 0; j < meteors.length; j++) {
    meteors[j] = new Star(chatterText());
  }
}
void draw() {
  background(0, 35, 0);
  for (int i = 0; i < sprinkle.length; i++) {
    StarDust dust = sprinkle[i];
    dust.move();
  }
  for (int j = 0; j < meteors.length; j++) {
    meteors[j].appear();
    meteors[j].randomOrbit();
  }
  chatterText();
}
void dustField() {
  for (int i = 0; i < amount1; i++) {
    StarDust dust = new StarDust();
    dust.swish();
    sprinkle = (StarDust[])append(sprinkle, dust);
  }
}
String chatterText() {
  currentTweet += 1;
  if (currentTweet >= tweets.size()) {
    currentTweet = 0;
  }
  Status status = tweets.get(currentTweet);
  chatter = status.getText();
  return chatter;
}
void getNewTweets() {
    try {
      Query query = new Query(searchString);
      QueryResult result = twitter.search(query);
      tweets = result.getTweets();
    } catch (TwitterException te) {
      System.out.println("Failed to search tweets: " + te.getMessage());
      System.exit(-1);
    } 
}
void refreshTweets() {
  while (true) {
    getNewTweets();
    println("Updated Tweets"); 
    delay(30000);
  }
}
class Star {
  float x, y;
  float xmove, ymove;
  float radius;
  color linecol, fillcol;
  float alpha;
  String msg;
  float frag1, frag2, frag3, frag4;
  Status status;
  Star(String message) {
    msg = message;
    x = random(width);
    y = random(height);
    radius = random(20, 60) + 10;
    linecol = color(random(255), random(255), random(255));
    fillcol = color(random(255), random(255), random(255));
    alpha = random(200);
    xmove = sin(random(2) / 2);
    ymove = sin(random(2) / 2);
    frag1 = random(radius/5);
    frag2 = random(radius/3);
    frag3 = random(radius/4);
    frag4 = random(radius/2);
  }
  void appear() {
    if (mouseX > x-(radius/2) && mouseX < x+(radius/2) && mouseY > y-(radius/2) && mouseY < y+(radius/2)) {
      strokeWeight(1);
      stroke(linecol);
      noFill();
      ellipse(x, y, radius, radius);
    } else {
      noStroke();
      fill(fillcol, alpha);
      ellipse(x, y, radius, radius);
    }
    fill(fillcol);
    noStroke();
    beginShape();
    vertex(x - (radius/3), y + frag1 - frag2);
    vertex(x, y - (radius/3));
    vertex(x, y);
    endShape(CLOSE);
    fill(linecol, alpha);
    beginShape();
    vertex(x, y);
    vertex(x, y - (radius/3));
    vertex(x + (radius/4), y - frag3 - frag4);
    vertex(x + (radius/3), y + frag1 - frag2);
    endShape(CLOSE);
    fill(fillcol);
    beginShape();
    vertex(x, y);
    vertex(x + (radius/3), y + frag1 - frag2);
    vertex(x + (radius/4), y + frag3);
    endShape(CLOSE);
    fill(linecol, alpha);
    beginShape();
    vertex(x, y);
    vertex(x + (radius/4), y + frag3);
    vertex(x + (radius/5), y + frag2);
    vertex(x, y + (radius/3));
    vertex(x - (radius/3), y + frag1 - frag2);
    endShape(CLOSE);
  }
  void randomOrbit() {
    x += xmove;
    y += ymove;
    if (x > (width + radius)) { x = 0 - radius; }
    if (x < (0 - radius)) { x = width + radius; }
    if (y > (height + radius)) { y = 0 - radius; }
    if (y < (0 - radius)) { y = height + radius; }
    appear();
    displayTweet();
  }
  void displayTweet() {
    if (mouseX > x-(radius/2) && mouseX < x+(radius/2) && mouseY > y-(radius/2) && mouseY < y+(radius/2) && mousePressed) {
      x = mouseX;
      y = mouseY;
      fill(255);
      text(msg, mouseX + 30, mouseY, 200, 200);
      mouseReleased();
    }
  }
  void mouseReleased() {alpha = 80;}
}
class StarDust {
  float x, y;
  float xmove, ymove;
  float radius;
  float alpha, beta;
  Status status;
  StarDust() {
    x = random(width);
    y = random(height);
    radius = random(2, 4);
    alpha = random(255);
    beta = random(155);
    xmove = random(1.9) - 0.9;
    ymove = random(1.9) - 0.9;
  }
  void flipColor() {
      fill(random(255), random(255), random(255), beta);
      stroke(random(255), random(255), random(255), beta);
  }
  void swish() {
    flipColor();
    rect(x, y, radius, radius);
  }
  void move() {
    swish();
    x += xmove;
    y += ymove;
    if (x > (width + radius)) { x = 0 - radius; }
    if (x < (0 - radius)) { x = width + radius; }
    if (y > (height + radius)) { y = 0 - radius; }
    if (y < (0 - radius)) { y = height + radius; }
    squarespray(xmove);
  }
  void squarespray(float spray) {
    stroke(random(175, 255), random(255), 0, alpha);
    strokeWeight(random(7));
    point(x + random(radius), y + random(spray));
    point(y + sin(spray) * radius, x - spray);
    point(random(spray) - 60 + y, random(radius) + x - 30);
  }
}

-对不起，我没有发表评论。这是我仍在努力养成的习惯。但是，我不相信在涉及Twitter4j的主线之后，任何事情都是相关的。

-在上面的代码中，"---"是我的键的替代品。

-这是代码，否则与我从JavaScript模式导出并想从浏览器运行的代码完全相同。

-我以前在我的网站上运行过处理草图;这是第一个涉及Twitter4j的草图。