如何将动态参数传递给.pde文件
问题描述:
class Shape包含两个方法drawCircle()和drawTriangle()。每个 函数都有不同的参数集。目前,我通过直接调用pde文件来调用这个 。如果我必须控制传递给 draw函数的参数,如何直接从 HTML文件传递这些参数? 1)example.html的有(当前版本)如何将动态参数传递给.pde文件
<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中) A.html
使用Example2.pde 0B.html
<script>
Shape shape = new Shape();
shape.drawTriangle(30, 75, 58, 20, 86, 75);
</script>
2)IAM的具有
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具有
变种processingInstance; processingInstance.rectangle(30,20,55,55);但这是行不通的。如何从html动态传递这些参数。
答
如果您只需要在加载时传递这些变量,那么在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中实际控制处理实例。
答
为了完成你想要什么,你可能会想尝试:
// Assuming: <canvas id="internal" data-processing-sources="internal.pde">
instance = Processing.getInstanceById('internal');
instance.internalFunction(); // Call to internalFunction() inside internal.pde
答
您可以通过canvas元素的数据属性数据传递到处理实例。
例如,如果你想要myvar。价值最终在该实例:
var myVarInSketch = this.param('myvar');
这可能是值得说明的前期您使用processing.js:
你可以通过调用访问您的草图这个数据 – maxedison 2011-02-15 19:56:42