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

Question

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

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

我已经花了几天时间寻找解决方案，但我找不到足够的答案。我遇到过解决相关问题的帖子，但答案仅涉及“签署 JAR 文件”(我认为仅与 Java 模式相关)之类的术语，或者仅揭示了在浏览器上以 JavaScript 模式运行处理草图的问题-- 排除涉及使用 Twitter4j 的草图。

我在下面包含了整个代码的副本，并且非常感谢您提供逐步的答案，以满足新手的需求。我正在寻找解释，如果可能的话，如何才能让我的 JavaScript 模式导出处理 + 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 的主线之后没有任何相关内容。

-在上面的代码中，“---”是我的 key 的替代品。

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

-我之前在我的网站上运行过处理草图；这是第一次涉及 Twitter4j。​​

Answer 1

您的评论是正确的:您的草图无法在 JavaScript 模式下工作，因为您正在使用 Java 库。只要您依赖 Java 库，您的代码就只能在 Java 模式下运行。您可能需要检查 JavaScript 控制台中的错误消息。

要解决此问题，您可以尝试寻找等效的 JavaScript 库并使用它来代替 twitter4j。然后你的代码就可以在 JavaScript 模式下工作了。这可能是正确的做法。

我这么说的原因是让 Java 应用程序在浏览器中运行是一件非常痛苦的事情。您必须创建一个小程序，然后使用付费证书对 jar 进行签名，或者让您的用户修改他们的 Java 安全设置 - 即使这样，您的用户在运行您的小程序之前也会收到一堆安全警告和提示.

您最好要么部署为可运行的 jar 或特定于平台的可执行文件，要么通过查找等效的 JavaScript 库完全切换到 JavaScript 模式。