从 Processing3.4 插入 HTML (java)

Question

我目前正在学习使用代码 (Java) 制作 'art' 的处理。但是，我现在正努力将此 .pde 插入网页。

我在网上搜索过，但似乎找不到。

如何将导出的 .pde 文件插入我的 HTML。
还有其他解决办法吗？随时欢迎任何提示！

。

static final int NUM_LINES = 10;

float t;                           // variable

void setup() {                    //Make
  background (20);
  size(500, 500);
}

void draw(){                    //Draw
  background(20);
  stroke(255);
  strokeWeight(5);

  translate(width/2, height/2);   //center point


  for (int i = 0; i < NUM_LINES; i++) {
    line(x1(t + i), y1(t + i), x2(t + i), y2(t + i));              //drawing line
  }
  t+= 0.5;                                           //increment T 
}

float x1(float t) {
  return sin(t / 10) * 100 + sin(t / 15) * 100;
}

float y1(float t){
  return cos(t / 10) * 100;
}

float x2(float t) {
  return sin(t / 10) * 100 + sin(t / 15) * 100;
}

float y2(float t){
  return cos(t / 20) * 100 + cos (t / 12) * 20;
}

谢谢大家！

Answer 1

简短回答：您需要 processing.js 将 Java pde 文件包含在 HTML 中。

背景：Processing基于编程语言Java。基本上，您不能（或不再应该）尝试在浏览器中使用 Java。这可能是由于使用了一个名为 Applet 的 class。但不推荐也不支持处理了。

解决方案：如果想在浏览器中使用处理行为，请参考Java基于脚本的实现-ProcessingJS http://processingjs.org/

这里是他们页面的摘录：http://processingjs.org/articles/jsQuickStart.html#whyprocessingjs

Processing.js was originally created in order to allow existing Processing developers and existing Processing code (often referred to as sketches) to work unmodified on the web. As a result, the recommend way to use Processing.js is to write Processing code, and have Processing.js convert it to JavaScript before running it.

它提供了多种方式来获取 Web 的处理功能。您可能会在此处找到此选项 http://processingjs.org/articles/jsQuickStart.html#waystouseprocessingjs

对于您的特殊情况，您可以在此处找到一个快速入门部分。主要是，您需要包括 processing.js 库和包含您的 pde 的 canvas - 更多信息可以在 Quickstart Guide:

中找到

<script src="processing-1.0.0.min.js"></script>
<canvas data-processing-sources="<your-pde-file>.pde"></canvas>

HTH，萨宾

从 Processing3.4 插入 HTML (java)

inserting from Processing3.4 into HTML (java)

html

java

processing