Gian Carlo Mingati. Design and development for interactive media.

Il mio secondo sketch fatto con processing. magnet-ink.

In modalità HSB i colori sono distribuiti su una gamma di 360 possibilità (H), poi c’è la saturazione (S) con scala da 0 a 100 e lo stesso vale per la luminosità (B). Con questo nuovo sketch continuo la mia esplorazione della classe Vector3D: un campo gravitazionale (in realtà è un nuovo vettore di coordinate, e al click calcoliamo la differenza di posizione tra il mouse e tutte le particelle) è creato dal mouse e l’effetto di tavolozza magnetica è dato dal fatto che i colori vengono creati in base alla posizione delle due stecchette da 3px bianche poste a sx e dx dello schermo; tali colori sono strettamente connessi con la massa (in realtà è una doppia mappatura cioè colore in base all’indicatore e massa in base all’indicatore).

L’accelerazione verso il mouse è: accelerazione = Forza / Massa e siccome la massa è variabile, i rossi saranno sempre prossimi al mouse (attratti con più forza e, una volta rilasciati più soggetti all’attrito) e i blu essendo più pesanti arrivano ‘dopo’ verso il mouse e l’attrito li ferma dopo, anche. E ‘ normale, se prendete due biglie di ferro una da 1Kg e l’altra da 1/2 Kg e le lanciate lungo un piano, quella più pesante a parità di velocità iniziale, si fermerà dopo.

Ho distribuito i 360 colori in rapporto all’altezza dello schermo (mi sembrava più semplice ) e sempre in base alla posizione delle due stecchette (li chiameremo indicatori), la particella nascente viene anche dotata di una massa (più è alto l’indicatore verso il punto y=0, meno massa ha la particella). E così progressivamente dall’alto verso il basso le particelle hanno colore e massa differente. Quelle rosse, create in alto avranno massa leggerissima quelle in mezzo (gialle, verdi, azzurre) media e quelle in basso, blu, turchesi, alta.

Ma quante particelle? 35000. Ah. Eh; ho scoperto che in processing, se si usa il renderer P3D, size(800, 600, P3D) si possono applicare calcoli a molte particelle (e anche l’alpha incide sulla smoothness del rendering), ma la cosa che rende possibile il tutto, è l’uso di un ArrayList per craere/distruggere le particelle. Eh si, perchè la tavolozza magnetica magnet-ink ha a disposizione il numero massimo di oggetti definito come limite dell’array (35000). Se una particella tocca il bordo viene eliminata - remove(i) - e crata un’altra al suo posto, in una posizione (quindi con colore, massa e posizione) relativi alla posizione dell’indicatore. Così la tavolozza disegna sempre e soltanto le particelle nuove, rese disponibili sotto forma di nube di particelle colorate con un determinato colore non appena altre escono dallo schermo. Ed escono, poichè c’è un effetto di gravità che trasporta inevitabilmente le particelle fuori dallo schermo, in basso.

Giocateci un pò, io ce posso stare minuti. Un consiglio: fate brevi click col mouse, cercate di mantenere le particelle (tutte) intorno al mouse e poi, in base a dove si trovano gli indicatori (alto o basso) cliccate e muovete il mouse.
Forme che ricordano le esplosioni delle galassie si formeranno in magnet-ink. In più ha un effetto ‘nevicata’ e visto che siamo in periodo…. buone Feste e buona fine e buon inizio!

drawConnections è il mio primo sketch realizzato con Processing, in Java; è quindi una Applet. Si tratta di un modesto esempio di Computational Art: una prima esplorazione della classe (libreria) Vector3D di Daniel Shiffman, per mezzo della quale ho realizzato un piccolo mondo di trenta particelle che sono attratte da due oggetti con forza gravitazionale. Ogni particella, con massa differente, disegna una connessione tra l’una e l’altra se si trova ad una certa distanza. Lo spazio ha un vago attrito, quindi, anche se non si nota poichè le particelle sono solo punti, quelle con più massa (più pesanti) si fermano dopo, quelle più leggere, prima. Alla fine tutte le particelle (ci vuole almeno un minuto) trovano un equilibrio tra i due attrattori, fermandosi al centro dei due campi gravitazionali.
In ogni caso: la forza (o lavoro) = massa * accelerazione, accelerazione = forza/massa, (ed è quello che abbiamo voluto calcolare in questa simulazione) , velocità = velocità + accelerazione, e posizione = posizione + velocità.

Stamane sono finalmente riuscito a testare la FlyCamOne2 sul mio Mikado Logo 500 DX; con soli 37 grammi di peso, la microcamera è una piuma e il volo resta agilissimo e reattivo; davvero un piacere poter filmare i propri voli così.

Il Logo 500 è entrato attivamente nella mia ‘flotta’ da 3 mesi, in sostituzione del celeberrimo QuickWW EP10. Rispetto all’ EP10 pesa almeno 600 grammi di meno e sin dal primo collaudo ha dimostrato stabilità e maneggevolezza (a parità di motorizzazione) senza paragoni. Il Logo 500, concepito per l’ acrobazia estrema 3D, offre eccellenti prestazioni già con l’ impiego di una batteria da 5S anche se ‘la morte sua’ - come si dice a Roma - sarebbero pacchi da 6S; tra le innovazioni sostanziali rispetto al suo progenitore Logo10 ha una nuova trasmissione silenziosa con denti a lisca di pesce che ne aumenta considerevolmente l’affidabilità e la scorrevolezza; il telaio presenta dei nuovi alloggiamenti per i servocomandi in posizione obliqua, che permettono una trasmissione perfetta dei movimenti al rotore principale. E’ una macchina perfetta; la ho costruita con estrema perizia e al primo collaudo non ho dovuto neanche rivedere il track delle pale o effettuare trimmaggi: smooth as silk. Le pale che ho scelto, le NHP 50cm Carbon Razor ’straight tip’ fanno bel rumoretto durante le manovre più comuni.

Altre caratteristiche generiche: diametro rotore principale 1150 - 1190 mm; pale 500 - 520 mm; rapporto trasmissione: 8,7 : 1 - 12,8 : 1; peso in ordine di volo >2200g.

Eh si, siamo in mezzo a una tempesta e probabilmente il peggio non è ancora arrivato; molti paesi sono sull’orlo della recessione economica o già ci sono dentro. Voglio scrivere quello che credo di aver capito sul perchè attraversiamo una cosidetta crisi finanziaria globale, e come la crisi dei mutui subprime ha investito l’economia degli Stati Uniti e come si è trasmessa la crisi da li a qui.

I Subprime sono dei mutui concessi a clienti ad alto rischio di insolvenza; tutto è cominciato negli US dopo il 2001, quando le banche hanno iniziato a sottovalutare i rischi del concedere prestiti a tassi molto bassi a persone (quindi ad un numero sempre maggiore di clienti, ovviamente) con alta probabilità di insolvenza. Una catastrofe finanziaria alla quale bisogna legare anche la drammaticità di migliaia di famiglie americane che non riuscendo a onorare il proprio debito si trovano senza una casa.

Ma il nocciolo della questione è che molti di questi finanziamenti, una volta concessi dalle società finanziarie, venivano istantaneamente girati alle banche, che li usavano come base per emettere titoli da collocare sul mercato; questa situazione ha investito le banche europee perchè per 6-7 anni hanno venduto ai clienti o si sono comprati fra loro questi titoli… nel caso di mancato pagamento dei debiti (ed è successo), si innesca tutto un meccanismo di insolvenze (clienti vs banche, banche vs banche, banche vs clienti… in tutto il mondo perchè il mercato è globale) e per questo sono a tutt’oggi fallite oltre 23 società specializzate nel settore; inoltre, a fronte dell’enorme massa debitoria accumulata, non c’è da sperare bene per il medio periodo.

E per navigare la tempesta? Si stà fermi. Non è il momento di acquistare/vendere nulla; tra l’altro, probabilmente, questa crisi farà abbassare il costo del denaro e quindi quando la crisi passerà (perchè passerà) accendere un mutuo forse sarà più vantaggioso: è meglio avere un pò d’inflazione che strozzinare la gente che tanto non ti paga.

Microsoft is looking to make jQuery part of their official development platform. Their JavaScript offering today includes the ASP.NET Ajax Framework and they’re looking to expand it with the use of jQuery. This means that jQuery will be distributed with Visual Studio (which will include jQuery intellisense, snippets, examples, and documentation).

Additionally Microsoft will be developing additional controls, or widgets, to run on top of jQuery that will be easily deployable within your .NET applications. jQuery helpers will also be included in the server-side portion of .NET development (in addition to the existing helpers) providing complementary functions to existing ASP.NET AJAX capabilities.

Nokia is looking to use jQuery to develop applications for their WebKit-based Web Run-Time. The run-time is a stripped-down browser rendering engine that allows for easy, but powerful, application development. This means that jQuery will be distributed on all Nokia phones that include the web run-time.


package net.gcmingati.jsp.beans;
import java.util.*;
public class RoomBean implements java.io.Serializable {
private static int index = -1;
private List staffNames;
public static void main(String [] args)
{
RoomBean rb = new RoomBean();
rb.getStaffNames();
}
public RoomBean() {
initStaff();
}
public List getStaffNames() {
for (int i=0; i<staffNames.size(); i++)
{
//return (String) staffNames.get(index);
System.out.println((String) staffNames.get(i));
}
return staffNames;
}
private void initStaff() {
staffNames = new ArrayList();
staffNames.add("Gian Carlo Mingati");
staffNames.add("Francesco D.");
staffNames.add("Fabrizio L.");
}
}


Un semplice esercizio con la sintassi Java; con questa classe - o oggetto - (o JavaBean), visualizziamo gli elementi di un array (di stringhe) su una paginetta JSP (in locale con Jakarta Tomcat) per mezzo dei tags JSTL e del linguaggio di espressione EL.


<jsp:useBean id="stanza" class="net.gcmingati.jsp.beans.RoomBean" />
<ul>
<c:forEach items="${stanza.staffNames}" var="selezione">
<li>
<c:out value="${selezione}"/>
</li>
</c:forEach>
</ul>

E’ che sono stato abbastanza fortunato da poter seguire - obbligatoriamente - un corso di quattro settimane sulla programmazione Object-Oriented, ed in particolare su J2EE (Java Enterprise Edition), ed in particolare sull’utilizzo del framework Java che usiamo qui per sviluppare applicazioni. Un’esperienza che è giusto definire tale, che ha subito stimolato tutta una serie di considerazioni tra le quali, la più importante è che – con Java si può fare qualsiasi cosa. Oggetti, metodi, classi che estendono altre classi, implementano interfacce, iteratori che “iterano”… ma quante classi ci sono? E i Beans? E le Actions? E l’Expression Language di JavaServer Pages? E Processing?

Il bello é che comunque i concetti di base sono applicabili a qualsiasi linguaggio di programmazione (sempre Obj-Oriented), e una volta che sai cosa vuoi ottenere e sai come scriverlo, il solo limite è la tua fantasia; insomma, passo molto volentieri dalla ricerca sul DOM scripting a quella su come creare una applicazione JSP basata sul design-pattern Model-View-Controller; in più stò familiarizzando con altre tecnologie quali ASP (VBScript), .NET (visual basic) e devo, sempre obbligatoriamente ma volentieri, capire che ‘giro’ fà una parte di dati relativi all’ e-procurement di un Gruppo europeo con 100.000 dipendenti e 40 milioni di clienti; questi dati poi, li visualizziamo con web apps sviluppate in JSP o ASP. C’è posto anche per jQuery? Ci stò lavorando…

Il buon John ci stupisce con la sua ultima ‘fatica‘. Il porting del linguaggio di programmazione Processing in JavaScript. Processing.js (così come processing in Java), permette di realizzare applicazioni interattive e farle girare all’interno di un browser, ma la versione js sfrutta l’accoppiata js/canvas (per il momento gli esempi più ‘impressive’ girano su Firefox 3 beta, Opera 9.5 e l’ultimo WebKit Nightly built) e quindi ci vuole Firefox2, Safari3, Opera9 o IE con excanvas. A differenza di processing versione Java, che gira sotto forma di applet nel browser, processing.js usa il tag <canvas>, un ‘elemento’ HTML per mezzo del quale si può disegnare via scripting, - appunto JavaScript - creare animazioni ed effetti grafici. E’ una valida (ma non semplicissima) ed entusiasmante alternativa a Flash e sia questa iniziativa come altre, rivoluzioneranno nel medio periodo il modo di progettare e sviluppare la user interaction e l’ interface design.

Tutto questo fermento in ambito opensource conferma che il mondo continua a muoversi in questa direzione e che il browser non verrà mai abbandonato - come dicevamo nel post sulle web-tv on-demand - ma anzi, lo sviluppo degli stessi permetterà la distribuzione di WebApps sempre più sofisticate e forse, presto, sarà l’unico strumento che gli utenti dovranno avere per poter usare fogli di calcolo, applicazioni di image editing, word processing ecc. Un mondo di applicazioni distribuite che girano tutte, semplicemente nel browser. Questa é la direzione più plausibile, ed auspicabile.

Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to proprietary software tools in the same domain.

Per giocare con processing.js ci vuole una certa dimestichezza coi concetti chiave della programmazione OO e con JavaScript in genere. I miei complimenti a John Resig (già ideatore e team leader di jQuery), per un’altra idea davvero notevole in favore -alla fine- dell’uso di software opensource e della creatività.

Vediamo cosa si può fare con processing.js (questi esempi funzionano tutti con Firefox2 ++): cominciate con questa; non c’è trucco e non c’è inganno (Flash), e tra l’altro, a differenza di qualsiasi DIV, P e famiglia, coi canvas si possono creare forme tonde e lavorare su interazioni del genere.

Sorridete? Fà venire in mente gli ‘anni 2000-2005′ quando artisti e designers di tutto il mondo, con i loro stupefacendi ‘flash experiments’ (Praystation, Bit-101 tanto per citarne un paio tra i più innovativi… all’epoca) contribuirono a rendere Flash quello che è diventato; ma a questo punto, visto il supporto nativo dei canvas per tutti i browser di prossima release, potremmo assistere allo sviluppo di questi frameworks e di questo tipo di tecnologie per lo sviluppo di UI.

Processing.js demos
All Examples Written by Casey Reas and Ben Fry
Basic demos, topical demos, custom “in the wild” demos

Ricetta per lo short-film modellistico: videocamera, passione per gli elicotteri R/C, ottimo ‘pollice’ sugli stick, un certo budget per i viaggi, un centinaio di amici e supporters in giro per il mondo, una colonna sonora.

Ecco World Scenic Flights, uno short film di 8 minuti girato tra le più belle location del mondo: Australia, Brasile, Cina, Egitto, India, Korea, Nepal, Malesia, Messico, Russia, Scandinavia, Senegal, Singapore, Indonesia, Thailandia; sono lo sfondo per un volo estremamente tecnico e pulito di un elicottero R/C (uno Henseleit Three Dee) pilotato da Tobias Wagner (Heligraphix), già autore di uno dei primi atterraggi su soffitto mai tentati (2002) .

Si é rischiato molto anche per eseguire alcune riprese (come sulle cascate del Niagara, o sulla baia di Sydney), in condizioni ambientali tali da rendere impossibile il recupero del modello in caso di crash.
Molto creativo, piacevole da guardare e fatto bene.

We started off documenting very demanding R/C helicopter stunts and world records, performed by ourselves.
— Tobias U. Wagner

Lo Henseleit Three Dee MP XL E, progettato e prodotto da Jan Henseleit (Jübek - Germania), è la versione elettrica (12 celle li-po cioè 44.4 Volt, per 2000+ Watt di assorbimento cioè circa 3 cavalli vapore) ed XL (Xtra Large) con pale da 700mm (tipo NHP Razor), della meccanica Three Dee MP acquistabile su Revolution Models o su Henseleit Helicopters; un modello del genere, completo, costa intorno ai 2000 euro, TX escluso.

Tobias ha portato con se l’elicottero in giro per il mondo, con i tre (credo) HeliGraphix hanno girato e montato il video, poi é stata aggiunta una colonna sonora ad-hoc realizzata da Patrick Damiani e ne è nato uno short-film che merita di essere definito tale, con un finale ‘emozionale’; non si tratta dell’hovering nel piazzale sotto casa, ma il risultato del connubio pollice-sfondi-volo 3D tali da rendere questo filmato unico nel suo genere. Andava annotato e diffuso anche da qui.

Aaah, finalmente ci siamo tolti di mezzo una parte (seppur minima) di casta, e abbiamo scongiurato il pericolo di un nuovo esecutivo di sinistra. Oggi il verdetto finale delle elezioni in Italia, ma come già si è appreso dal tardo pomeriggio di ieri, il PDL ‘infila’ 171 senatori in parlamento contro i 130 del PD. Già ieri sera si avvicinava un tornado di proporzioni inaspettate, in grado di spazzare via l’arcobaleno e così (finalmente) mettere fuori combattimento la sinistra radicale; - nessun - rappresentante in Parlamento; Bertinotti si dice pronto ad andare in pensione; ieri in TV le sparava davvero grosse (come al solito) della serie “abbiamo fallito perché dalla nostra ‘posizione’ in Parlamento non siamo stati in grado di cogliere le difficoltà e le richieste degli Italiani…” bah sono parole che si commentano da sole. Sarà che siete stati tutti troppo occupati a farvi gli affari vostri?!

In Italia si và affermando il bipolarismo (meno litigi in Parlamento?) e spero vivamente che questo sia l’inizio di un vero processo di trasformazione e modernizzazione di questo Paese. Di seguito riporto la mia wishlist, se questo post sarà ancora visibile (credo di si) fra cinque anni, vedremo i risultati della scelta fatta da gran parte degli elettori.

1. riforme
2. - tasse
3. + sicurezza
4. infrastrutture
5. ambiente ed energia
6. lotta all’evasione fiscale

Se tutti questi punti venissero realmente sviluppati, forse fra cinque anni ci troveremmo con qualche migliaio di clandestini/delinquenti in meno, i conti personali un pò meno in rosso, qualche treno ad alta velocità, qualche milione di tonnellate di CO2 in meno, vedremmo riformato il mercato del lavoro, e quelli che hanno le Ferrari solo grazie ai soldi non versati al fisco andare in giro con la Punto a Metano.

Update 28/04/2008
Gianni Alemanno Sindaco della Capitale.
La voglia di ordine, sicurezza e cambiamento da parte dell’elettorato ha spazzato via l’equilibrio impossibile di una Capitale in bilico fra magìe cinematografiche e periferie abbandonate a se stesse.

E’ stata lunga ma dopo qualche mese di lavoro (freelance, a partire dalle ore 20 p.m, quindi se fossero continuativi sarebbero una quindicina di giorni) sono felice di postare il link al nuovo sito na3 Studio di Architettura.

Come già accennato in qualche post precedente, per l’interaction design ho utilizzato jQuery; in particolare, per questo progetto ho usato i plugins Cycle, SafeMail, Reflect, e ho scritto neanche duecento righe di codice.
Il sito si presenta estremamente semplice nel design, chiaro, pulito, leggero e snello nel markup, potente e conciso nel codice JS.

Da segnalare la homepage, la pagina studio e la pagina indice dei progetti; quest’ultima in particolare si basa sul menu accordion già visto su questo mio sito, ma in più può far scrollare - con effetto easing - gli elementi figli di una categoria (projects>design), se questi sono più di cinque. Abbiamo realizzato (customizzandolo nello style e in qualche elemento di markup) anche un corporate blog per na3, powered WP 2.5.

Very clean and concise markup, degrades wonderfully. Truly the type of work one would look for and appreciate.
— Kris, from the jQuery discussion group

Il lato backend è stato curato dal mio esimio collega freak Heracleum (di cui non abbiamo una foto), in PHP.
Enjoy the new na3 website!