Interessante verwerkingsprogrammeringsrichtlijnen voor ontwerper - laden van media en gebeurtenis: 13 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:19

Bij de verwerking kunnen veel externe gegevens worden geladen, waaronder drie typen die veel worden gebruikt. Ze zijn beeld, audio en video afzonderlijk.

In dit hoofdstuk gaan we het hebben over het in detail laden van audio en video, gecombineerd met gebeurtenissen. Uiteindelijk kun je je eigen muziektoetsenbord of muziekpalet maken.

Stap 1: Afbeelding lezen

Laten we, voordat we beginnen, terugkijken op de methode van het laden van afbeeldingen.

Stap 2: Beeldgerelateerde functies

Voordat we deze functies gebruiken, moeten we een afbeeldingsobject maken via PImage. Vervolgens kunnen we deze functies gebruiken om allerlei afbeeldingseigenschappen te definiëren.

Vergeet niet uw afbeeldingsbronnen op te slaan in een gegevensbestand voordat u uw programma uitvoert.

Stap 3: Muziek laden, afspelen en stoppen

In het volgende beginnen we het aanroepen van muziek formeel aan jullie voor te stellen. Zeer vergelijkbaar met het laden van afbeeldingen, moet u aan het begin een audio-object declareren. U kunt verwijzen naar het onderstaande voorbeeld voor de eigenlijke grammatica.

Codevoorbeeld (10-1):

[cceN_cpp theme="dawn"] import processing.sound.*;

SoundFile-geluid;

ongeldige setup() {

grootte (640, 360);

achtergrond(255);

geluid = nieuw SoundFile (dit, "1.mp3");

}

nietig tekenen() {

}

ongeldige toets ingedrukt() {

//Geluid afspelen

if (toets == 'p') {

geluid.afspelen();

}

//Stop geluid

if (toets == 's') {

geluid.stop();

}

} [/cceN_cpp]

Voorbereiding:

De verwerking zelf bevat geen geluidsbibliotheek. Je moet het zelf downloaden. Dus voordat u uw code schrijft, kunt u beter de volgende voorbereidingen treffen.

Bibliotheek toevoegen aan Verwerking. Hier is de gangbare praktijk. Kies in de menubalk voor "Tool"-- "Tool toevoegen", en ga dan naar "Bibliotheken". Voer de sleutelwoorden van de bibliotheek in de zoekkolom in, zodat u deze direct kunt downloaden en installeren.

Als we deze functie echter in ons eigen land (in China) gebruiken, kunnen we deze niet downloaden door rechtstreeks verbinding te maken met internet. We moeten VPN opstarten. Ook al beginnen we eraan, er zullen instabiele omstandigheden zijn. Je moet dus geduld hebben om het meerdere keren te proberen. Dit is de handigste manier van laden. Als u niet kunt installeren, moet u handmatig downloaden van de officiële website. (https://processing.org/reference/libraries/) Omdat de handmatige installatiemethode erg ingewikkeld is, zullen we deze in het andere hoofdstuk verder bespreken.

Code uitleggen:

De geluidsbibliotheek kan goed werken nadat de voorbereiding is voltooid. Omgaan met de bovenstaande code, klik op UITVOEREN, dan zal het werken. Druk op de toets "P" om muziek af te spelen, "S" om muziek te stoppen.

Als het aan het programma gewend is, moeten we het eerst laden. Aan het begin moeten we een zin "import processing.sound.*" toevoegen. "importeren" is het sleutelwoord, wat letterlijk laden betekent. Voeg de naam van de bibliotheek toe achter "import", dan wordt de bibliotheek geladen. De staart volgt meestal een teken "*", dus het zal alle bibliotheekgerelateerde klassen in het programma laden zonder ze handmatig één voor één toe te voegen.

In de tweede zin heeft " SoundFile sound; " een audio-object gedeclareerd. SoundFile lijkt op PImage.

Binnen de functie-instellingen wordt " sound = new SoundFile(this, "1.mp3"); " gebruikt om een object te maken en het leespad te definiëren. Hier zijn we eigenlijk al begonnen met het hanteren van een nieuw concept Class. Op dit moment bespreken we het niet diep. We hoeven alleen te weten dat het een vaste schrijfmethode is en de laatste parameter is voor het invullen van het adres van de muziekbron.

Van de keyPressed()-gebeurtenissen werken "sound.play()" en "sound.stop()" relatief als het effect van afspelen en stoppen. "." in het midden geeft een lidfunctie aan die afspelen en stoppen bij audio-objecten horen. We kunnen lidfunctie beschouwen als de functie die in het object is opgenomen. Het hoort bij dit object, dat vooraf is gedefinieerd. Later, wanneer we meerdere audio-objecten moeten afspelen, hoeven we alleen ".play()" achter de relatieve variabelenaam toe te voegen.

Audiobronnen worden opgeslagen in een gegevensbestand onder dezelfde catalogus van schetsbestand (met pde-achtervoegsel). Als er geen is, kunt u er handmatig een maken.

Vergeet niet om functie tekenen te schrijven. Hoewel je geen afbeeldingen hebt getekend, is het noodzakelijk om muziek met succes af te spelen.

De bovenstaande procedure lijkt vrij ingewikkeld, maar je hoeft alleen maar een aantal codezinnen toe te voegen, dan kun je de afspeelfunctie realiseren. Het is erg handig.

Processing ondersteunt veelgebruikte audioformaten zoals mp3, wav, ogg, enz.

Stap 4: Muzieksnelheidsregeling

De volgende voorbeelden zullen veel interessanter worden. Verwerking heeft enkele functies opgeleverd die de afspeelsnelheid van muziek kunnen regelen. Tegelijkertijd veranderen de tonen met de afspeelsnelheid van de muziek. Wanneer we de muis gebruiken om te besturen, zal dit een zeer psychedelisch effect genereren.

Videowebsite:

Codevoorbeeld (10-2):

[cceN_cpp theme="dawn"] import processing.sound.*;

SoundFile-geluid;

ongeldige setup() {

grootte (640, 360);

achtergrond(255);

geluid = nieuw SoundFile (dit, "1.mp3");

}

nietig tekenen() {

float-snelheid = mouseX/(float)width * 3;

geluidssnelheid (snelheid);

float vol = mouseY/(float)height * 4;

geluid.amp(vol);

}

ongeldige toets ingedrukt() {

//Geluid afspelen

if (toets == 'p') {

geluid.afspelen();

}

//Stop geluid

if (toets == 's') {

geluid.stop();

}

} [/cceN_cpp]

Code uitleggen:

Functie.rate() regelt de afspeelsnelheid van de audio. De waarde tussen haakjes bepaalt de snelle en langzame speelsnelheid. Als de waarde 1 is, is de afspeelsnelheid normaal. Als het voorbij 1 is, versnel dan; terwijl het onder de 1 is, vertraag dan.

Functie.amp() regelt het audiovolume. De waarde tussen haakjes bepaalt de volumewaarde. Als het 1 is, is de volumewaarde normaal. Als het meer dan 1 is, verhoog dan het volume; terwijl het onder de 1 is, verlaag dan het volume.

Hier hebben we twee lokale variabelen snelheid en vol ingebouwd als parameters om in te laden. Daarom zal de horizontale coördinaat van de muis de muziektoon veranderen en de verticale coördinaat het muziekvolume.

Stap 5: Video afspelen en stoppen

In Processing is het laden van video's vergelijkbaar met het laden van audio. Je moet eerst de videobibliotheek downloaden. (https://processing.org/reference/libraries/video/index.html)

Codevoorbeeld (10-3):

[cceN_cpp theme="dawn"] import processing.video.*;

Film verplaatsen;

ongeldige setup() {

grootte (640, 360);

achtergrond(0);

mov = nieuwe film (deze, "1.mov");

}

void movieEvent (Filmfilm) {

bew.lezen();

}

nietig tekenen() {

afbeelding (mov, 0, 0, 640, 360);

}

ongeldige toets ingedrukt() {

if (toets == 'p') {

verplaats.afspelen();

}

if (toets == 's') {

verplaats.stop();

}

if (toets == 'd') {

mov.pauze();

}

} [/cceN_cpp]

Videoschermafbeelding:

Code uitleggen:

De eerste zin " import processing.video.*; " wordt gebruikt om de videobibliotheek te laden.

De tweede zin " Movie mov; " wordt gebruikt om het video-object te declareren. Daaronder is de functie van " Movie " vergelijkbaar met PImage.

Bij het instellen van de functie is het effect van " mov = new Movie(this, "1.mov"); " het creëren van een object en het definiëren van het leespad. De laatste parameter wordt ingevuld met het adres van de videobron.

Achter de setup staat movieEvent voor videogebeurtenis. Het wordt gebruikt om video-informatie bij te werken en te lezen. "mov.read()" in de gebeurtenis betekent lezen.

Behalve voor het weergeven van afbeeldingen, kan functieafbeelding ook video weergeven. We kunnen video-objecten beschouwen als een dynamisch beeld. De eerste parameter, we vullen de variabelenaam van het video-object in. De tweede en derde parameter zijn de horizontale en verticale coördinaat getekend door video. De vierde en vijfde parameters bepalen de lengte en breedte van de videoweergave.

Functie.play() betekent spelen. Functie.stop() betekent stop, en het zal de video resetten. Functie.pause() betekent pauze. Het zal het huidige afspelen onderbreken, dat zal doorgaan totdat de functie.play() wordt aangeroepen.

Stap 6: Videosnelheidsregeling

Codevoorbeeld (10-4):

[cceN_cpp theme="dawn"] import processing.video.*;

Film verplaatsen;

ongeldige setup() {

grootte (640, 360);

achtergrond(0);

mov = nieuwe film (deze, "transit.mov");

}

void movieEvent (Filmfilm) {

bew.lezen();

}

nietig tekenen() {

afbeelding (mov, 0, 0, breedte, hoogte);

float newSpeed = mouseX/(float)width * 4;

verplaatssnelheid (nieuwe snelheid);

}

ongeldige toets ingedrukt() {

if (toets == 'p') {

verplaats.afspelen();

}

if (toets == 's') {

verplaats.stop();

}

if (toets == 'd') {

mov.pauze();

}

}

[/cceN_cpp]

Code uitleggen:

Functie.speed() kan worden gebruikt om de afspeelsnelheid van de video te regelen. Als de parameterwaarde 1 is, is de afspeelsnelheid normaal. Wanneer de waarde hoger is dan 1, versnel dan; terwijl het onder de 1 is, vertraag dan.

Omdat we de lokale variabele newSpeed hebben gebouwd en geïmporteerd in de functie setSpeed(), zal de coördinaat van de muis de afspeelsnelheid van de video rechtstreeks beïnvloeden.

Voor meer voorbeelden over video kunt u verwijzen naar Bibliotheken - Video in de casusbibliotheek.

Stap 7: Algemene gebeurtenissen verwerken

Voorheen hebben we alleen keyPressed()-gebeurtenis geïntroduceerd. Het wordt geactiveerd nadat het toetsenbord is ingedrukt. In het volgende zullen we andere veelvoorkomende gebeurtenissen in Verwerking voor u introduceren.

Het gebruik van de bovenstaande gebeurtenissen is vergelijkbaar met keyPressed. Ze hebben geen volgorde bij het schrijven van codes. Met andere woorden, het maakt niet uit welke gebeurtenis je voor of achter de functie-setup plaatst, je krijgt hetzelfde resultaat. De uitvoeringsopdracht is alleen gerelateerd aan de triggervoorwaarde van de gebeurtenis zelf. Alleen als aan de voorwaarde is voldaan, wordt het uitgevoerd. Bovenstaande gebeurtenissen zijn allemaal heel gemakkelijk te begrijpen. Je hoeft alleen maar een klein experiment te doen, dan kun je snel hun gebruik begrijpen.

Gebeurtenisstroom

We kunnen een voorbeeld gebruiken om de uitvoeringsvolgorde van gebeurtenissen te kennen.

Codevoorbeeld (10-5):

[cceN_cpp theme="dawn"] void setup() {

framesnelheid(2);

println(1);

}

nietig tekenen() {

println(2);

}

void mousePressed() {

println(3);

}

ongeldige muisMoved() {

println(4);

}

void mouseReleased() {

println(5);

}

ongeldige toets ingedrukt() {

println(6);

}

void keyReleased() {

println(7);

} [/cceN_cpp]

Code uitleggen:

In de functie-instelling heeft de functie frameRate() de werksnelheid van het programma ingesteld op 2 frames per seconde. Het verlagen van de framesnelheid kan ons helpen de uitvoer in de console te observeren in het geval dat geactiveerde gebeurtenissen onmiddellijk door nieuwe gegevens naar achteren worden geveegd.

Probeer uw muis te bewegen, klik met de muis, laat de muis los en bekijk het uitvoerresultaat. Maak kennis met de uitvoeringsvolgorde van de gebeurtenis via println.

Wat de moeite waard is om op te letten, is dat tekenfuncties niet in andere gebeurtenissen kunnen worden geschreven, behalve functietekenen, of het kan niet worden weergegeven. Als we het verbergen en weergeven van grafische componenten willen regelen via gebeurtenissen zoals keyPressed, kunnen we overwegen om bool-variabele als medium te bouwen.

Evenementen worden in volgorde uitgevoerd. Pas nadat alle code in de huidige gebeurtenis is geïmplementeerd, wordt de code in de volgende gebeurtenis uitgevoerd.

Stap 8: Uitgebreid voorbeeld - Muziektoetsenbord

In combinatie met de nieuw begrepen evenementen kunnen we nieuwe interacties aan ons programma toevoegen. Vervolgens kunnen we met slechts enkele minuten eenvoudig een muziektoetsenbord analoog maken.

Videowebsite:

Codevoorbeeld (10-6):

[cceN_cpp theme="dawn"] import processing.sound.*;

SoundFile geluid1, geluid2, geluid3, geluid4, geluid5;

booleaanse sleutel1, sleutel2, sleutel3, sleutel4, sleutel5;

ongeldige setup() {

grootte (640, 360);

achtergrond(255);

geen slag();

sound1 = nieuw SoundFile (dit, "do.wav");

sound2 = nieuw SoundFile (dit, "re.wav");

sound3 = nieuw SoundFile (dit, "mi.wav");

sound4 = nieuw SoundFile (dit, "fa.wav");

sound5 = nieuw SoundFile (dit, "so.wav");

}

nietig tekenen() {

achtergrond(255, 214, 79);

rectMode(CENTER);

zweven w = breedte * 0,1;

vlotter h = hoogte * 0,8;

als (toets1) {

vullen (255);

} anders {

vullen (238, 145, 117);

}

recht (breedte/6, hoogte/2, b, h);

als (toets2) {

vullen (255);

} anders {

vul (246, 96, 100);

}

recht (breedte/6 * 2, hoogte/2, b, h);

als (toets3) {

vullen (255);

} anders {

vul (214, 86, 113);

}

recht (breedte/6 * 3, hoogte/2, b, h);

als (toets4) {

vullen (255);

} anders {

vullen (124, 60, 131);

}

recht (breedte/6 * 4, hoogte/2, b, h);

als (toets5) {

vullen (255);

} anders {

vullen (107, 27, 157);

}

recht (breedte/6 * 5, hoogte/2, b, h);

}

ongeldige toets ingedrukt() {

if (toets == 'a') {

geluid1.play();

sleutel1 = waar;

}

if (toets == 's') {

geluid2.play();

sleutel2 = waar;

}

if (toets == 'd') {

geluid3.play();

toets3 = waar;

}

if (toets == 'f') {

geluid4.play();

sleutel4 = waar;

}

if (toets == 'g') {

geluid5.play();

toets5 = waar;

}

}

void keyReleased() {

if (toets == 'a') {

sleutel1 = onwaar;

}

if (toets == 's') {

sleutel2 = onwaar;

}

if (toets == 'd') {

sleutel3 = onwaar;

}

if (toets == 'f') {

sleutel4 = onwaar;

}

if (toets == 'g') {

sleutel5 = onwaar;

}

} [/cceN_cpp]

Code uitleggen:

We moeten meerdere audio-objecten maken om de relatieve geluidsinformatie te lezen om verschillende geluiden af te spelen wanneer verschillende toetsen worden geactiveerd.

Hier gebruiken we een nieuwe gebeurtenis keyReleased(). De functie van deze gebeurtenis is om de toetsenbordkleur in zijn oorspronkelijke kleur te herstellen. Wanneer de sleutel wordt losgelaten, wordt deze geactiveerd.

De 5 booleaanse waarden die in de head zijn gedeclareerd, worden gebruikt om de status van de sleutel te detecteren.

Stap 9: Uitgebreid voorbeeld - Muziekpalet 1

Naast toetsenbordgebeurtenis, is muisgebeurtenis een goede zaak dat we er flexibel mee om moeten gaan. Het volgende voorbeeld is voor ons om een muziekpalet te maken, waaronder we twee muisgerelateerde gebeurtenissen hebben gebruikt.

Videowebsite:

Codevoorbeeld (10-7):

[cceN_cpp theme="dawn"] import processing.sound.*;

SoundFile geluid1, geluid2, geluid3, geluid4, geluid5;

boolean isSlepen;

ongeldige setup() {

grootte (640, 360);

achtergrond(255, 214, 79);

geen slag();

sound1 = nieuw SoundFile (dit, "do.wav");

sound2 = nieuw SoundFile (dit, "re.wav");

sound3 = nieuw SoundFile (dit, "mi.wav");

sound4 = nieuw SoundFile (dit, "fa.wav");

sound5 = nieuw SoundFile (dit, "so.wav");

}

nietig tekenen() {

if (isSlepen) {

vullen (107, 27, 157, 100);

ellips (muisX, muisY, 16, 16);

}

}

void mouseDragged() {

isDragging = waar;

if (muisX > 100 && muisX < 105) {

geluid1.play();

}

if (muisX > 200 && muisX < 205) {

geluid2.play();

}

if (muisX > 300 && muisX < 305) {

geluid3.play();

}

if (muisX > 400 && muisX < 405) {

geluid4.play();

}

if (muisX > 500 && muisX < 505) {

geluid5.play();

}

}

void mouseReleased() {

isDragging = onwaar;

} [/cceN_cpp]

Code uitleggen:

We hopen dat we alleen afbeeldingen kunnen tekenen als we de muis hebben ingedrukt en gesleept. We moeten dus een booleaanse variabele isDragging bouwen om de huidige status te verkrijgen.

Als u de muis sleept, wordt isDragging de werkelijke waarde, zodat tekenfuncties binnen Draw worden uitgevoerd. Het laat sporen achter op het scherm. Wanneer we de muis loslaten, wordt isDragging een valse waarde. Dus de tekenfuncties in de functie tekenen zullen de uitvoering stoppen.

We hebben verschillende triggervoorwaarden ontworpen voor het slepen van een muis. Als de horizontale coördinaat van de muis bijvoorbeeld tussen 100 en 105 pixels ligt, wordt muziek automatisch afgespeeld. Hierdoor heeft het scherm meerdere onzichtbare strings gecreëerd. Alleen als de muis door de bepaalde gebieden gaat, wordt de relatieve muziek geactiveerd.

Stap 10: Uitgebreid voorbeeld - Muziekpalet 2 (bijgewerkte versie)

Het effect van bovenstaand voorbeeld is al goed genoeg. Maar als we er goed naar kijken, zullen we veel problemen ontdekken. Als de muis bijvoorbeeld erg snel beweegt, laat hij elke keer dat hij beweegt een rond punt op het scherm achter. Het is geen coherente rechte lijn. Ondertussen veroorzaakt het ook wat muzieklekkage. Terwijl wanneer de muis heel langzaam beweegt en door de positie gaat wanneer de horizontale coördinaat tussen 100 en 105 ligt, deze binnen een zeer korte tijd meerdere keren muziek zal uitzenden, waardoor u het gevoel krijgt vast te zitten. Al deze problemen kunnen we oplossen via onderstaand voorbeeld.

Via onderstaande link kun je video's bekijken:

v.qq.com/x/page/w03226o4y4l.html

Codevoorbeeld (10-8):

[cceN_cpp theme="dawn"] import processing.sound.*;

SoundFile geluid1, geluid2, geluid3, geluid4, geluid5;

boolean is Slepen;

ongeldige setup() {

grootte (640, 360);

achtergrond(255, 214, 79);

geen slag();

sound1 = nieuw SoundFile (dit, "do.wav");

sound2 = nieuw SoundFile (dit, "re.wav");

sound3 = nieuw SoundFile (dit, "mi.wav");

sound4 = nieuw SoundFile (dit, "fa.wav");

sound5 = nieuw SoundFile (dit, "so.wav");

}

nietig tekenen() {

if (isSlepen) {

beroerte (107, 27, 157, 100);

slagGewicht(10);

lijn (muisX, muisY, pmouseX, pmouseY);

}

}

void mouseDragged() {

isDragging = waar;

if ((muisX - 100) * (pmouseX - 100) < 0) {

geluid1.play();

}

if ((muisX - 200) * (pmouseX - 200) < 0) {

geluid2.play();

}

if ((muisX - 300) * (pmouseX - 300) < 0) {

geluid3.play();

}

if ((muisX - 400) * (pmouseX - 400) < 0) {

geluid4.play();

}

if ((muisX - 500) * (pmouseX - 500) < 0) {

geluid5.play();

}

}

void mouseReleased() {

isDragging = onwaar;

} [/cceN_cpp]

Code uitleggen:

Hier hebben we twee variabelen pmouseX en pmouseY gebruikt die in het verwerkingssysteem zelf worden gedragen. Ze zijn vergelijkbaar met mouseX en mouseY, maar wat ze hebben verkregen is de coördinaat van muis in het laatste frame.

In Function draw hebben we functie line() gebruikt om de originele functie ellipse() te vervangen. Dit maakt de coördinaat van het laatste frame direct verbonden met de coördinaat van het huidige frame. We kunnen dus coherente rechte lijnen of krommen tekenen.

In geval mouseDragged hebben we een nieuwe triggervoorwaarde ontworpen. Door te beoordelen of de coördinaat van het laatste frame en het huidige frame aan dezelfde kant liggen om te weten of een bepaalde coördinaat wordt overschreden. Neem deze voorwaarde als voorbeeld: " if ((mouseX - 100) * (pmouseX - 100) < 0) ". Daaronder kunnen we, uit de positieve en negatieve waarde van " mouseX - 100 ", weten of mouseX zich rechts of links van de horizontale coodinaat 100 bevindt. Net als bij "pmouseX - 100". Daarom, wanneer de twee punten aan de voor- en achterkant niet aan dezelfde kant liggen, vermenigvuldigt een positief een negatief, dan krijgt het een nieuw negatief getal. Er is dus voldaan aan de uitvoeringsvoorwaarde.

Het bovenstaande is een vereenvoudigde uitdrukking, die slim gebruik heeft gemaakt van een bepaald wiskundig algoritme: twee negatieven vermenigvuldigen zullen een positief creëren. Je kunt het ook in twee situaties verdelen om apart te bespreken. Het is echter veel ingewikkelder om oordeelsvoorwaarden te schrijven. De beoordelingsvoorwaarden "if ((mouseX = 100) || (mouseX > 100 && pmouseX <= 100))" is gelijk aan de bepalende voorwaarden van de broncode.

Stap 11: Relatieve functies over audio- en videobediening

De bovengenoemde functies zijn voldoende voor algemene gebruiksscenario's. Als je het diep wilt graven, heb ik hier enkele veelvoorkomende functies met betrekking tot audio en video voor je verzameld. U kunt het gebruik ervan verkennen volgens uw eigen vereisten.

Voor meer inleiding kunt u de documenten van de officiële website raadplegen.

Audio (https://processing.org/reference/libraries/sound/index.html)

Video (https://processing.org/reference/libraries/video/index.html)

Dit artikel is afkomstig van ontwerper Wenzy.

Stap 12: Relatieve metingen:

Interessante programmeerrichtlijnen voor ontwerpers - Eerste aanraking verwerken

Interessante programmeerrichtlijnen voor ontwerper - maak uw eerste verwerkingsprogramma

Interessante programmeerrichtlijnen voor ontwerpers - Laat uw foto draaien (deel één)

Interessante programmeerrichtlijnen voor ontwerpers - Laat uw foto draaien (deel twee)

Interessante programmeerrichtlijnen voor Designer-Program Process Control- Loop Statement

Interessante programmeerrichtlijnen voor ontwerpers - Programmaprocesbesturing - Conditieverklaring (deel één)

Interessante programmeerrichtlijnen voor ontwerpers - Programmaprocesbesturing - Conditieverklaring (deel twee)

Interessante programmeerrichtlijnen voor ontwerpers - aangepaste functies en fractale recursie

Interessante programmeerrichtlijnen voor ontwerpers - aangepaste functies en fractale recursie

Interessante verwerkingsprogrammeringsrichtlijnen voor ontwerper - kleurcontrole

Stap 13: Bron

Dit artikel is afkomstig van:

Als je vragen hebt, kun je contact opnemen met [email protected].