Como executar o esboço do Processing + Twitter4j no broswer

Sou um programador iniciante praticando Processing e desenvolvi recentemente um esboço que usa o Twitter4j. Quando executo o esboço no modo Java no Processing Development Environment, ele funciona perfeitamente. Além disso, quando exporto o esboço do modo Java, o aplicativo resultante é executado perfeitamente. No entanto, quando mudo para o modo JavaScript e tento executar o esboço, a visualização do navegador não exibe nada.

Acredito que o problema esteja relacionado ao Twitter4j porque, quando removo o código relacionado ao Twitter4j do esboço e o executo (no modo JavaScript), a visualização do navegador exibe os visuais de processamento.

Estou procurando uma solução para isso agora há várias horas, abrangendo vários dias, mas não consigo encontrar uma resposta adequada. Eu me deparei com postagens abordando questões relacionadas, mas as respostas envolvem apenas termos como "assinar o arquivo JAR" (relacionado, eu acho, apenas ao modo Java) ou apenas lançamos luz sobre problemas na execução de Processando esboços no modo JavaScript no navegador -excluindo esboços que envolvem o uso do Twitter4j.

Incluí uma cópia de todo o meu código abaixo e gostaria muito de receber uma resposta passo a passo, atendendo a um novato. Estou procurando uma explicação do que é necessário, se possível, para que meu esboço Processando + Twitter4j exportado no modo JavaScript seja executado em HTML / meu site.

Obrigado pelo seu tempo e suas habilidades. Incluí algumas notas no código no final deste post.

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);
  }

}

-Desculpe, eu não comentei. Este é um hábito que ainda estou trabalhando no desenvolvimento. No entanto, não acredito que nada seja relevante após as principais linhas que envolvem o Twitter4j.

-No código acima, "---" é um substituto para minhas chaves.

-Este é o código exatamente como eu o exportei do modo JavaScript e gostaria de executar no meu navegador.

-Eu executei Processando esboços no meu site antes; este é o primeiro envolvendo o Twitter4j.

questionAnswers(1)

yourAnswerToTheQuestion