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.