Andrea Ariano
Un portfolio che diventa un mondo.
Un portfolio con uno spazio da abitare.
Lo studio originale contiene il set fotografico, gli arredi e gli oggetti che aprono le sezioni del sito. Apri le pareti e osserva la scena in cui il visitatore può entrare.
- Studio originale
- Materiali
- Interazioni della scena
Il lavoro di Andrea Ariano è il punto di partenza. Lorenzo Crippa ne ha definito la direzione visiva e Denis Mazzotti ha modellato il mondo. Sulture ha sviluppato il software che permette di attraversarlo, guardare le fotografie, giocare e acquistare nello stesso sito, Doppia A.
L’esperienza ha una parte espressiva e una operativa. La prima si vede nello studio e nel portfolio. La seconda emerge quando una fotografia viene selezionata per il download, una scena viene preparata per il rendering o un carrello diventa un ordine pagato.
Le fotografie restano al centro.
Il portfolio ha due ritmi. Un indice a scorrimento permette di attraversare rapidamente i lavori, mostrando una fotografia quando un titolo diventa attivo. Dentro ogni progetto, spostamenti e rotazioni mantengono la sensazione di fotografie disposte a mano. Una vista d’insieme serve a un’esigenza diversa: selezionare immagini e scaricarle insieme in un archivio ZIP.
Sono accessi diversi alla stessa raccolta. Uno invita a esplorare i lavori; l’altro serve quando occorrono immagini precise. L’interfaccia cambia con l’intenzione di chi visita, mantenendo coerente il portfolio.
Seleziona una fotografia per aprire il visualizzatore originale.
Interfaccia e fotografie originali. Raccolta dimostrativa locale, senza contenuti o dati account in tempo reale.Lo studio diventa un luogo.
Il modello dà forma allo studio; il software assegna un ruolo ai suoi oggetti. Set fotografico, scrivania, merchandising e cabinato arcade abitano la stessa stanza navigabile. Alcuni oggetti collegano lo spazio al portfolio, al negozio e al gioco. André, Lori e Stella lo animano attraverso le loro clip originali.
La scena si può aprire qui per mostrare come è costruita. Pareti, arredi, attrezzature e personaggi sono elementi originali del progetto. Nel sito condividono lo stesso spazio: passare da una fotografia a un gioco o a un prodotto somiglia ad attraversare un luogo, non ad abbandonare una pagina per un’altra.
Sotto la superficie.
Un modello può essere scaricato senza essere pronto ad apparire. La geometria compressa va decodificata, le texture caricate e gli shader dei materiali preparati dal browser. Doppia A coordina questi passaggi prima di mostrare una scena, distribuendo il lavoro tra più fotogrammi invece di concentrarlo nel primo istante visibile.
Il profilo del dispositivo regola anche risoluzione, ombre e antialiasing. Nella vista del personaggio si può passare dal materiale finito alla geometria: entrambi servono a renderlo presente. Le decisioni invisibili sul caricamento e sul rendering sostengono un’esperienza che affida al movimento parte della propria identità.
Un gioco dentro il gioco.
Lo studio usa un sistema fisico per movimento e collisioni, con comandi da tastiera e joystick touch. Il cabinato apre un secondo gioco. Paac-Boy ha una propria mappa, regole di movimento, fantasmi, punti da raccogliere, potenziamenti, punteggio, livelli e vite.
Input, simulazione e disegno sono parti distinte dell’implementazione. Il cabinato giocabile qui sotto esegue il gioco originale del progetto in un frame isolato del browser. È una parte funzionante del sito, con regole e stato propri, non un’animazione che le rappresenta.
Paac-Boy.
Un gioco dentro il mondo di Andrea. Il cabinato dello studio apre un secondo spazio da esplorare: un labirinto, quattro avversari e una partita vera.
Il gioco originale del progetto, eseguito qui nel browser. Usa le frecce o i controlli sullo schermo. Esc riporta all’articolo.
- Canvas 2D
- Grafica e sprite
- Collisioni
- Pareti, avversari, oggetti
- Stato
- Punteggio, vite, livelli
Un negozio su misura, fino all’ordine.
Il negozio mantiene il proprio linguaggio visivo e svolge il lavoro del commercio. Chi acquista sceglie una variante e compone il carrello. Al checkout, il server ricalcola i prezzi, controlla le disponibilità e ottiene una quotazione per la spedizione prima di creare il pagamento.
È un confine preciso: importi e disponibilità vengono determinati dal sistema, non accettati dal browser. Il carrello qui sotto è il componente originale del progetto, eseguito con prodotti e prezzi fittizi. Quantità e subtotale si aggiornano in locale; le righe di codice mostrano dove il server assume la responsabilità.
const priced = await priceCart(env, lines)
const quote = await quoteShipping(env, priced, recipient)Dopo la visita.
La conferma del pagamento avvia un’altra parte del sistema. Il webhook verifica l’evento, controlla il pagamento con Stripe, aggiorna le giacenze e gestisce la spedizione. Scorte e spedizione vengono seguite separatamente, così un problema con il corriere può essere gestito senza ripetere il lavoro già completato.
L’amministrazione comprende strumenti per ordini, clienti e pagamenti. Il progetto copre quindi il mondo fotografico che si visita e il lavoro necessario per gestire il negozio. Il ruolo di Sulture attraversa tutta questa relazione, dalla scena visibile ai processi meno apparenti che la sostengono.