如何将动态参数传递给 .pde 文件答案

【问题标题】：How to pass dynamic parameters to .pde file如何将动态参数传递给 .pde 文件
【发布时间】：2010-12-21 04:49:44
【问题描述】：

Shape 类包含两个方法 drawCircle() 和 drawTriangle()。每个函数采用不同的参数集。目前，我调用这个通过直接调用 pde 文件。如何从如果我必须控制传递给的参数，则直接使用 HTML 文件绘图功能？ 1) Example.html 有（当前版本）

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

2) Example.pde 有

    class Shape { 
         void drawCircle(intx, int y, int radius) { 
              ellipse(x, y, radius, radius); 
        } 
         void drawTriangle(int x1, int y1, int x2, int y2, int x3, int 
y3) { 
              rect(x1, y1, x2, y2, x3, y3); 
        } 
    } 
    Shape shape = new Shape(); 
   shape.drawCircle(10, 40, 70);

我希望在我的 HTML 文件中做这样的事情，这样我就可以将所有函数移动到一个单独的文件中并调用它们不同的参数来绘制不同的形状（非常类似于你如何会用Java做）一个.html

<script> 
Shape shape = new Shape(); 
shape.drawCircle(10, 10, 3); 
</script>

B.html

<script> 
Shape shape = new Shape(); 
shape.drawTriangle(30, 75, 58, 20, 86, 75); 
</script>

2) 我使用 Example2.pde 有

void setup()  {  
  size(200,200);  
  background(125);  
  fill(255); 
}

  void rectangle(int x1, int y1, int x2, int y2) {
          rect(x1, y1, x2, y2);
}

我的 Example2.html 有

var 处理实例； processingInstance.rectangle(30, 20, 55, 55);

但这不起作用。如何从 html 动态传递这些参数。

【问题讨论】：

提前声明您正在使用 processing.js 可能是值得的

标签： javascript processing.js

【解决方案1】：

您可以使用 canvas 元素的数据属性将数据传递给您的处理实例。

例如，如果您希望 myvar.value 在实例中结束：

<canvas data-processing-myvar="value" data-processing-sources="/assets/mysketch.pde"></canvas>

您可以通过调用在您的草图中访问这些数据：

var myVarInSketch = this.param('myvar');

【讨论】：

【解决方案2】：

如果您只需要在加载时传入这些变量，那么在 JS 中创建配置对象然后在处理代码中访问似乎会容易得多。见Accessing Javascript Objects from Processing。

例如，您的 JS 可能如下所示：

var shapes = [
    {shape:"circle", x:10, y:150, radius: 70}
];

在您的处理代码中，您可以访问shapes 变量：

void draw() {
    shape = new Shape();
    fill(0);
    for (int i=0; i<shapes.length; i++) {
        if (shapes[i].shape=="circle") {
            shape.drawCircle(shapes[i].x, shapes[i].y, shapes[i].radius);
        }
        // etc  
    }
}

我的印象是，这比尝试从 javascript 实际控制处理实例要容易得多。

【讨论】：

【解决方案3】：

为了完成你想要的，你可能想尝试一下：

// Assuming: <canvas id="internal" data-processing-sources="internal.pde">
instance = Processing.getInstanceById('internal');
instance.internalFunction(); // Call to internalFunction() inside internal.pde

【讨论】：