Animant el cal·ligrama de les formigues de Salvat-Papasseit amb ChatGPT

Un exemple senzill de com la IA generativa (en aquest cas, ChatGPT) ens pot ajudar a fer una tasca que, a priori, no sembla del seu regne: crear una animació a partir d'un cal·ligrama.

Comparteixo el vídeo amb l'animació creada a partir del famós cal·ligrama de les formigues de Salvat-Papasseit, i tot seguit comparteixo la conversa que he tingut amb ChatGPT per generar-ho.

Conversa amb ChatGPT 4o:

Eduard: Et passo la imatge del Cal·ligrama de les formigues de Papasseit, però sense el text, només amb el dibuix de dalt a l'esquerra i el de baix a la dreta. Vull que creïs una animació fent servir P5.js, que es pugui obrir a l'editor en línia, i que imiti el moviment de les formigues des d'un dibuix fins a l'altre, on cada formiga serà una lletra del text original del cal·ligrama: "camí de sol - per les rutes amigues - unes formigues". És a dir, l'efecte és que el text va apareixent des de dalt a l'esquerra i va cap a baix a la dreta, seguint una trajectòria corba, en forma de S inclinada, com en el cal·ligrama original. El fitxer que pujaré a P5.js, amb la mateixa imatge que t'adjunto aquí, es dirà poema.jpg. El llenç a P5.js ha de tenir la mateixa mida i proporcions que la imatge adjuntada.

[Aclariment: P5.js és una llibreria de JavaScript que permet crear fàcilment gràfics interactius, animacions i projectes artístics al navegador, pensada especialment per a l’art generatiu i l’aprenentatge creatiu.]

ChatGPT 4o: Perfecte! Aquí tens el codi P5.js per crear l'animació que descrius:

• Cada lletra del text "camí de sol - per les rutes amigues - unes formigues" es mou com si fos una formiga.

• Les "formigues-lletres" apareixen des de la flor (dalt a l’esquerra) i es desplacen cap a l'estrella (baix a la dreta).

• La trajectòria segueix una S inclinada, com en el cal·ligrama original.

• La imatge poema.jpg es mostra de fons i ha de tenir el mateix nom al teu projecte de P5.js.

Posa aquest codi a l’editor https://editor.p5js.org i assegura’t que has pujat poema.jpg com a imatge del projecte. [aquí m'adjunta el codi en P5.js]

Eduard: El resultat és molt bo, però es poden fer alguns petits canvis per millorar-ho. Les lletres han de ser una mica més grans, per a llegir bé el poema. Les lletres haurien d'anar apareixent en l'ordre invers, si no és impossible llegir el poema, ja que queda escrit al revés. A més, estaria bé que quan cada lletra arribi al final del recorregut, desaparegui i torni a aparèixer al punt inicial, tornant a començar el recorregut, repetint tota l'animació tres vegades.

ChatGPT 4o: Perfecte, molt bones observacions! Aquí tens el codi actualitzat amb:

1. Lletres més grans per llegir millor el poema.

2. Ordre invers de les lletres, així el poema es llegeix correctament mentre es va formant.

3. Repetició del recorregut de cada lletra un cop arriba al final, i això es fa 3 vegades per lletra abans d'aturar-se.

Nou codi P5.js: [aquí m'adjunta el codi actualitzat en P5.js]

Eduard: Podríem fer que les lletres es vagin inclinant suaument en funció del punt de la corba on són?

ChatGPT 4o: Sí, molt bona idea! Afegir una inclinació suau de les lletres segons la corba ajudarà a reforçar la sensació de moviment orgànic, com si les "formigues-lletres" s'adaptessin al terreny mentre caminen.

Com ho farem:

Calcularem la derivada de la corba (la seva tangent) en cada punt on hi ha una lletra i orientarem la lletra en funció d’aquesta direcció, girant-la amb rotate().

Codi actualitzat amb inclinació suau de les lletres: [aquí m'adjunta el codi final en P5.js]

El codi que ha generat, el copio a l'editor en línia de P5.js i sense fer cap canvi, ni necessitat de programar res, ja tinc l'animació final que heu vist al principi. Per poder mostrar-la he fet un vídeo capturant la pantalla (amb ScreenCast) i he afegit una música generada amb Suno.ai expressament per acompanyar l'animació.