How to pass dynamic parameters to .pde file
- by Kalpana
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.
