Vorige week bezocht ik de tentoonstelling Living Paintings: Nature van Refik Anadol in de Kunsthal (Rotterdam).

Ten eerste: die tentoonstelling is het bezoeken waard. Refiks werk is erg tof om te zien. Wil je de tentoonstelling nog zien? Dat kan tot 1 april. Meer info lees je hier.

Ten tweede: zijn werk inspireerde me om zelf een levend schilderij te maken. En dat is gelukt. Als je verder leest, leer je hoe dat werkt.

Inspiratie van Refik Anadol

Refik Anadol gebruikt data om kunst te generen en vaak kiest hij voor bewegend werk, animaties, of wat hij noemt: living paintings.

Hij baseerde een van zijn werken op Californische natuur. Door een (data)model genoeg foto’s te laten zien van die natuur, kan een model leren hoe die natuur eruit ziet. Vervolgens kan het nieuwe foto’s bedenken.

Refik kiest ervoor om deze bedachte foto’s bijzonder mooi te presenteren:

Dit werk kan je zien als een bewegend impressionistisch schilderij dat geleidelijk van landschap naar landschap gaat. Het is dus een schilderij mét een tijdsduur. Alleen het idee is al vet. En zijn visuele keuzes bij de uitwerking maken het werk nog mooier.

Toen ik voor een van zijn levende schilderijen stond, trokken de details mijn aandacht:

Je ziet hier de lijnen waarmee hij de computer de schilderijen laat tekenen.

Deze lijnen zette me aan het denken: kan ik iets soortgelijks maken o.b.v. mijn eigen foto’s?

Invoerdata: vakantiefoto’s

Waar Refik werkt met een algoritme dat leert om zelf landschappen te tekenen, pak ik het simpeler aan: ik kies voor een drietal vakantiefoto’s. Ik wil een levend schilderij maken en met drie foto’s kan ik dat idee testen door het schilderij van foto een, naar twee, naar drie te laten bewegen.

Ik kies wel drie foto’s uit hetzelfde gebied, zodat de kleuren bij elkaar passen:

Om op z’n Refiks te schilderen, ga ik elke foto omzetten naar data. Dat gaat makkelijker dan je denkt. Je moet alleen even vergeten dat je naar een foto kijkt en net doen alsof het een grafiek is:

Deze grafiek heeft een collectie van pixels. Iedere pixel bevat informatie:

  • de positie op de grafiek (x & y)
  • de kleur met een waarde voor Rood (R), Groen (G) en Blauw (B), ook wel RGB-waarde genoemd.

Met code kan ik dit automatisch ophalen voor elke foto.

Het lijkt erop dat Refik de lichtere lijnen bovenop tekent, in de bovenste laag als het ware. Om dit effect na te bootsen moet de code weten welke pixel licht is en welke donker. Daarom ga ik de pixels sorteren. Ik doe dit op een eenvoudige manier:

  • Tel de totale waarde van drie kleuren (RGB) bij elkaar op. Donkere kleuren hebben een lage totale waarde, lichte kleuren een hoge.
  • Sorteer de pixels van een lage totale waarde naar een hoge.

Door deze sortering, kan ik eerst de donkere pixels tekenen en dan de lichte.

De invoerdata zijn nu klaar.

Data-gedreven schilderen

Het is tijd om te gaan tekenen. In Refiks werk kwamen duidelijk lijnen terug. Ook de impressionistische schilders werken met vegen of strepen verf. Dus ik wil ook zoiets doen.

Ik kies ervoor om lijnen te tekenen o.b.v. de gesorteerde pixels:

  • Per zes pixels tekent de code een lijn.
  • De vorm van de lijn baseer ik op de posities van die zes pixels (x & y).
  • De kleur van de lijn is de kleur van de laatste pixel van de lijn.
  • De kleuren krijgen een transparantie-waarde mee, zodat ze doorschijnend worden. (Ik hoop dat dit een mooi effect geeft.)

Ik schrijf de code en kijk wat eruit komt.

Kijk, dat is best wel tof! Het is niet een-op-een de stijl van Refik, maar wel een schilderachtig effect. (En technisch gezien is dit een lijngrafiek!)

De afbeelding hieronder laat zien hoe de code het ‘schilderij’ opbouwt:

Je ziet links duidelijk terug dat het begint met donkere kleuren en dat er stapsgewijs andere kleuren bijkomen.

Laten we de andere twee vakantie foto’s erbij pakken. Wat komt hier uit?

Mijn reactie hierop is: 😁

Maar we zijn er nog niet. Hoe maak ik van deze plaatjes een living painting?

Een data-gedreven levend schilderij

Op dit moment heb ik een verzameling code die het volgende doet:

  • Foto inladen
  • Foto omzetten in pixeldata
  • Pixeldata sorteren o.b.v. kleur
  • Lijnen tekenen
  • Visualisatie opslaan

Hoe kom ik van deze code tot een levend, bewegend, schilderij?

Daar zijn een paar aanpassingen voor nodig:

  1. Tussenstappen opslaan: ik kan per lijn die de code tekent een afbeelding opslaan van de tekening tot dan toe.
  2. Doorgaan met de nieuwe foto: als foto 1 klaar is, laat ik de code direct de nieuwe foto openen en over de eerste foto heen tekenen.
  3. Tussenstappen samenvoegen: door het volgen van stap 1 en 2 heb ik een hele collectie aan afbeeldingen. Die kan ik achter elkaar zetten. Iedere afbeelding wordt zo een frame voor de video.

Met dit idee ga ik aan de slag en ik speel wat met de instellingen. Deze manier van tekenen kan namelijk vrij lang duren:

  • Standaard zijn hedendaagse digitale foto’s grote bestanden. Ik kies er daarom voor om al mijn foto’s eerst verkleinen tot een foto van 360 x 480 pixels. Dit resulteert per foto in 172.800 datapunten. Dit zijn alsnog 28.800 lijnen van zes pixels per foto.
  • Ik kan de tekening na iedere nieuwe lijn opslaan. Dit zou resulteren in 28.800 x 3 = 86.400 afbeeldingen. Een video met 12 frames per seconde zou dan twee uur duren! Dat is uiteindelijk wel tof, maar voor de demo wat veel. Daarom sla ik de voortgang op per 400 lijnen, wat zou moeten zorgen voor een video van een paar seconden.

Met deze aanpassingen laat ik de code draaien. Het duurt alsnog een goed half uur voordat alle afbeeldingen klaar zijn.

En al dat werk, lieve lezer, resulteert in deze video:

Mijn eerste living painting.

Hoppa!