Matematiken som förklarar ditt fotofilter

Du har precis tagit världens bästa selfie. Selfien med stort S. Den som ska revolutionera ditt Facebookflöde. Men skulle den inte bli finare med lite mer lyster i färgerna, ett filter som ger lite mer ljus över ansiktet eller kanske en version i gråskala? Medan du klickar och svajpar på din telefon, pågår linjär algebra av högsta snitt under huven. Häng med när vi zoomar in det digitala fotografiets matematik.

Från analog till digital

För att förstå matematiken bakom fotoredigering måste vi först förstå hur en dator lagrar och tolkar bilder. Det första steget är att tänka sig varje bild sammansatt av små enfärgade rutor – pixlar.

Det andra steget är att tilldela varje pixel ett tal som beskriver dess färgnyans. Eller snarare tre tal: ett tal för var och en av grundfärgerna röd, grön och blå. Låter det egendomligt att kunna beskriva oräkneliga färgskiftningar med bara rött, grönt och blått? Kanske! Men med tillgång till olika intensiteter av rött, grönt och blått ljus kan man faktiskt blanda mer än 16 miljoner färger.

Intensiteten av färgerna röd, grön och blå anges som tal mellan 0 och 255. På så sätt blir varje pixels färgnyans en taltrippel, (röd, grön, blå). Taltrippeln (255, 0, 0) är klarröd, (0, 255, 0) är starkt grön och (0, 0, 255) är intensivt blå. Kombinerar vi dessa färger i andra proportioner får vi andra kulörer. Tar vi ett utsnitt av några pixlar kring min mun får vi exempelvis följande färgtripletter.

I datorns öga är din selfie alltså en stor tabell av tal och det är de talen du leker med när du väljer filter, använder trollspöverktyget eller justerar skuggan i dina bilder. Men hur fungerar det i praktiken? Vi visar några av metoderna i fyra exempel.

 1. Röd

En del filter i fotoappar som Instagram eller Snapchat låter dig leka med fotografiets färgtoner. På så sätt kan du ge solnedgången en ännu mer glödande röd ton eller intensifiera de blåa färgskiftningarna i din undervattensbild. Hur det går till? Filtret ökar helt enkelt intensiteten i varje pixels röda respektive blåa färgkomponent. Här nedanför har jag gett min selfie en rödare nyans, genom att öka värdet på den röda färgkomponenten i varje pixels taltrippel.

Varje pixels röda färgkomponent har ökat med 20 %.

2. Ljusstyrka

Många fotoapplikationer har ett reglage där man kan justera bildens ljusstyrka. Bakom kulisserna står taltripplarna (0, 0, 0) och (255, 255, 255). Taltrippeln (0, 0, 0) motsvarar en pixel som inte innehåller någon färg och därför är alldeles svart, medan pixeln (255, 255, 255) innehåller maximal intensitet av alla färger och därför är vit som snö. Vill du öka ljusstyrkan i din bild, och få ditt ansikte att framträda ur den där förrädiska skuggan, kan du se till att varje pixel blir vitare genom att låta dess taltrippel närma sig intensiteten (255, 255, 255). När du på så sätt ökar pixelns färgintensitet åstadkommer du samma effekt som när du vrider upp dimmern till vardagsrumslampan – du får se bilden i nytt ljus. Här nedanför har jag ökat var och en av pixelns färgkomponenter med 50 %.

Varje pixels färgkomponent har ökat med 50 %. Ingen av färgkomponenterna kan dock överstiga 255.

3. Gråskala

Har du använt något av filterna Mono, Moon eller Willow? Då har du förvandlat din färgranna skönhet till en version i gråskala. Ett sådant konststycke är faktiskt en relativt enkel sak när man känner till att en bild i gråskala bara associerar ett enda tal till varje pixel. Talet är ett mått på pixelns ljusintensitet och går från 0, som är svartaste svart, till 255 som är vitaste vitt.

Ett sätt att beräkna en färgad pixels ljusintensitet är att beräkna medelvärdet av de tre färgintensiteterna rött, grönt och blått i pixelns taltrippel. Gör vi det för pixeln högst upp till vänster i utsnittet av originalbilden får vi: (195 + 136 + 120)/3 = 150, där 150 är ett mått på pixelns genomsnittliga ljusintensitet. Tilldelar vi sedan pixeln detta värde, blir den grå med precis rätt styrka. En oväntad bedrift för ett vanligt medelvärde!

4. Skärpa och oskärpa

Om du någon gång dragit ett finger över ett blyertsstreck vet du att blyertskornen spiller över på de närliggande vita områdena och skapar en suddig effekt. Inom fotoredigering använder man samma skarpa idé för att skapa oskärpa. Precis som i blyertsteckningen låter man närliggande pixlars färger influera varandra så att skarpa kanter och stora skillnader mellan dem jämnas ut. Ett sätt att göra det är att låta varje pixels värde i den nya bilden vara medelvärdet av motsvarande pixel i originalbilden och dess åtta närliggande pixlar. Animeringen här nedanför visar hur det går till.

Filter som använder den här metoden kallas på engelska för mean blurs. Ordet mean hänvisar här inte till någon elakhet utan till engelskans ord för metodens matematiska hjälte: medelvärdet.

När vi beräknar medelvärdet av pixeln och dess åtta grannar, bidrar var och en av de nio pixlarna med en niondel (11 %) till den nya pixelns värde. Om vi inte är fullt lika egalitära utan ger talen runt pixeln olika vikt kan vi uppnå andra effekter, t.ex. göra bilden skarp eller lokalisera dess kanter. Man säger att man beräknar ett viktat medelvärde. Tabellen här till höger visar en möjlig viktning av pixlarna.

På den här utmärkta hemsidan kan du ladda upp en egen bild och själv testa hur viktningen av de omgivande grannpixlarna påverkar bildens utseende.

En hälsosam dos matematik

Många av de färdiga filter du kan välja bland i din fotoapplikation använder en kombination av de effekter vi har diskuterat här: färgtoner, ljusstyrka och skärpa, för att ge bilden extra värme, göra om den till en blåtonad gråskala eller ge den den där retrolooken du var ute efter. I bilden här till höger har jag till exempel utnyttjat både ljussättning och blurs för att få ditt öga att falla på Tim Chartiers utmärkta Math Bytes och When life is linear, där du kan läsa mer om matematiken bakom datorgrafik. Samtidigt har min dator utövat akrobatiska konster med pixelns taltripplar. Se där, en hälsosam dos matematik bara genom att öppna Instagram!

Vidare läsning

Chartier, Tim (2014) Math bytes: Google Bombs, Chocolate-covered pi, and other cool bits in computing, Princeton University Press

Chartier, Tim (2015) When life is linear. From computer graphics to bracketology. The Mathematical Association of America

Computerphile, How Blurs & Filters Work, Video

Loch, Francis G., Image programming algorithms, Text

Ludwig, Jamie, Image Convolution, Satellite Digital Image Analysis, 581 Portland State University, Powerpointpresentation  

Power, Victor, Image kernels explained visually, Text och animering

Sinha, Utkarsh, Image Convolution examples, Text

Wikipedia, RGB color model