Plaatjes inladen

In p5.js kun je afbeeldingen gebruiken om visuele elementen toe te voegen aan je canvas. Afbeeldingen kunnen bijvoorbeeld afbeeldingen van bestandstypen zoals PNG, JPG of GIF zijn. Je kunt afbeeldingen laden en weergeven met behulp van de loadImage() en image() functies in p5.js.

LoadImage

De loadImage() functie wordt gebruikt om een afbeelding vanuit een bestand te laden. Je moet de bestandsnaam of het pad naar het afbeeldingsbestand als argument aan de functie doorgeven. De image() functie wordt gebruikt om een geladen afbeelding op het canvas weer te geven. Je moet de geladen afbeelding en de positie op het canvas als argumenten aan de functie doorgeven. Hier is een voorbeeld:

let img;

function preload() {
    img = loadImage('afbeelding.png');
}

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);
    image(img, 100, 100); // Teken de geladen afbeelding op positie (100, 100)
}

Met deze mogelijkheden kun je afbeeldingen laden, aanpassen en op je canvas weergeven in je p5.js-applicaties. Dit opent de deur naar het maken van visueel aantrekkelijke en gevarieerde creaties.

tekenen vanuit het midden

De image() functie tekent de afbeelding vanuit de linkerbovenhoek. Als je de afbeelding vanuit het midden wilt tekenen, moet je de functie imageMode() gebruiken.

Oefening

Laad een plaatje in en gebruik deze om de hele canvas te vullen.