Get the Flash Player to see this player.

Het bovenstaande lijkt heel raar en dat is het ook wel. Het is mijn allereerste eigen brouwseltje in een programma dat vvvv heet (ook wel vauvauvauvau genoemd). Het programma bekijkt de muispositie in het scherm en als er op het muiswiel wordt gedrukt begint een liedje te spelen, de snelheid van het afspelen wordt dan weer beïnvloed door de muispositie. Het nummer dat ik gebruikt heb is van de audio bulley’s dat toevallig bij lage snelheden klinkt als een soort darth vader vs. raptors.

vvvv is bedoelt om visueel mee te programeren en wordt vooral gebruikt in kunst installaties en VJ software om beeld en geluid mee te manipuleren. Er is ontzettend veel mogelijk van 3d physics gestuurde scenes tot aan multi-touch screens en tot nu toe lijkt het allemaal best inituïtief te verlopen.

Als je verder leest kun je een beetje zien hoe ik deze “patch” gemaakt heb en hoe je zelf aan de slag kan met vvvv, dat overigens een gratis non-commercial licentie heeft.

VVVV werkt heeft een visuele programmerings methode wat niet te vergelijken is met programmeren waarbij je moet typen. Hoewel het even wennen is komt het op een gegeven moment heel natuurlijk over en is het voor snel wat in elkaar draaien heel geschikt. Dit artikel is niet echt een strak geschreven tutorial om je kennis te laten maken met VVVV, dat doen zij zelf uitstekend op de website, maar meer een promotie plaatje om te laten zien hoe makkelijk het gaat .

Een mp3′tje afspelen in vvvv.

Dit is VVVV als je het opstart (en de introductie heb gevolgd, anders krijg je een 3d snake spelletje). Nou hebben we voor het afspelen van een mp3′tje een FileStream node nodig. Dit wordt weergegeven als een blokje en regelt alles wat nodig is om een mp3 te streamen. Dubbelklik ergens op het Canvas en type Filestream (kies de naam uit het lijstje).

Nu zie je een blokje met grijze vierkantjes bovenop en onder op. Bovenop zijn de inputs en onderop zijn de outputs.Nu heeft Filestream een input genaamd File (helemaal rechts) en als we daar met de rechtermuis knop op klikken krijgen wij een mooi explorer bestand dialoog te zien. Hier kiezen wij ons mp3 bestand.

Nu is de filestream geladen met een bestand en als je de meeste linker input Playing van 0 naar 1 zou zetten heb je een spelend mp3′tje. Alleen wordt er nog niets aangeroepen wat de audio ook daar werkelijk moet doorverwijzen naar de speakers. Daarvoor hebben we een AudioOut node nodig. Om de Filestream node te koppelen aan de AudioOut klik je op de meeste linkse output node en klik je nog een keer op de meeste linke input node van AudioOut. Als je nu de Playing input pin van Filestream (helemaal links) op 1 zet zul je een muziekje horen (jeu!).

Interactiviteit toevoegen aan het geheel

Nou is een hele omslachtige manier van mp3’s afspelen leuk, maar het kan natuurlijk veel leuker als mensen ook een beetje kunnen manipuleren. Nu heeft Filestream een input pin Speed die bepaald hoe snel het liedje wordt afgespeeld en dat is ook het geen dat we gaan manipuleren. Hiervoor maken we een renderer(GDI) omdat het schermpje dat hierdoor ontstaat automatisch je muis coördinaten weergeeft in 2 output nodes X en Y.

Als we X of Y koppelen aan de input pin Speed van filestream en we bewegen over het schermpje van de GDI renderer dan zul je horen dat de snelheid van het liedje veranderd. Om te voorkomen dat je gek wordt van muziek die afgespeeld wordt kun je de output pin Mouse Button van renderen koppelen aan de Playing input pin van Filestream zodat de muziek alleen maar speelt als je een muisknop indrukt.

Nu ben je er bijna alleen kun je nog niet zien waar je muis in het scherm van de renderer omdat je muis daarin weg valt. Gelukkig kunnen we wat renderen is het scherm en de X en Y positie daarvan gelijk stellen aan de muis. Ik gebruik een Point node omdat het een kruisje is wat nauwkeurig het middelpunt aangeeft van de muis.

Hierboven zie je hoe de Point node gekoppeld is aan de output naar de renderen zodat het in het scherm getoond word, Daarnaast lopen er ook twee lijnen van de X en Y output van de Renderer naar de X en Y positie van de Point zodat de gelijk is aan de muis positie.

En that’s it! Klaar, je hebt nu precies hetzelfde als ik in het filmpje liet zien. Hoewel het een hele lap tekst is geworden zijn het allemaal hele kleine stappen de maar een paar tellen in beslag nemen. Dus volg de tutorials op de VVVV website en laat zien wat je kan.

Als bonus heb ik om aan te tonen dat echt van alles kan in een paar klikken, heb ik hier een filmpje van een flash filmpje dat realtime wordt overgezet als texture naar een DirectX renderer. Dit zou in praktijk dus bijvoorbeeld gebruikt kunnen worden om het uiterlijk van een 3d object realtime door mensen te laten manipuleren.

Get the Flash Player to see this player.