So übergeben Sie dynamische Parameter an die .pde-Datei

Question

Klasse Shape enthält zwei Methoden drawCircle() und drawTriangle(). Jede -Funktion benötigt unterschiedliche Argumente. Zur Zeit rufe ich diese auf, indem ich die PDE-Datei direkt aufruft. Wie übergebe ich diese Argumente direkt aus einer HTML-Datei, wenn ich die Argumente steuern muss, die an die Zeichenfunktion übergeben werden? 1) beispiel.html hat (aktuelle Version)

<script src="processing-1.0.0.min.js"></script> 
<canvas data-processing-sources="example.pde"></canvas> 

2) Example.pde hat

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); 

Ich suche etwas wie dies in meiner HTML-Datei zu tun, so dass ich bewegen alle Funktionen in eine separate Datei und rufen sie mit unterschiedliche Argumente unterschiedliche Formen zu zeichnen (viel ähnlich, wie Sie es in Java tun würde) 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 Example2.pde verwendet, hat

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

var processingInstance hat; processingInstance.rectangle (30, 20, 55, 55);

aber das funktioniert nicht. Wie diese Parameter dynamisch aus HTML übergeben werden.

Answer 1

Wenn Sie diese Variablen nur zur Ladezeit übergeben müssen, scheint es viel einfacher zu sein, Konfigurationsobjekte in JS zu erstellen, auf die Sie dann in Ihrem Verarbeitungscode zugreifen. Siehe Accessing Javascript Objects from Processing.

Zum Beispiel könnte Ihre JS wie folgt aussehen:

var shapes = [ 
    {shape:"circle", x:10, y:150, radius: 70} 
]; 

und in Ihrem Verarbeitungscode, können Sie die shapes Variable zugreifen:

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 
    } 
} 

Mein Eindruck ist, dass dies viel einfacher ist, als zu versuchen, um die Verarbeitungsinstanz tatsächlich über Javascript zu steuern.

Answer 2

Um zu erreichen, was Sie wollen, möchten Sie vielleicht versuchen:

// Assuming: <canvas id="internal" data-processing-sources="internal.pde"> 
instance = Processing.getInstanceById('internal'); 
instance.internalFunction(); // Call to internalFunction() inside internal.pde 

Answer 3

Sie können Daten auf Ihre Verarbeitung Instanz übergeben, indem ein Datenattribut des Canvas-Element verwendet wird.

Zum Beispiel, wenn Sie myvar wollen.Wert am Ende in der Instanz auf:

<canvas data-processing-myvar="value" data-processing-sources="/assets/mysketch.pde"></canvas> 

Sie diese Daten in Ihre Skizze zugreifen können durch den Aufruf:

var myVarInSketch = this.param('myvar');