Scripting bearbetning med MIDI (6 / 11 steg)

Steg 7: Vi kan göra bättre

Låt oss nu ta alla detta och se om vi kan göra det lite mer spännande.

Första, en viktig varning: The Neurogami estetiska kan inte bli din. Det är ett slags glitchy minimalism. Jag hoppas du gillar det, men det är inte riktigt målet här.

Tillvägagångssättet var att först skapa ett antal animerade GIF-bilder som gjorts med ImageMagick och vissa anpassade Ruby program till glitch bilder. Bearbetning koden sedan placerar, skalor, etc., eller GIF-fil baserat på vilka MIDI-not och kanal kommer till.

Det är nog mer vanligt att se processen skisser där alla visuella effekter görs av bearbetning (eller några ytterligare bearbetning bibliotek) mitt i skissen. Det här är, på sätt fusk: är det bara visar bilder av grafiska effekter. Så vad: det är slutresultatet som räknas.

Med hjälp av färdiga animationer gör dock saker lättare. Få samma visuella effekter realtid bearbetning skulle vara nästan omöjligt. Par som med också besvara MIDI-meddelanden i realtid gör det mer sannolikt för saker att gå fel.

Det är något om denna skiss som är gemensamt för de flesta bearbetning skisser. Om man tittar på de flesta något exempel som återger något visuellt slående skissen generellt fungerar så här: kör lite kod för att uppdatera en uppsättning variabler på varje pass av Rita, och sedan använda det aktuella läget för dessa variabler för att bestämma vad man ska göra.

Denna skiss är samma. Den använder ett mycket glättad bibliotek som kallas gifAnimation för att spela animerade GIF-bilder. Du kan använda dem som du skulle någon regelbunden bildfil, som är, passera en hänvisning till en animerad GIF bild att styra placeringen och skalning.

Saken är den, om du vill göra många bilder på varierande platser, vissa envisas vissa inte, du behöver något sätt att hålla reda på dem. Om du visste hur många bilder kanske du kan använda en fast uppsättning av variabler att hålla alla detaljer, men förbi några fåtal som blir tungrott.

Jag hade i åtanke att återge GIF-filer placeras i nät av olika storlekar. Jag bestämde mig att dela upp skärmen i hälften, i mitten. Bildplacering skulle ske genom att ange vänster eller höger, vilken storlek rutnät (genom att ge antalet rader och kolumner), och var i det rutnätet för att placera bilden.

Spåra en uppsättning relaterade data efterlyser något sätt att gruppera dem. En array fungerar ibland, men i detta fall måste det finnas två uppsättningar av grupperade data. Att göra dina klasser i bearbetning är lätt och ger ett sätt att hålla relaterade data tillsammans. Jag definierade en klass som kallas RenderArgs (du ser varför i ett ögonblick)

klass RenderArgs {

offentliga färgton;
offentliga Gif gif;

Public int numCols = 0;
Public int numRows = 0;
Public int slotIndex;

RenderArgs (färg t, Gif g, int nC, int nR, int idx) {
nyans = t;
GIF = g;
numCols = nC;
numRows = nR;
slotIndex = idx;
}

}

Det är bara ett sätt att gruppera en nyans färg, en referens till en animerad GIF, antalet kolumner och rader i ett rutnät, och var i det rutnätet för att placera GIF.

Detta (förutom nyansen) är alla argument till en metod placeGifAt.

void placeGifAt (Gif g, int leftOrRight, int numCols, int numRows, int slotIndex) {
int w = width/(numCols*2);
int h = höjd/numRows;
int count = 0;
int colOffset = 0;

om (leftOrRight == höger) {
colOffset = bredd/2;
}

för (int y = 0; y < numRows; y ++) {
för (int x = 0; x < numCols; x ++) {
om (greve == slotIndex) {
bild (g, x * w + colOffset, y * h, w, h);
}
greve ++;
}
}

}

(Filen med den här koden definierar också rätt som 1 för att göra det lättare att läsa.)

Plausibly, kunde denna metod vara en del av samma klass som innehar alla argumentvärden; koden utvecklats från först skapa en metod för att definiera hur du monterar en bild i ett rutnät-slot.

placeGifAt anropas i dra, tillsammans med en uppmaning till nyans. Allt detta kunde vara insvept i en förekomstmetod (render, kanske) i renderArgs (som sedan måste ett bättre namn) så att data och beteende hålls samman (typ av hela poängen med klasser). Jag har inte bara gjort detta. Jag försöker fortfarande saker och jag är OK om koden inte har fast i några slutliga form.

Det finns diverse hjälpare metoder att hanterar en lista över animerade GIF instanser och en lista över toner och vissa ArrayList instanser (renderL och renderR) att hålla fast vid RenderArgs instanser.

Rita gör mycket lite. Det sätter en svart bakgrund sedan itererar över RenderArgs listor, och för varje objekt samtal nyans då bilden. Med andra ord, man tittar på en uppsättning av variabler och använder dem för att bestämma vad du ska göra.

Här är lottningen

void draw() {
Background(0);
RenderArgs ra;

för (int jag = 0; jag < renderL.size(); i ++) {
ra = renderL.get(i);
Tint(ra.Tint);
placeGifAt (ra.gif, vänster, ra.numCols, ra.numRows, ra.slotIndex);
}

för (int jag = 0; jag < renderR.size(); i ++) {
ra = renderR.get(i);
Tint(ra.Tint);
placeGifAt (ra.gif, höger, ra.numCols, ra.numRows, ra.slotIndex);
}
}