Responsive Processing js

Um einen Processing js Sketch auch im Sinne von Responsive Webdesign nutzen zu können, eignet sich am besten der Einsatz von jQuery. Hierzu sind nur wenige Anpassungen im HTML-Code und im Processing-Sketch nötig. Zum einen muss dieser um eine Methode zur Größenveränderung (resizeSketch()) erweitert werden, der die jQuery-Methoden width() und height() nutzt, zum anderen wird im HTML-Dokument mit resize() ein event handler eingebaut, der resizeSketch() bei einer Veränderung der Größe des genutzten canvas-Elements aufruft.

1. jQuery Library einbinden

Falls nicht bereits geschehen, so muss zunächst jQuery im head des HTML-Dokuments eingebunden werden. Verwendet man HTML5, so kann auf die Angabe des MIME-Typs (Attribut type) verzichtet werden. Um den Traffic auf dem eigenen Server möglichst gering zu halten, empfiehlt es sich die Google Hosted Libraries zu nutzen:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Möchte man sich nicht allein auf die Erreichbarkeit dieses Services verlassen, so gibt es auch die Möglichkeit einer Fallback-Lösung, aber das würde hier nun zu weit führen. Mehr Infos sind bei stackoverflow.com zu finden.

2. Referenz zum Processing sketch finden

Um später auf Methoden unseres Sketches zugreifen zu können, wird die Referenz zur Instanz des Processing Sketches benötigt. Glücklicherweise beinhaltet Processing js die Funktion getInstanceById(), die genau diese bei Aufruf wiedergibt. Das folgende JavaScript, das sich im HTML-Dokument befinden muss, wird das Ergebnis in der Variable pjs gespeichert:

<script>
  var pjs;

  $(document).ready(function() {
    getPjsInstance();
  });

  function getPjsInstance() {
    pjs = Processing.getInstanceById('mycanvas');
    if(pjs == null)
      setTimeout(getPjsInstance, 250);
  }
</script>

Die ready()-Funktion in Zeile 4 wird aufgerufen, wenn das HTML-Dokument vollständig gerendert wurde. Diese ruft die in Zeile 8 definierte Funktion getPjsInstance() auf. Diese versucht zunächst die Referenz zur Instanz des Processing Sketches, der im canvas Element der ID ‚mycanvas‚ genutzt wird, zuzuweisen (Zeile 9).

Falls die Referenzierung im ersten Anlauf nicht geklappt hat, was aufgrund der Größe der Processing js Bibliothek durchaus der Fall sein kann, wird dies in Zeile 11 nach 250 Millisekunden erneut versucht. Um sicher zu sein, dass die Referenzierung geklappt hat, wird dies solange wiederholt, bis die Variable pjs ungleich null ist.

Nun wurden alle Voraussetzungen geschaffen, um die Funktionen des im canvas Element der ID ‚mycanvas‚ Processing Sketches aufrufen zu können.

3. resizeSketch()

public void resizeSketch(){
  size($('#mycanvas').width(), $('#mycanvas').height());
}

4. jQuery II

<script>
  $(window).resize(function(){
    $("#mycanvas").css("width", "600px");
    pjs.resizeSketch();
  });
</script>

Verweise

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.