时间戳

首页 > 解决方案 > 从 Processing3.4 插入 HTML (java)

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

问题描述

我目前正在学习处理以使用代码（Java）制作“艺术”。但是，我现在正在努力将此 .pde 插入网页。

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

.

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

多谢你们！

标签： javahtmlprocessing

解决方案

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

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

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

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

Processing.js 最初是为了让现有的 Processing 开发人员和现有的 Processing 代码（通常称为草图）在 Web 上不加修改地工作而创建的。因此，使用 Processing.js 的推荐方法是编写处理代码，并在运行前让 Processing.js 将其转换为 JavaScript。

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

对于您的特殊情况，您可以在此处找到快速入门部分。主要是，您需要包含 processing.js 库和包含您的 pde 的画布 - 可以在快速入门指南中找到更多信息：

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

HTH，萨宾

推荐阅读