Image

Bilder hochladen

Es ist möglich, Bilder zu laden und darzustellen. Die Bilder, die man benützen möchte, organisiert man am besten in einem Ordner mit dem Namen bilder oder so ähnlich. Dies ist vor allem dann angebracht, wenn man viele verschieden Bilder benötigt. Damit das unten Beschriebene funktioniert, musst du angemeldet sein!

Um einen Ordner zu erstellen, gehe wie folgt vor:

1. Klicke auf ">" im linken Bereich.
   
   
   
   Danach sollte es so aussehen:
   
   
2. Klicke auf "∨" und dann auf Add folder. Nenne den Ordner "bilder".
   
   
3. Klicke beim Ordner auf "∨" und dann auf Add File.
   
   
4. Nun kannst du Bilder hochladen, indem du entweder Bilder in den Dropbereich ziehst (drag and drop) oder indem du in den Dropbereich klickst und dann im Finder die entsprechenden Bilder auswählst.
   
   

Bilder im Sketch laden

Javascript ist eine sogenannte asynchrone Programmiersprache. Das heisst, das Programm kann Programmcode abarbeiten, bevor vorhergehender Programmcode beendet wurde. Für p5js bedeutet das, dass wenn wir ein Bild laden, der folgende Programmcode abgearbeitet wird, obwohl das Bild noch nicht fertig geladen wurde. Dies kann zu Problemen mit dem Programmcode führen. Damit das Programm wartet, bis das Bild fertig geladen ist, schreiben wir das Wort await vor loadImage(). Damit await verwendet werden darf, muss vor function setup() das Wort async stehen: async function setup() {}

Hier siehst du, wie ein Bild geladen wird:

let bild;   // der Name des Bildes

// mit async und await wird sichergestellt,
// dass das Bild zuerst geladen wird
// und erst dann der nachfolgende Programmcode abgearbeitet wird.
async function setup() {
  // mit der Funktion loadImage() können wir ein Bild laden
  // welches wir im Ordner bilder abgelegt haben
  bild = await loadImage('Pfad/zur/Bilddatei.Dateityp');

  createCanvas(400, 400);
}
	

Beispiel Bild laden

let bild;   // der Name des Bildes

async function setup() {
  // Im Ordner bilder befindet sich das Bild mit dem Namen rakete.png
  bild = await loadImage('bilder/rakete.png');

  createCanvas(400, 400);
}
	

Bild darstellen

Um das Bild tatsächlich darzustellen, muss die Funktion image(bild, x, y, breite, höhe) aufgerufen werden.

let bild;   // der Name des Bildes

async function setup() {
  // Im Ordner bilder befindet sich das Bild mit dem Namen rakete.png
  bild = await loadImage('bilder/rakete.png');
  createCanvas(400, 400);
}

function draw() {
  background(0, 0, 40);

  // das in setup() geladene Bild bild wird geladen
  // die Koordinaten der linken oberen Ecke des Bildes befindet sich bei 0, 0
  // das Bild ist 200 Pixel breit und 200 Pixel hoch
  image(bild, 0, 0, 200, 200);
}
	

Der weisse Punkt oben links zeigt, wo sich die obere linke Ecke des Bildes (Referenzpunkt) befindet.

Bild animieren

Genau gleich wie ein Rechteck oder eine Ellipse, kann ein Bild bewegt werden.

let bild;   // der Name des Bildes
let x = 200;
let y = 200;

async function setup() {
  // Im Ordner bilder befindet sich das Bild mit dem Namen rakete.png
  bild = await loadImage('bilder/rakete.png');
  createCanvas(400, 400);
}

function draw() {
  background(0, 0, 40);

  // das in setup() geladene Bild bild wird geladen
  // die Koordinaten der linken oberen Ecke des Bildes befindet sich bei 0, 0
  // das Bild ist 200 Pixel breit und 200 Pixel hoch
  image(bild, x, y, 200, 200);

  y = y - 4;
  if(y < -200) {
    y = height;
  }
}
	

Der weisse Punkt zeigt, wo sich die obere linke Ecke des Bildes (Referenzpunkt) befindet.

imageMode(CENTER)

Mit der Funktion imageMode(CENTER) kannst du festlegen, dass der Referenzpunkt des Bildes nicht die linke obere Ecke ist, sondern die Bildmitte. Dies ist häufig einfacher, um das Bild wunschgemäss zu platzieren.

let bild;   // der Name des Bildes
let x = 200;
let y = 200;

async function setup() {
  // Im Ordner bilder befindet sich das Bild mit dem Namen rakete.png
  bild = await loadImage('bilder/rakete.png');
  createCanvas(400, 400);
}

function draw() {
  background(0, 0, 40);

  // das in setup() geladene Bild bild wird geladen
  // die Koordinaten der linken oberen Ecke des Bildes befindet sich bei 0, 0
  // das Bild ist 200 Pixel breit und 200 Pixel hoch
  imageMode(CENTER);
  image(bild, x, y, 200, 200);

  y = y - 4;
  if(y < -100) {
    y = height + 100;
  }
}
	

Der weisse Punkt zeigt, wo sich die Mitte des Bildes (Referenzpunkt) befindet.

Breite und Höhe eines Bildes verändern

Genauso wie bei einem Rechteck oder einer Ellipse, kann auch die Breite und die Höhe des Bildes dynamisch verändert werden.

let bild;   // der Name des Bildes

async function setup() {
  // Im Ordner bilder befindet sich das Bild mit dem Namen haus.png
  bild = await loadImage('bilder/haus.png');
  createCanvas(400, 400);
}

function draw() {
  background(100);

  image(bild, x, y, mouseX, mouseY);
}
	

Bewege die Maus über das Zeichenfeld!