Scripting verwerking met MIDI (7 / 12 stap)

Stap 7: Wij annuleerteken verrichten wedder

Laten we nu eens alle dit en zien als we het een beetje spannender maken kunnen.

Ten eerste, een belangrijk voorbehoud: The Neurogami esthetiek mag jou niet. Het is een soort glitchy minimalisme. Ik hoop dat u bevalt, maar dat is niet echt het doel hier.

De aanpak was om eerst een aantal GIF-bestanden gemaakt met behulp van ImageMagick en sommige aangepaste Ruby software glitch afbeeldingen maken. De verwerking code plaatst, schalen, enz., deze of gene GIF-bestand op basis van welke MIDI opmerking en kanaal komt.

Het is waarschijnlijk meer gemeenschappelijke te zien proces schetsen waar alle van de visuele effecten zijn gedaan door de verwerking (of enkele extra verwerking bibliotheek) recht in de schets. Aanpak hier is er manier, vreemdgaan: het toont alleen foto's van grafische effecten. Zo wat: het is het eindresultaat dat zaken.

Echter, met behulp van pre-en-klare animaties maakt dingen makkelijker. Getting dezelfde visuele effecten real-time verwerking zou nigh niet onmogelijk. Koppel dat met ook reageren op MIDI in real time berichten maakt het waarschijnlijker dat dingen mis gaan.

There's something about deze schets die geldt voor de meeste Processing schetsen. Als je kijkt op de meeste elk voorbeeld dat iets visueel maakt opvallend de schets over het algemeen werkt als volgt: elke keer van trekking, draaien wat code om te werken een aantal variabelen, vervolgens de huidige status van deze variabelen gebruiken om te bepalen wat te renderen.

Deze sketch is hetzelfde. Het gebruikt een zeer gladde library, genaamd gifAnimation om te spelen van geanimeerde GIFs. U kunt hen gebruiken zoals je zou elk regelmatige afbeeldingsbestand gebruiken, dat is, een verwijzing naar een geanimeerde GIF doorgeeft naar afbeelding bepalen de plaatsing en schalen.

Het ding is, als u op zoek bent om talrijke afbeeldingen in verschillende plaatsen, sommige volhardt in sommige niet, moet u sommige weg te houden van hen. Als je wist het exacte aantal afbeeldingen dat dat u misschien wel kunnen gebruiken een vaste set van variabelen te houden alle details, maar voorbij een klein aantal dat wordt lastig.

Ik had in gedachten te maken de GIFs geplaatst in rasters van verschillende maten. Heb ik besloten om te splitsen het scherm in tweeën, in het midden. Plaatsing van de afbeelding zou worden gedaan door op te geven van links of rechts, welke grootte raster (doordat het aantal rijen en kolommen), en waar in dat raster om de afbeelding te plaatsen.

Het bijhouden van een aantal verwante data-oproepen naar een manier om te groeperen. Soms werkt een matrix, maar in dit geval moet er twee sets van gegroepeerde data. Het maken van uw klassen in Processing is eenvoudig en biedt een manier om gerelateerde gegevens bij elkaar houden. Ik heb een klasse met de naam RenderArgs (u ziet waarom in een moment) gedefinieerd

 class RenderArgs { public color tint; public Gif gif; public int numCols = 0; public int numRows = 0; public int slotIndex; RenderArgs(color t, Gif g, int nC, int nR, int idx ) { tint = t; gif = g; numCols = nC; numRows = nR; slotIndex = idx; } } 

Het is gewoon een manier om te groeperen van een kleur tint, een verwijzing naar een GIF-animatie, het aantal kolommen en rijen in een raster, en waar in dat raster te plaatsen van het GIF.

Dit (met uitzondering van de tint) zijn alle argumenten voor een placeGifAt methode.

 void placeGifAt(Gif g, int leftOrRight, int numCols, int numRows, int slotIndex ) { int w = width/(numCols*2); int h = height/numRows; int count = 0; int colOffset = 0; if (leftOrRight == RIGHT ) { colOffset = width/2; } for(int y=0; y<numRows; y++) { for(int x=0; x<numCols; x++) { if (count == slotIndex) { image(g, x*w+colOffset , y*h, w, h); } count++; } } } 

(Het bestand met deze code definieert ook recht als 1 dit om leesbaarder te maken.)

Aannemelijk, kunnen deze methode deel uitmaken van dezelfde klasse die in het bezit van alle argumentwaarden; de code geëvolueerd van een methode om te definiëren hoe plaats ik een afbeelding in een raster-sleuf eerst te maken.

placeGifAt wordt aangeroepen in gelijkspel, samen met een oproep aan tint. Dit alles kon worden ingepakt in een instantiemethode (maken, misschien) in renderArgs (die dan een betere naam zou moeten) zodat de gegevens en gedrag worden samengehouden (soort van de hele punt van klassen). Ik kan dit alleen nog niet gedaan. Ik ben nog steeds proberen dingen uit en ik ben OK als de code niet is geregeld in een definitieve vorm.

Er zijn diverse helper methodes die een lijst van geanimeerde GIF-exemplaren en een lijst van tinten en soms ArrayList (renderL en renderR) te houden aan RenderArgs instanties beheren.

trekken doet zeer weinig. Het stelt een zwarte achtergrond dan itereert over de RenderArgs-lijsten, en voor elk item oproepen tint dan beeld. Met andere woorden, het kijkt naar een reeks variabelen en gebruikt hen om te beslissen wat te renderen.

Hier is een gelijkspel

 void draw() { background(0); RenderArgs ra; for( int i =0; i < renderL.size(); i++ ) { ra = renderL.get(i); tint(ra.tint); placeGifAt( ra.gif, LEFT, ra.numCols, ra.numRows, ra.slotIndex ); } for( int i =0; i < renderR.size(); i++ ) { ra = renderR.get(i); tint(ra.tint); placeGifAt(ra.gif, RIGHT, ra.numCols, ra.numRows, ra.slotIndex ); } }