Tag Archives: typography

gridTyper


231174
75121
26426

gridTyperSet
gridTyper.

Applet and source: gridTyper.
Made with Processing + HE_Mesh.

L’estrusione dei pixel font ha destato il mio interesse già in passato 123 ma gridTyper è l’implementazione di un’idea di Jan Vantomme (vormplus) sul cui blog due o tre settimane fa ho trovato un interessantissimo post sul processo utilizzato per realizzare delle bellissime lettere in plastica acrilica delle dimensioni di 40 × 50 × 20 mm usate per la corporate identity di cloudswimmers. Sfortunatamente, nonostante abbiano realizzato questo set di lettere con Processing ed HE_Mesh – ambedue opensource – non hanno diffuso il codice sorgente; mi sono quindi permesso di seguire il processo descritto nel post per realizzare io stesso un tool che potesse estrudere un pixel font (direttamente sul keyPress a runtime) e smussarlo (Catmull-Clark); questi oggetti – se suddvisi ulteriormente possono divenire molto lisci al tatto – e possono essere salvati in .stl per poi essere stampati in 3D con shapeways o i.materialise tramite processi di selective laser sintering (SLS). Full credits a vormplus quindi per l’idea ma sopratutto grazie a Frederik che mi ha supportato nella realizzazione del tool, chiarendomi dubbi e perplessità su come procedere.

Typo Mishap

typomishap
Typo Mishap. Rendered with P5Sunflow.

Typo Mishap. Applet and source code: http://www.openprocessing.org/visuals/?visualID=9333

Come anticipato, inizio a studiarmi jBullet – il Java port di Bullet Physics (open source collision detection, rigid and soft body dynamics library), visto che é proprio quello che serve per aggiungere convincenti effetti di fisica agli oggetti 3D disegnati in Processing; la lib é molto complessa ed espone centinaia di classi e metodi per calcolare collisioni, primitive, inierzia, posizioni, piani, velocità, accelerazioni, punti di contatto, shapes convesse e concave, eventi, algoritmi ecc… Si é reso necessario un decompiler per leggere le classi (.java) contenute nel .jar della demo Applet originale; questo é l’unico modo per poter affrontare le API di Bullet Physics almeno per identificare chi-fa-cosa. In questa situazione iniziale é chiaro che per comprendere, devo ricostruire la demo base trovando però un punto di contatto efficiente tra le funzionalità di disegno (rendering) in Processing e quelle di calcolo di forme e comportamenti in Bullet. Comunque – e questa é la parte che mi entusiasma – non ci sono limiti a ciò che si può realizzare, perché questa libreria é scelta come framework per le simulazioni da almeno 3 su 10 tra le Top Game Companies che sfornano videogames per Wii e PS3.

r003
lettercam
Kill ‘em all! Posso creare forme e lanciarle nella direzione del lookAt point della camera partendo dalla posizione della stessa. Delle vere e proprie cannonate!

Nello sketch in cui ho tentato di usare per la prima volta Bullet, riprodotto nel video in alto, ad ogni key press la lettera o il numero corrispondente vengono creati e per effetto della gravità piombano sul piano sottostante; le forme sono dei veri e propri corpi rigidi che si fermano sui loro punti di contatto senza attraversarsi. La versione con cui si può ‘giocare’ sotto forma di Applet corredata di sorgente, è come al solito disponbile su OpenProcessing. Col mouse e tasto sx si ruota, col dx si fa zoom, e con la tastiera si creano i Characters.

Il poter simulare la matericità delle cose, ottenere reazioni in seguito ad azioni (come avviene nel mondo che ci circonda) suscita in me la stessa ‘frenesia creativa’ che potrebbe avere un pittore messo di fronte alla più grande tela bianca che potesse desiderare.

 

textrusion

two
letterExtruder http://www.openprocessing.org/visuals/?visualID=9401

Come già visto in qualche post precedente, l’oggetto PGraphics permette di disegnare offscreen; è possibile poi analizzare pixel-per-pixel l’immagine PImage generata ed utilizzare le informazioni come colore e posizione dei pixel per inventarsi qualcos’altro. Da qualche giorno ho scoperto una tecnica per scrivere in 3D partendo da ‘pixel font’ originariamente renderizzati in 2D (i pixel font sono caratteri appositamente realizzati per poter risultare leggibili a dimensioni ridottissime, molto usati nei siti Flash, senza antialias) su di un PGraphics. Ho realizzato queste due Applet dalle quali potrete capire il funzionamento ma avrete la pazienza di studiarvele senza ulteriori indicazioni. Intanto sto indagando ulteriormente per applicare della fisica con jBullet, al fine di poter simulare la collisione tra le forme. Posterò gli sviluppi.

live Input

Ecco, nello scorso post dicevo che forse sarebbe valsa la pena di proseguire la ricerca nel campo dei ‘pixel’ per arrivare ad una specie di word processor che usa questo sistema di particelle per comporre i caratteri a video; una prima Applet corredata di sorgente è visualizzabile qui ed in questo video (anche .mov format). Per ora ha un bug: non posso cancellare i caratteri e c’è un problema con l’ultima lettera a dx.

We are Pixels.

Esigenza: trovare un modo per spostare dei punti (istanze di una ipotetica classe con proprietà relative a massa, accelerazione, velocità e posizione e relativo moto e forze – da qui l’effetto ‘organico’ se si usano sempre Vettori per muovere un punto) verso un determinato altro punto. Esiste in processing un metodo statico (get(x,y)) per ricavare il colore e (per come esso viene ricercato) la posizione x y del suddetto pixel (con un doppio loop per popolare un Array 2D).
Ipotizzando di avere una scritta o una forma all’occhio non visibile – perchè renderizzata con un canale alpha troppo basso, ma sufficiente ad essere rilevato come un valore rgb (es. 122545) – ecco che di conseguenza si può (sopratutto) conoscere quella posizione in coordinate cartesiane xy; da qui ho voluto – con la solita classe dei precedenti esperimenti che però appena sono creati vengono solo accelerati verso un altro punto – creare delle istanze che sanno – anche – quale è la loro origine, cioè per ognuna una posizione ‘originaria’ espresa in x ed y alla quale si può ‘tornare’ magari premendo un tasto.
Più o meno è questo il concetto di base e comunque il codice è visualizzabile in questa pagina insieme alla Applet. Premendo un tasto, tutte si spostano verso la loro origine perchè viene applicata una accelerazione verso quel punto; tutte insieme danno origine ad una forma o come in questo caso, del testo. Ma potrebbbe essere il solo colore nero di una qualsiasi foto, non visibile all’occhio ma scannerizzata pixel per pixel da una più evoluta classe Pixel(x, y, color, mass etc)…

Il prossimo step (e su questo progetto forse vale la pena spendere qualche ora) sarebbe di far andare le particelle in una certa direzione che viene impostata in tempo reale, cioè caratteri che si formano mentre si scrive sulla tastiera … E se pò fà…

Ah un’ultima nota su Processing. Ovviamente per quasi qualsiasi applicazione scriviate e certamente per tutte quelle che hanno un otput video, c’è sempre la possibilità (per default, solo importando una delle librerie presenti nel pacchetto) di fare un movie quicktime della grandezza che la vs macchina permette di generare come questo (QT movie 19.729 Kb) in tempo reale mentre la vostra applicazione gira nel suo IDE oppure gererare jpg, png, tiff e pdf.