Kuutio: Ohjelmointi

Törmäsin reaktiivisen Tangle projektin kautta Bret Victoriin, jonka projektit ovat aika kiinnostavia. Victor oli viime vuoden loppuun asti Applella tekemässä prototyyppejä iOs-käyttöliittymistä. Taustaltaan hän on sähköinsinööri.

Tangle pohjautuu reaktiivisen ohjelmoinnin ajatukseen siitä, että datojen välisten dynaamisten yhteyksien ohjelmoinnin pitäisi olla mahdollisimman helppoa. Käyttöliittymässä tämä tarkoittaisi sitä, että kun esimerkiksi jotakin parametrin arvoa muutetaan, kaikkien sitä parametria käyttävien elementtien tulisi päivittyä.

Bret Victor on tehnyt muutakin kiinnostavaa. Hänen Magic Ink -esseessään kuvataan polveilevasti, mikä on nykyisissä käyttöliittymissä ongelmana ja miten niitä tulisi parantaa. Hyvänä ajatuksena esseessä oli, että turhaa interaktiota tulisi välttää (ja sen sijaan, kun mahdollista, keskittyä informaation selkeään esittämiseen – visualisointiin). Esseessä myös lähdetään mukavan lennokkaasti miettimään oppivaa ohjelmointia, hypertekstin historiaa ja niin edelleen.

Tavallaan Victorin pohdintojen idealismi on naiivia. Mutta toisaalta on hienoa, että joku yrittää oikeasti yhdistää eri tyyppisiä, rohkeita ajatuksia käyttöliittymien tekemisestä ja interaktiosta.

Victor vaikuttaa hiukan egomaaniselta ja myös keräilijätyypiltä. Sivuilla on aikajanat siitä, mitä Victor on tehnyt eri vuosina ja tallenteita herran ikivanhoista webbisivuista ja projekteista. Aikajanojen perusteella nyt olisi jonkinmoinen erakkovuosi alkamassa, ilman sosiaalista kanssakäymistä muiden kanssa (vaiko ainoastaan kodin/työn ulkopuolella?).

Luovalle kaverille ei ilmeisesti lopulta NDA:n alla protoilu enää maistunut. Ymmärrän tunteen, mutta ei kai nyt tuon olisi pitänyt olla mikään yllätys?

Vaatimattomasti Victor yrittää myös käydä matematiikan kimppuun kill math projektillaan. Ymmärrän (idealistisen) tuskan. Esimerkiksi lukiossa minustakin tuntui, että matematiikan ja fysiikan opetus ei ollut riittävän visuaalista. Monia konsepteja voisi opettaa hyvillä visualisoinneilla, esimerkiksi: sini ja kosini, integrointi ja derivointi, permutaatiot, newtonin menetelmä, lepo- ja liikekitka ja valon taittuminen.

Voisi ajatella että koodareiden olisi hyvä lukea ohjelmakoodia. Mitäköhän mainittavanarvoisia koodinpätkiä olisi joihin kannattaisi tutustua? Tällaisia tuli mieleen, Coders at Work -kirjan inspiroimana:

Kuuhunlaskeutumiskoodia.

MacPaintin lähdekoodi.

Knuthin Adventure-pelin Literate-versio (sama pdf-muodossa).

Webkitin koodi, esimerkiksi affinimuunnokset.

Sain vihdoinkin perjantaina FrozenRails-loppupresiksen aikana Zoomooz-Javascript-kirjaston sellaiseen kuntoon, että kehtasin laittaa sen verkkoon jakoon. Kirjaston avulla voi zoomata sivua niin, että tietty html-elementti näkyy täysilevyisenä selainikkunan keskellä. Se toimii Webkitissä ja Firefoxissa.

Koska Firefox ei tue vielä css-transformaatioiden animointia, vaati Firefox tuki jonkin verran javascript-magiaa. Muutenkin oli hauskaa pyöritellä matriiseja javascriptissä. Ihme kyllä, javascript-temput tuntuisivat myös toimivan! Lähdekoodista voi ihmetellä tarkemmin, mitä kaikkea tuolla tapahtuu.

Tämä on myös ensimmäinen open source -kirjasto, jonka olen tehnyt. On kiinnostavaa nähdä, olisiko tällä käyttöä myös jollekin toiselle.

Viime viikkoiseen suositusjärjestelmäpostaukseen liittyen tuli vastaan kiinnostava blogikirjoitus Panjivasta, joka käyttää PageRankia logistiikan ja liiketoimintaverkkojen optimoinnissa.

Ajatus on vähän vastaava kuin lokaaleissa hauissa: hyödynnetään tietoa siitä, kuka ostaa keneltä ja sitä kautta hahmotetaan keskeiset (ja luotettavat) toimittajat. Mielenkiintoista myös, kuinka nettialgoritmit voivat vaikuttaa perinteisen teollisuuden yritysten toimintamalleihin.

Mietin että voisi tehdä 3d-kirjan javascriptillä jota voisi selailla kursorilla sivuja kääntämällä. Kirja tuntuisi kuin oikealta, sillä sivujen käyttäytymisen pohjana olisi 2d-fysiikkamalli. Tietysti olisi hienoa jos kirjan sivuille voisi piirtää Canvas-elementin avulla ja piirrokset saisi myös talteen palvelimelle.

Toteutukseen ajattelin käyttää Box2d-fysiikkaengineä ja WebGL:ää – tai sitten css3 3d-muunnoksia. Box2d-kirjastosta on olemassa Javascript-porttaus, joka on portattu automaattisesti vanhasta ActionScript-versiosta kirjastosta.

Tässä kohtaa ajatukset alkoivat kuitenkin jo harhailla — kirjastojen automaattinen porttaaminen kielestä toiseen voisi olla myös kiinnostavaa. Aloin miettiä oman porttauksen tekemistä ja katsoinkin työkaluvaihtoehtoja. Voisin joko konveroida sen uudemmasta ActionScript-portista, tai sitten suoraan vaikka Javasta.

Javaa voisi kääntää JavaScriptiksi GWT:llä, mutta en tiedä, olisiko syntyvän koodin lisenssi silloin myös googlefioitua. Apuna voisi käyttää GWT Exporter-kirjastoa tai sitten j2js-esimerkkikoodia.

ActionScriptin voisi kääntää JavaScriptiksi varmaankin melko triviaalisti, joko omalla parserilla tai Javalle löytyvän Rhino-JavaScript-moottorin Token ja TokenStream -luokkia puukottamalla. Tietysti myös RegExpillä, jos haluaa tehdä sen likaisesti.

Yksi projekti-idea muuttuikin kahdeksi. Kumpaakohan tekisin, vai teenkö kumpaakaan?

Olisi mahtavaa, jos Git-tyylisen versionhallinnan saisi näkymään ohjelmointiympäristössä niin, että jokaisen koodipätkän osalta ruudulla näkyisi jatkuvasti, millä kuvauksella (ja kenen tekemänä) se on kommittoitu. Eräänlainen paranneltu “Show annotations”, siis. Tällä tavoin kommittikuvaukset toimisivat samalla koodin dokumentaationa. Onkohan tällaista tehty?

Tein Garalde-Skype-tyylin (zip), kun vakiotyyli alkoi ahdistaa. Pohjana on Skypen perustyyli. Tyyliä on testattu ainoastaan Macissa ja sen pitäisi asentua tuplaklikkaamalla.

Briefly in English: Garalde is a theme for Skype for Mac. It has been tested on Skype 2.8.0.722.

Open Processingin saitilla on käynnissä Tiny Sketch -kisa, jossa tavoitteena on koodata mahdollisimman hieno, korkeintaan 200 merkin mittainen Processing-ohjelma. Intouduin tekemään kisaan muutaman kokeilun, vaikka en tiedäkään, onko moisten koodaaminen kovin tervehenkinen harrastus. Javan ja Processingin verboosin syntaksin vuoksi 200 merkkiin ei kovin monta koodiriviä saa mahdutettua.

Jäin tänään kookoskeiton äärellä pohtimaan, miten pilkkoa suorilla veitsenleikkauksilla sipuli niin, että paloista tulee mahdollisimman samankokoisia? Säteittäin paloittelemalla sisimmistä sipulikerroksista tulee paljon pienempiä paloja kuin ulommista. Ongelma tulee vastaan jos haluaa isoja sipulinpaloja — pieneksi kuutioidessa paloista saanee helposti suurin piirtein samankokoisia. Tätä voisi varmaan simuloida.

Tein vielä uuden version matka-aikakartasta (ks. aikaisempi postaus). Kuvaa klikkaamalla pääsee isompaan versioon. Kuvassa valkoiset käyrät vastaavat 10, 20, 30, 40, 60 ja 90 minuutin matka-aikoja.

Python-skripti graafin piirtämiseksi matka-aikadatasta (graafi on vielä tämän jälkeen yhdistetty Googlen karttaan fotarissa):

import pylab, scipy, numpy, csv
import matplotlib.pyplot as pyplot
from scipy import signal, ndimage

# setup constants

MAX_VALUE = 120
SCALING = 10
SMOOTHING = 50
CONTOUR_LEVELS = [10,20,30,40,60,90]

# import data

fileName = 'routeDataGrid.raw'
w,h = 90, 80

sr = csv.reader(open(fileName), delimiter=',')
x,y = 0,0
Z = numpy.zeros((h,w))
for y, row in enumerate(sr):
   for x, item in enumerate(row):
      Z[y][x] = int(item)

Z = Z[::-1]
Z[Z>MAX_VALUE]=MAX_VALUE
Z[Z==-1]=MAX_VALUE

X, Y = numpy.meshgrid(numpy.arange(w), numpy.arange(h))

# interpolate

newx,newy = scipy.mgrid[0:1:complex(0,h)*SCALING, 0:1:complex(0,w)*SCALING]
coords = numpy.array([newx*(h-1), newy*(w-1)])

Z_large = ndimage.map_coordinates(Z, coords, order=3)
X_large, Y_large = numpy.meshgrid(numpy.arange(w*SCALING), numpy.arange(h*SCALING))

# smooth (this would be faster with fft)

def gauss_kern(size, sizey=None):
   size = int(size)
   if not sizey:
      sizey = size
   else:
      sizey = int(sizey)
   x, y = scipy.mgrid[-size:size+1, -sizey:sizey+1]
   g = scipy.exp(-(x**2/float(size)+y**2/float(sizey)))
   return g / g.sum()

G = gauss_kern(50)
Z_smooth = scipy.signal.convolve(Z_large, G, mode='same')

# plot contour

figsize=(numpy.array(Z_smooth.shape)/100)[::-1]
pyplot.rcParams.update({'figure.figsize':figsize})
pyplot.figure()
pyplot.axis('off')
pylab.imshow(120-Z_smooth, cmap=pyplot.cm.jet)
pyplot.contour(X_large, Y_large, Z_smooth, CONTOUR_LEVELS, colors='white', linewidths=1.5, linestyles='solid', antialiased=True)
pyplot.subplots_adjust(bottom=0.0, top=1.0, left=0.0, right=1.0, hspace=0.0, wspace=0.0)
pyplot.savefig('mapimage.pdf', format='pdf')



En ole vielä täysin tyytyväinen väritykseen. Idea valkoisista ääriviivoista tuli Chris Lightfootin toteuttamasta Lontoon matka-aikakartasta. Silti, ehkä vastaava kuva ilman ääriviivoja (mutta eri värisillä alueilla) olisi selkeämpi.

Chris Lightfootin ja Tom Steinberg kartasta on myös tehty interaktiivinen versio vuonna 2007. Siinä voi valita, kuinka pitkän työmatkan on valmis tekemään ja paljonko on valmis maksamaan asunnosta — kartta näyttää kaikki alueet jotka vastaavat näitä vaatimuksia.

Kiinnostava sivuhuomio: interaktiivisen kartan toteutukseen osallistui myös Tom Carden monia hienoja juttuja tekevästä Stamen Design -toimistosta. Tom Carden on tullut vastaan hienojen Processing-härpättimien tekijänä. ja joskus olen vilkuillut myös hänen Delicious-linkkilistaansa.

Delicious-naapurustossa vastaan tuli Smart History, jossa maalaustaiteen klassikoita on järjestetty ajan mukaan. Tämän pohjalta tuli mieleen, että voisi tehdä verkkopalvelun, jossa käyttäjät saisivat tehdä itse omia aikajanoja haluamistaan aiheista ja haluamallaan tarkkuudella. Aikajanat voisi sitten visualisoida hienosti vaikkapa Flash/Flexillä.

Pikaisella vilkaisulla selvisi, että aikajanapalveluita on jo toteutettu. Googlettamalla löytyi kaksi palvelua tähän tarkoitukseen: Time toast ja Xtimeline. Kumpikaan näistä ei ole — tietenkään — yhtä näyttävä, kuin mitä olin ajatellut, mutta kiusallisesti ne ovat silti ihan kelpo inkarnaatioita aiheesta.

Lisäksi tuli vastaan MIT:lta lähtöisin oleva Simile-projekti (nykyään Google Code:n alla), jossa on toteutettu Ajax-pohjainen aikajanamoduuli.

Ideaa pitänee siis vielä ainakin tarkentaa, ennenkuin sitä alkaa toteuttaa.

Saatiin vihdoinkin kirjoitettua kunnollinen artikkeli meidän verkonklusterointimenetelmästä. Artikkeli löytyy myös arXiv-preprint-tietokannasta: Component models for large networks. Nyt täytyy vain toivoa, että artikkeli hyväksytään julkaistavaksi!

Miksi ihmeessä generic-tyyppejä (parametroituja tietotyyppejä) ei voi Javassa laittaa arrayihin (taulukoihin) ilman, että saa herjauksia osakseen? Varmaan tähän on joku kääntäjä- tai tulkkitekninen selitys, mutta tällaisen nyt pitäisi vaan olla mahdollista:

List<String>[] arrayOfStringArrayLists = new ArrayList<String>[10];

Ok, myönnän, että tuon voi kiertää monella tapaa. Ja varmasti Java-insinööreillä on ollut syynsä ratkaisulle (→ esim. Sunin generics-tutoriaali). Mutta silti se ketuttaa :).

Neal Gafter Genericsien toteutuksesta Javassa.

Johannes mainitsi, että ongelma ratkeaa ehkä Java 7:ssä. Aiheesta lisää Eclipseconin Java 7 -kalvoissa (pdf).

Pitäisi varmaan vihdoinkin selailla Christopher Alexanderin teosta “Notes on the Synthesis of Form.

Ketäpä insinööriä tai matemaatikkoa ei kiinnostaisi ajatus esteettisten asioiden mallintamisesta? Siis siitä, miten voisi tehdä automaattisesti kauniita asioita, kuten muotoja, kuvioita tai — taidetta. Joillekin matematiikka edustaakin täydellistä kauneutta, fraktaalit on jonkinlainen luonnon ihmeen ilmentymä.

Mutta, mutta. Taidetta ei saa kiteytettyä muutamaan matemaattiseen kaavaan. Estetiikassa on kyse viestien välittämisestä, tunnetiloista ja kokemusten luomisesta. Niiden matematisointi ei taida olla mahdollista.

Ja toisaalta, esimerkiksi lehden taitto ei ole välttämättä aina mitään avaruustiedettä, tai kuvan sommittelu. On tyypillisiä jakoja ja ratkaisuja, jotka toistuvat taitosta toiseen ja kuvasta toiseen. Niistä voidaan sitten tehdä erilaisia, usein hyvinkin ovelia, tietoisia poikkeamia.

Design-kone

Jossakin näiden välillä on alue, joka kiehtoo insinöörimieltäni. Mitä osia visuaalisesta asettelusta voisi automatisoida? Mitä iloa siitä voisi olla? Voisiko se jopa antaa inspiraatiota?

Tietysti vakavissaan tehdyt design-koneet aina haiskahtavat vähän fraktaalitaiteelta.

Mitään absoluuttista “design-konetta” ei voi tehdä, mutta sopivalla, omalla muoto- ja merkityskielellä voisi saada kaikkea kivaa aikaiseksi. Vähintäänkin jonkinmoisen ohjelmallisen lelun, jossa parametreja sopivasti justeeraamalla voisi vaikuttaa asetteluun, kompositioon.

Muiden tekeleitä

Xeroxin insinörit ovat kehittäneet automaattisen työkalun taittoon. Kiinnostavana sivuhuomiona, artikkelin pääkirjoittaja Steven Harrington on saanut tsiljoona patenttia aiheeseen liittyen!

Vähän vastaavia juttuja ovat pohtineet David Chek Ling Ngo ja kumppanit käyttöliittymien estetiikan matemaattisessa teoriassa.

Yksi estetiikan peruspalanen on symmetria, jota on tutkittu myös HP:n laboratoriossa.

M.W. Kauw-A-Tjoe on pohtinut vastaavia aiheita gradussaan. Hänen järjestelmänsä tekee SVG grafiikkaa automaagisesti. Itse asiassa, gradun Mondrian-tyyliset hässäkät tuovat mieleen Oksan lukioprojektin. Gradussa on myös kiinnostavia lähteitä, kuten Kirschin artikkelit “Computer Grammars for Syntactical Analysis of Paintings” ja Using Computers to Describe Style.

Myös aiemmin Kuutiossa mainittu Joshua Davisin “Composition Generator”-järjestelmä tekee vastaavia asioita. Ja olenhan jo aiemminkin, vuonna 2002, funtsinut evolutiivista taidetta, eli jonkinlaisesta pitkäaikaisesta kiinnostuksen kohteesta (tai perversiosta) taitaa olla kyse. Adoben saitilla on muuten hienoja kuvia, jotka on tehty Davisin systeemillä.

Generator.x:n generative-tagin alta löytyy monenmoisia, kiinnostavia projekteja.

Bauerly ja Liu: Sommitelmien testaamista käyttäjillä.

Esteettiset peruspalaset

Tässä nyt liikutaan aika pienessä estetiikan subsetissä, jossain abstraktin taiteen tai lehden taiton välimaastossa. Siis mietin nyt lähinnä kuutioiden asemointia suhteessa toisiinsa valkoisella pinnalla (wikipedia: minimalismi).

Kiinnostavaa on objektien suhteet pintaan, niiden väliset koot, symmetria, järjestys/epäjärjestys, peräkkäin olevat kappaleet, poikkeamat ja erilaiset hahmopsykologiset asetelmat.

Tietorakenne

Ensin pitäisi olla malli. Siis joku rakenne, joka kuvaa, mitä tehdään. Objektien väliset suhteet voisi ajatella esimerkiksi puuna, jossa kaikki elementit liittyvät hierarkisesti toisiinsa. Toinen vaihtoehto olisi verkko, jossa suhteet, symmetriat ja valta-asetelmat objektien välillä ovat monimutkaisempia. Tai sitten voisi lista säännöistä, jotka järjestelmän pitäisi toteuttaa.

Kuva on M.W. Kauw-A-Tjoen gradusta.

Välillä roskapostien tekstigeneraattorit tuottavat todellista runoutta. Tämän roskapostitekstin lauseet on ilmeisesti haettu netistä ja valittu sen perusteella, että niiden rakenteet ovat epätodennäköisiä.

Subject: In the main UIGroup, a panel gives you a display area for the list types and status information about the list items selected.

Then my father kicked the door open and got out. The Board Number is the ID number of the modem that received the incoming message. So he got embarrassed (I think), withdrew his hand and placed the check on the edge of his desk. With his mouth full of news.

Those who possessed tents could charge a high fee for their rental. PIO Transfer Mode=Maksimalni PIO transfer mod Max. Execute novamente o DIGTRX. There was more to be done on it. Those who know would forget. While the Panel2 control is still selected, from the Win32 page, double-click the TreeView control. From all the fields above, we know the partition ends at sector 63, head 127, cylinder 25. She might like something tasty.

Snarling wolves dodged and leaped, twisting in the air, jaws snapping. I can’t find decent documentation on it anywhere. With long metal tongs he reached into a giant thermos flask and pulled out the supercold bucket, which was about the size of two beer cans side by side. Yet if they were both sampled and combined with XOR, the result would be zero most of the time. But this night was somehow different from other nights. So it may hit us anytime.

They become so when they refuse to trust their lovers. Who will woo you. The shortcut keys ALT+F7. We are still groping perhaps, but we grope intelligently, like a gynecologist feeling a tumor. Landratov, why don’t you go bring a rag. This chapter also contains information about how you can access the attributes of a file, such as its owner and file protection modes.