Suomenlahden majakat visualisoituna p5js-koodilla editor.p5js.org/atommi/fu…

Ethan Mollickin tuore julkaisu esitteli OpenAI O3 -kielimallin kyvykkyyksiä. Siitä inspiroituneena kokeilin muita kielimalleja ja itselle ennestään tuttuja työkaluja.

Anthropic Claude 3.7 piirsi svg-kuvan Mollickin promptilla, mutta majakoiden sijainnit olivat Clauden tarjoamassa versiossa päin honkia. Googlen Gemini ei suostunut piirtämään SVG:tä, mutta keräsi majakoiden tiedot taulukkoon ja antoi lisäksi Python-koodin, jolla sai itse generoitua SVG-kuvan. Tämän SVG-kuvan sain helposti käännettyä myös p5js-koodiksi. editor.p5js.org/atommi/fu…

Päädyin lopulta pyytämään Gemini 2.5 pro:lta yksityiskohtaisen taulukon kaikista Suomenlahden majakoista. Tallensin taulukon sellaisenaan .csv muodossa. Yhdessä Gemini 2.5 flashin kanssa sitten “vibekoodailtiin” varsin monimutkainen p5.js -koodi, joka hyödyntää suoraan .csv-taulukon dataa, mm. light characteristic lyhenteillä esitettynä [ Fl(2) W 10s ].

“Koodaamiseen” käytin VS Codea Cline -lisäosalla, sekä Gemini 2.5 Flash APIa, jota voi testata ilmaiseksi. p5js-sketchin hahmottelu ja koodimuutokset toteutin pääosin ohjaamalla prosessia luonnollisella kielellä, eli esitin siis pyyntöjä “tee näin”, “korjaa tämä”, “muuta tämä” jne.

Taulukkoon päätyneiden nimien seassa on myös pari majakkaa, jotka eivät ole aktiivisessa käytössä. Karttapohjan liittäminen skaalautuvaan p5js-sketchiin osoittautui myös haastavaksi, eli en mene takuuseen siitä että kaikki majakat olisivat oikealla sijainnilla.

Linkki Mollickin alkuperäiseen julkaisuun: www.linkedin.com/posts/emo…