Как передать динамические параметры в файл .pde

класс 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) 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) Я использую 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; processingInstance.rectangle (30, 20, 55, 55);

but this is not working. How to pass these parameters dynamically from html.