How to pass dynamic parameters to .pde file
Posted
by
Kalpana
on Stack Overflow
See other posts from Stack Overflow
or by Kalpana
Published on 2010-12-21T04:49:44Z
Indexed on
2011/01/03
4:53 UTC
Read the original article
Hit count: 288
JavaScript
|processing.js
class Shape contains two methods drawCircle() and drawTriangle(). Each function takes different set of arguments. At present, I invoke this by calling the pde file directly. How to pass these arguments from a HTML file directly if I have to control the arguments being passed to the draw function? 1) Example.html has (current version)
<script src="processing-1.0.0.min.js"></script>
<canvas data-processing-sources="example.pde"></canvas>
2) Example.pde has
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);
I am looking to do something like this in my HTML file, so that I can move all the functions into a separate file and call them with different arguments to draw different shapes (much similar to how you would do it in Java) A.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) Iam using Example2.pde has
void setup() {
size(200,200);
background(125);
fill(255);
}
void rectangle(int x1, int y1, int x2, int y2) {
rect(x1, y1, x2, y2);
}
My Example2.html has
var processingInstance; processingInstance.rectangle(30, 20, 55, 55);but this is not working. How to pass these parameters dynamically from html.
© Stack Overflow or respective owner