处理脚本无法作为 javascript 运行答案

【问题标题】：Processing script fails to run as javascript处理脚本无法作为 javascript 运行
【发布时间】：2012-12-05 03:57:05
【问题描述】：

一个相对简单的处理脚本在 2.0 IDE 的 Javascript 模式和浏览器（通过 Processing.JS）中都失败了，原因未知。我很确定同样的问题是停止这两种方法。我已经隔离了一条导致失败的线路，并在以下页面中进行了说明：

Test1.html 是有效的项目脚本的精简版
Test2.html 演示了 Test1 在调用单个额外命令时如何失败（第 93 行），尽管它在 IDE 的 Java 模式下工作正常。违规行仅试图重新打印已经在void setup(){} 中成功打印的信息，因此我很困惑。

所有脚本都可以查看here，但Test2.pde 中的关键行位于void drawLinks()。

知道是什么原因造成的吗？我现在在这上面浪费了这么多时间！只需将Test2.pde script 复制/粘贴到新的 Processing 2.0 IDE 中，即可在 Java 和 Javascript 模式下使用它..

【问题讨论】：

请原谅我不熟悉处理，但这不是有效的 JavaScript。你究竟是如何在 Chrome 中运行它的？您在浏览器的控制台中究竟遇到了什么错误？
试试 ProcessingJS。我至少觉得 ProcessingJS 在呈现 Processing 时给人一种更好、更嵌入的感觉。
请参阅上述问题中的更新部分。我已更改为 ProcessingJS 并提供了示例。
就在您遇到问题的地方，您使用了一些新的 for 循环表示法，尝试将其更改为对 ArrayList 进行更传统的迭代。所以代替 (N el:al) 尝试使用迭代器 Iterator itr = al.iterator(); while (itr.hasNext()) { //dosomething }
不错的想法 olovholm 但遗憾的是没有运气。请参阅test1.geotheory.co.uk/Test3.html 及其代码 (test1.geotheory.co.uk/Test3.pde)。但是，此方法在 Java 模式下确实有效。

标签： processing processing.js

【解决方案1】：

如果您在 Processing IDE 中创建了代码，则不能直接在 Web 浏览器中使用，要在 Web 浏览器中运行脚本，您主要有两种选择：

A) 您可以从 Processing 中导出 java-applet。然后可以将其嵌入到您的网页中。这会将文件视为 java-applet，因此即使它可以工作，也可能不是优雅的解决方案。

B) ProcessingJS 正在读取处理文件并将它们作为本机 javascript 在 Web 浏览器中运行。您下载 JS 库并创建一个文件来导入它并指向处理源文件，然后在本机 javascript 中对其进行解析和绘制。

【讨论】：

请参阅上述问题中的更新部分。我已更改为 ProcessingJS 并提供了示例。

【解决方案2】：

ProcessingJS 的 ArrayList 版本似乎有问题。虽然它是specified properly，但构造函数中似乎存在一个错误，它接受了一个 initialCapacity。最近的错误报告also shows this。

tl;dr：从第 65 行创建的 arrayList 中删除变量 n，

this.links = new ArrayList<Link>(n);

应该变成：

this.links = new ArrayList<Link>();

【讨论】：

万岁！！就是这样。我一直包含 initialCapacity 规范，因为我理解它优化了内存使用。谢谢佩特罗斯（巴特利特研究生）你得到了赏金:)
对此的附加评论：ArrayList 容器的整个想法是它是动态调整大小的。没有理由使用初始大小参数来构造它。

【解决方案3】：

我发现，当使用带有 processing.js 的 OOP 时，您必须在所有实例变量前面加上 this. 才能使其正常工作，尤其是当此类对象在 array 或 ArrayList 中实例化时。您将需要对所有构造函数和方法进行此修改。

例如：

class Route {
  ArrayList<Integer> cities;
  float distance;

  Route(ArrayList CITIES, float DISTANCE) {
    this.cities = CITIES;
    this.distance = DISTANCE;
  }
}

如需实时示例，请查看我的interactive resume 源中的.pde linked。

修改后的代码仍将在处理中执行：Java / 标准模式，但变得过于冗长。我通常只在我将项目移植到 processing.js 或希望有一个在标准/Java 和 JavaScript (processing.js) 模式下工作的项目时才进行此更改。

【讨论】：

请参阅上述问题中的更新部分。我已更改为 ProcessingJS 并提供了示例。 “这个”。提示似乎无法解决任何问题。