java - 从Processing3.4插入HTML(java)

Question

我目前正在学习使用代码(Java)制作“艺术”的处理。但是我现在正在努力将此 .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 中。

背景:处理基于编程语言Java。基本上，您不能(或不应再)尝试在浏览器中使用 Java。这可能是由于使用了一个名为 Applet 的类而实现的。但不推荐也不支持处理。

解决方案:如果你想在网页浏览器中使用处理行为，请引用基于JavaScript的实现-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.

它提供了多种在网络上获取处理功能的方法。您可能会在这里找到描述的选项 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，萨宾