image image


Worknote: Zwei Canvases auf einer HTML-Seite mit P5.js

Gestern fragte mich ein Freund, der meine Begeisterung für Processing.py und P5.js kennt, wie man denn mit P5.js zwei unabhängige Canvases auf einer HTML-Seite realisieren kann. Ich dachte, daß dies eigentlich ziemlich einfach sein müßte, doch mein erster Ansatz schlug fehl – was vor allem daran lag, daß die Form der Objektbehandlung in JavaScript einem doch ziemlich fremd vorkommt, wenn man eher mit Python oder Ruby vertraut ist. Also habe ich ein wenig gegoogelt und diese Lösung gefunden, die mir sagte, daß ich gar nicht mal so falsch lag, nur die Kapselung der Objekte hatte ich anders und damit falsch implementiert. Aber hier erst einmal der erste Canvas,

der einfach ein rotes Quadrat auf schwarzem Grund von rechts nach links bewegt. Der zweite Canvas hingegen

zeigt einen blauen Kreis vor einem grauen Hintergrund, der sich von links nach rechts über den Canvas schiebt. Realisiert habe ich das dann mit diesem kleinen P5.js-Skript:

// Canvas One
var s = function( p ) { // p could be any variable name
  var x = 100; 
  var y = 100;
  var speed = 2.0;
  p.setup = function() {
    p.createCanvas(400, 200);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255, 0, 0);
	x -= speed;
	if (x <= 0) {
		x = p.width;
	}
    p.rect(x,y,50,50);
  };
};
var myp5 = new p5(s, 'mc1');

// Canvas Two
var t = function( p ) { 
  var x = 100.0; 
  var y = 100; 
  var speed = 2.5; 
  p.setup = function() {
    p.createCanvas(400, 200);
  };

  p.draw = function() {
    p.background(100);
    p.fill(0, 0, 255);
    x += speed; 
    if(x > p.width){
      x = 0; 
    }
    p.ellipse(x,y,50,50);

  };
};
var myp5 = new p5(t, 'mc2');

Jeder Canvas ist als ein eigenes Objekt (s und t) realisiert. Wichtig ist einfach nur die Zeile unter den jeweiligen Objekt-Deklarationen, die den Objekten je einen eignen Canvas-Identifier (mc1 und mc2) zuteilt. damit die vom Skript auch gefunden werden, müssen auf der Website an beliebiger Position zweimal je ein div angelegt werden, das die entsprechenden ids enthält, also

<div id="mc1"></div>
<div id="mc2"></div>

Genau so habe ich das auch auf dieser Seite eingebunden und wie man P5.js mit RubyFrontier, habe ich in einer Worknote hier erklärt.

Caveat

Ich bin mir allerdings nicht sicher, wie sinnvoll es ist, mehr als einen Canvas auf einer Seite zu implementieren. Die beiden doch recht simplen Beispielskripte laden schon recht lange, wenn man komplexere und längere Skripte nutzt, wird dies das Laden der Webseite vermutlich doch arg verzögern.


(Kommentieren)  Zwei Canvases mit P5JS – 20161215 bitte flattrn

image image



Über …

Der Schockwellenreiter ist seit dem 24. April 2000 das Weblog digitale Kritzelheft von Jörg Kantel (Neuköllner, EDV-Leiter, Autor, Netzaktivist und Hundesportler — Reihenfolge rein zufällig). Hier steht, was mir gefällt. Wem es nicht gefällt, der braucht ja nicht mitzulesen. Wer aber mitliest, ist herzlich willkommen und eingeladen, mitzudiskutieren!

Alle eigenen Inhalte des Schockwellenreiters stehen unter einer Creative-Commons-Lizenz, jedoch können fremde Inhalte (speziell Videos, Photos und sonstige Bilder) unter einer anderen Lizenz stehen.

Der Besuch dieser Webseite wird aktuell von der Piwik Webanalyse erfaßt. Hier können Sie der Erfassung widersprechen.

Diese Seite verwendet keine Cookies. Warum auch? Was allerdings die iframes von Amazon, YouTube und Co. machen, entzieht sich meiner Kenntnis.


Werbung


Werbung


image  image  image
image  image  image