Music by Baps: kolme julkaisua ja paljon shadereita

Taustaa

Music by Baps on koti niille kolmelle julkaisulle jotka olen tehnyt Nuits-levymerkille: Sweet Like Stevia, Compliance Carnival ja L-Theanine. Kappaleita makeutusaineista, vaatimustenmukaisuudesta ja teestä löytyvistä aminohapoista. Olen tietoinen siitä miltä tuo listana näyttää.

Sivusto on yksi sivu julkaisua kohti ja etusivu joka pitää ne koossa, rakennettuna GSAP:n, WebGL-shadereiden ja vieritykseen sidotun animaation avulla. Se on enemmän sivustoa kuin kolme raitaa tiukasti ottaen vaatii. Se on tarkoituskin.

Ongelma

Artistisivu suoratoistopalvelussa on rivi neliöitä ruudukossa jota et hallitse, vieressään algoritmisesti samankaltainen artisti johon et pyytänyt tulla verratuksi. Se on ihan ok. Se on myös identtinen jokaiselle elossa olevalle muusikolle, mikä tarkoittaa ettei se viesti mitään muuta kuin että olet olemassa ja olet ladannut tiedostoja.

Vaihtoehto johon useimmat riippumattomat artistit tarttuvat on link-in-bio-sivu, joka on samat neliöt huonommalla typografialla.

Minulla on kolme julkaisua ja vahva mielipide typografiasta. Kuilu sen välillä mitä suoratoistopalvelut antavat sanoa ja mitä julkaisu oikeasti on vaikutti kuromisen arvoiselta, ja sen kurominen on kokonaan verkko-ongelma, jonka osaan ratkaista.

Oma roolini

Kaikki, yksin. Musiikki, levymerkki, kannet, art direction, sivusto, koodi, tekstit. Nuits ei ole koskaan palkannut ketään, ja tässä projektissa asiakas ja artisti ovat myös minä, mikä poistaa tavanomaisen tekosyyn kompromissille.

Lähestymistapa

Sivuston piti jakaa typografiajärjestelmä portfolioni kanssa: MADE Dillan otsikoihin, Satoshi leipätekstiin, samat koot ja sama välistys. Ei siksi että uudelleenkäyttö on tehokasta, vaan siksi että musiikki ja suunnittelutyö tulevat samalta ihmiseltä ja eri kirjaintyyppi olisi siitä pieni vale.

Typografian lisäksi sääntö oli että liike palvelee julkaisua eikä kehittäjää. Jokainen julkaisusivu avautuu kanteensa, ja animaatio kantaa sinut raitaan, tekijätietoihin ja suoratoistolinkkeihin. Mikään ei animoidu sisään ja jää sitten paikoilleen todistettuaan osaavansa.

Kolme julkaisua on pieni katalogi enkä halunnut paisuttaa sitä. Kolmen kohteen sivuston pitäisi tuntua tarkoituksella pieneltä eikä vahingossa tyhjältä, mikä on taitto-ongelma: runsaasti tilaa, isoa typografiaa, yksi asia kerrallaan.

Toteutus

Astro 7 Cloudflaren päällä. Jokainen sivu on staattista tulostetta. Ajonaikaista dataa ei ole, sisällönhallintaa ei ole eikä palvelintyötä ole, joten koko sivusto on joukko tiedostoja reunaverkossa ja ensimmäinen piirto on niin nopea kuin verkko sallii.

GSAP vetää aikajanatyön ja ScrollTrigger vieritykseen sidotut sekvenssit. Sääntö josta pidin kiinni on että vieritykseen sidotun animaation on oltava peruutettavissa eikä se saa koskaan ottaa haltuunsa itse vierityskohtaa. Vierityksen kaappaus on nopein tapa tehdä kauniista sivustosta käyttökelvoton, ja se näyttää aina ihan hyvältä sen rakentajalle, koska hän tietää minne on menossa.

Shadereissa asuu visuaalinen identiteetti. Jokaisella julkaisulla on oma GLSL-fragmenttishaderinsa joka on sidottu kannen palettiin ja pyörii reunasta reunaan ulottuvalla tasolla sisällön takana. Ne ovat halpoja tarkoituksella: ei jälkikäsittelyketjua, ei renderöintikohteita, ei ruutukohtaisia tekstuurilatauksia. Fragmenttishader joka laskee aritmetiikkaa parilla uniformilla ei maksa modernilla näytönohjaimella juuri mitään, ja se tuottaa liikettä joka ei ole olemassa videotiedostona, joten ladattavaa kymmenen megatavun MP4:ää ei ole.

Kaikki kallis on portin takana. Shader-taso pysähtyy kun se vierii pois näkyvistä, animaatio kunnioittaa reduced-motion-asetusta romauttamalla aikajanat lopputilaansa eikä poistamalla niitä, ja WebGL-kangas puretaan kunnolla Astron näkymäsiirtymissä sen sijaan että jokainen navigointi vuotaisi yhden kontekstin. Viimeksi mainittu maksoi minulle yhden iltapäivän ja hyvin kuuman läppärin.

Sivustolla ei ole tekoälyä eikä sitä ole musiikissa. Ei siksi että haluaisin puolustaa jotain kantaa pitkään, vaan siksi että koko harjoituksen pointti oli että tein sen itse.

Lopputulos

Se on julkaistu osoitteessa musicbybaps.com. Kolme julkaisua, jokaisella oma sivunsa, jokainen linkittää sinne missä ihmiset oikeasti kuuntelevat.

Mitattava lopputulos on häviävän pieni enkä aio paisutella sitä. Hyödyllinen lopputulos on että sivustosta tuli referenssitoteutus sille typografia- ja liikejärjestelmälle jota käytin sitten portfoliossani, joten shader- ja siirtymätyö maksoi itsensä takaisin kahdesti.

Mitä tekisin toisin

Kirjoitin erillisen shaderin jokaiselle julkaisulle ennen kuin minulla oli yhteinen uniform-rajapinta, joten toinen ja kolmas olivat lähes kopioita joissa luvut oli vaihdettu. Yksi parametroitu shader ja julkaisukohtainen paletti olisi ollut vähemmän koodia ja yhtenäisempi.

Suunnittelisin ensi kerralla myös neljättä julkaisua varten. Etusivun taitto on viritetty täsmälleen kolmelle kohteelle ja se vaatii uudistamisen sillä hetkellä kun niitä on neljä, mikä on itse aiheutettu takaraja.