35
Bachelor Informatica Evaluatie kleurencombinatie in kleding Simone van Gompel July 17, 2014 Supervisor(s): Raphael Poss & Roberta Piscitelli

Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Bachelor Informatica

Evaluatie kleurencombinatie inkleding

Simone van Gompel

July 17, 2014

Supervisor(s): Raphael Poss & Roberta Piscitelli

Informatica—

Universiteit

vanAmst

erdam

Page 2: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

2

Page 3: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Abstract

An important aspect of life is making a good impression on other people. This is mostly doneby the choice of clothing and the colours of it. A lot of people in the world are colour blind andthey can have some problems with deciding the colours in their outfit. So to help people likethis and to help people that just don’t know what colours to match, this application is made.In this application you can just upload a picture of yourself and let the program decide for youif the colours of your outfit match or don’t. So if they don’t match you can try on a differentcombination and upload the new picture to see if this does match. The application works onthis basic level, but there is still be a lot to add to it. So if you go shopping and just don’t knowif these colours are matching you can just take a picture send it to the application and can seeimmediately if they match or not.

Page 4: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Contents

1 Inleiding 4

2 Applicatie 52.1 Inhoud . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2 Doelgroep . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3 Plan van aanpak 63.1 Algemeen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63.2 De hoofddoelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63.3 Extra’s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

4 Onderzoek 84.1 Kleuren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

4.1.1 Kleurruimtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84.1.2 Kleuren vergelijken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4.2 Segmentatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114.2.1 Algemeen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124.2.2 Automatische segmentatie . . . . . . . . . . . . . . . . . . . . . . . . . . . 124.2.3 Interactieve segmentatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4.3 Algoritmes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.3.1 Ruis verwijderen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.3.2 Achtergrond verwijderen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.3.3 Kleuren vinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

5 De algoritmes 185.1 Verwijder de achtergrond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185.2 Vind belangrijke kleuren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185.3 Match de kleuren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

6 Implementatie 206.1 Wat is er gedaan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206.2 Hoe werken de applicaties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

6.2.1 De Python applicatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206.2.2 De website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

6.3 Voorbeeld output van de applicatie . . . . . . . . . . . . . . . . . . . . . . . . . . 24

7 Discussie 277.1 Wat had beter gekund . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277.2 Toekomstig werk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277.3 Bereikbaarheid programma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287.4 Wat heb ik ervan geleerd . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

8 Conclusie 29

2

Page 5: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Appendices 30

A Algoritme kleuren vinden 31

B Algoritme Kleuren vergelijken 32

3

Page 6: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

CHAPTER 1

Inleiding

Een belangrijk aspect van het leven is een goede indruk maken op anderen. Dit wordt o.a.gedaan door de kleding keuze en de kleuren van de kleding. Helaas is dit niet voor iedereeneven makkelijk. Zeker 1 op de 12 mannen zijn kleurenblind en daarbovenop ook nog 1 op de250 vrouwen, dat zijn 700.000 mensen in Nederland alleen al1. Als je kleurenblind bent kan hetcombineren van de kleuren in kleding lastig zijn en daarmee ook het maken van een goede eersteindruk.

Voor deze mensen is deze applicatie gebouwd die het volgende kan doen: Het bepalen of dekleuren van de kleding in een foto bij elkaar passen of niet. Het idee is dat de gebruiker eenfoto kan uploaden naar de applicatie, waarna de applicatie zelf de kleuren van de kleding kanselecteren en vergelijken. Dit is bereikt door het toepassen van een aantal algoritmes. In deeerste plaats een algoritme die de achtergrond in een foto kan verwijderen. In de tweede plaatseen algoritme die van de overige kleuren kan bepalen of ze bij elkaar passen of niet. Als laatste ishet een mogelijkheid dat de applicatie niet alleen teruggeeft welke kleuren niet passen bij de rest,maar dat deze ook aangeeft welke kleur beter gedragen kan worden in combinatie met de rest.Als extra hulp kan in combinatie met het laatste punt ook de namen van de kleuren weergegevenworden.

In de rest van deze scriptie worden de volgende punten behandeld: Een uitgebreide uitleg overwaar deze applicatie voor dient en voor wie het bedoeld is (niet alleen voor kleurenblinden). Uitlegover de gestelde doelen aan de applicatie. Het onderzoek dat gedaan is naar de componenten vande applicatie. Uitleg over de gebruikte algoritmes. Hoe de implementatie eruit ziet en gebruiktwordt. En als laatste een discussie en conclusie over hoe het gehele project gelopen is.

1http://mens-en-gezondheid.infonu.nl/ziekten/8493-alles-over-kleurenblindheid.html

4

Page 7: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

CHAPTER 2

Applicatie

2.1 Inhoud

Deze applicatie kan voor de gebruiker bepalen of de kleuren van zijn of haar kleding in een gegevenfoto bij elkaar passen of niet. Een belangrijk aspect van de applicatie is om de gebruiker zo weinigmogelijk te laten doen. De gebruiker moet de foto inladen waar het om gaat en de applicatiemoet de rest automatisch kunnen. Een ander belangrijk aspect is het kunnen wegfilteren vande onbelangrijke kleuren. Dit zorgt er namelijk voor dat de kleuren van de kleding over blijven.Het laatste belangrijke aspect is het vergelijken van de overgebleven kleuren, de kleuren van dekleding. Uit het vergelijken moet komen of deze kleuren bij elkaar passen of niet. Eventueel kaner ook meer feedback gegeven worden. Waarom passen deze kleuren niet goed bij elkaar? Welkekleuren kan de gebruiker beter dragen dan de kleuren in de foto? Welke kleuren wel en niet bijelkaar passen moet onderzocht worden.

2.2 Doelgroep

De applicatie heeft een redelijk grote doelgroep. In de eerste plaats is deze bedoeld voor kleuren-blinden, aangezien zij moeite kunnen hebben met het combineren van kleuren. Maar hier blijfthet niet bij, iedereen die een tweede opinie wil over de kleurencombinatie die hij of zij op ditmoment aanheeft kan deze applicatie gebruiken voor hulp. Dit maakt dat veel verschillendesoorten mensen de applicatie kunnen gaan gebruiken.

Als laatste moet nog even worden toegevoegd dat het plan ook is om het mogelijk te makenom nieuwe modules aan de applicatie te hangen. Bijvoorbeeld: een module voor de 70’er jaren.Wat toen normaal en een goede combinatie was is nu misschien niet meer zo. Dus als je naareen 70’er jaren feest wil dan kan dat niet gecheckt worden door de basis applicatie. Maar dooreen 70’er jaren module te gebruiken in plaats van de standaard kleuren checker wordt dit welmogelijk gemaakt. Maar modules maken het ook mogelijk dat als mensen niet tevreden zijn meteen al bestaande module van de applicatie, dat ze het kunnen herschrijven en opnieuw aan hetprogramma kunnen hangen. Dit zorgt voor veel flexibiliteit. Modules zorgen dus ook voor eenverdere verbreding van het publiek en het makkelijker kunnen verbeteren van de applicatie.

5

Page 8: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

CHAPTER 3

Plan van aanpak

3.1 Algemeen

De applicatie moet de kleuren van kleding in een foto kunnen herkennen en kunnen vergelijken,dit wordt gerealiseerd door de applicatie in de volgende 3 componenten op te delen:

• Beeldbewerken, het kunnen vinden van de belangrijke kleuren in een plaatje:

– Verwijder de ruis uit de foto.

– Verwijder de onbelangrijke kleuren.

– Bepaal de belangrijke kleuren.

• Kleuren vergelijken, passen de gevonden kleuren goed bij elkaar of niet?

• GUI, die de interactie met de gebruiker verzorgt.

Er is gekozen om de applicatie in Python te schrijven vanwege het makkelijk kunnen vindenvan documentatie over image processing en het kunnen omzetten van RGB waarden naar HSVen HSL waarden.

Hieronder worden twee lijsten weergegeven, de eerste wat de hoofddoelen zijn van het project.En de tweede wat als extra doelen gesteld zijn.

3.2 De hoofddoelen

Dit zijn de punten waaraan deze applicatie moet voldoen:

• Een GUI waarin een foto geupload kan worden en de resultaten weergegeven kunnen worden

• De onbelangrijke kleuren moeten verwijderd kunnen worden uit de foto, door middel vangebruiker-input.

• De foto moet bewerkt worden om het vorige punt goed mogelijk te maken.

• Vind de kleuren die ertoe doen, oftewel de kleuren van de kleding.

• Maak een algoritme dat bepaalt of de kleuren bij elkaar passen of niet.

• Maak de applicatie bereikbaar voor iedereen, zoals een website.

6

Page 9: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

3.3 Extra’s

Hier volgen de punten waar de applicatie (nog) niet aan voldoet:

• Verwijder de onbelangrijke kleuren automatisch.

• Geef de namen van de gevonden kleuren weer als resultaat.

• Geef de gebruiker feedback in de vorm van welke kleuren er beter gedragen kan worden.

• Zorg voor extra features zoals de gebruiker die modules kan inladen en preferenties kanmaken over welke kleuren hij/zij het liefst ziet.

• Maak de applicatie zo efficient mogelijk.

7

Page 10: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

CHAPTER 4

Onderzoek

4.1 Kleuren

Het onderzoek naar kleuren wordt als eerste behandeld, omdat dit in de rest van het onderzoekwordt gebruikt.

4.1.1 Kleurruimtes

Er zijn meerdere ”colorspaces” (kleurruimtes) die gebruikt kunnen worden in een computerprogramma. Een kleurruimte is een manier om kleuren weer te geven in de computer. Er zijnmeerdere systemen voor uitgedacht en uitgewerkt, een aantal wordt hieronder uitgelegd[1]:

RGB

RGB(Rood, Groen, Blauw) is gebasseerd op de primaire kleuren en wordt in vrijwel elk computersysteem gebruikt. Het is makkelijk te implementeren, maar is niet intuıtief om mee te werken.

Figure 4.1: Mengschema RGB

CMY(K)

CMY(K) (Cyan Magenta Yellow (Black)) is een systeem met vier kleuren om gebasseerd opsubtractieve kleurmenging1. Subtractieve kleurmenging is dat je met wit, de kleur van hetpapier, begint en dat je de gekozen basis kleuren hieroverheen legt. Dit om ervoor te zorgen datkleuren geabsorbeerd worden en dat je dus een bepaalde kleur ziet.

1http://nl.wikipedia.org/wiki/Subtractieve_kleurmenging

8

Page 11: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Figure 4.2: Mengschema CYMK

CIELuv, CIELab

Deze systemen komen van het Commission Internationale de l’clairage (CIE). Deze zijn gebasseerdop additieve kleurmenging2. Dit betekent het weergeven van kleuren door de de menging vanlicht van de drie primaire kleuren (RGB) kleuren.In deze systemen werk je met een driehoek waarbij ieder hoekpunt een primaire kleur heeft.Je kan dan met X, Y, Z coordinaten elke kleur weergeven. Omdat met x,y,z(genormaliseerdewaarden van X,Y,Z) het moeilijk is in te schatten over welke kleur je het hebt wordt het vaakomgerekend naar L*a*b* waarden. L* is de helderheids as a* en b* worden door de gebruikervan dit systeem gekozen hoe ze willen. Bijvoorbeeld kan de gebruiker kiezen voor: a* gaat van(-)groen naar (+)rood en b* gaat van (-)blauw naar (+)geel

Figure 4.3: CIELab

Simpel gezegd is het CIELuv systeem een perceptueel uniforme afleiding van het X,Y,Zsysteem gebasseerd op hoe mensen kleuren waarnemen.[1].

Figure 4.4: CIELuv

2http://nl.wikipedia.org/wiki/Additieve_kleurmenging

9

Page 12: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

HSL, HSV

HSL staat voor Hue Saturation Lightness en HSV staat voor Hue Saturation Value. Door middelvan een aantal formules kunnen de normale RGB waarden van pixels omgezet worden in HSLen HSV. In meerdere programmeertalen bestaan al functies die RGB naar HSL en HSV kunnenomzetten. Met HSV is het mogelijk om te kijken of de ene kleur donkerder is dan de ander doorte kijken naar de value waarde, namelijk hoe lager de value hoe meer zwart er in de kleur zit. Enmet de saturation in HSV is het mogelijk te vergelijken of een kleur meer wit in zich heeft daneen andere kleur, hoe lager de saturation hoe meer wit erin voorkomt. Dus om te kunnen kijkenof twee kleuren tinten van elkaar zijn kunnen de saturation en value vergeleken worden om eenconclusie te kunnen trekken over of ze tinten van elkaar zijn.

De formules om RGB waardes in HSV en HSV waardes om te zetten volgen hieronder: Hieringeld dat het genormalizeerde RGB waardes zijn en dat de maximum en minimum waardes vande RGB triplet bekend zijn.

M = max(R,G,B)

m = min(R,G,B)

C = M −m

H ′ =

{ undefined ifC = 0G−BC mod6 ifM = R

B−RC + 2 ifM = G

R−GC + 4 ifM = B

H = 60◦ ×H ′

(genormaliseerd is dit: H = H360◦ )

V = M

L =1

2(M +m)

SHSV ={ 0 ifC = 0

CV otherwise

SHSV ={ 0 ifC = 0

C1−|2L−1| otherwise

Hierna hoeven alleen deze waardes samengevoegd te worden:HSV = HSHSV VHSL = HSHSLLVoor uitleg zie [1, 2]

10

Page 13: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

4.1.2 Kleuren vergelijken

Dit is een belangrijk gedeelte van de applicatie. Hoe kan worden gekeken welke kleuren wel enwelke niet bij elkaar passen? Het meest belangrijke onderdeel in het kijken of dit zo is, is dekleurencirkel. Het is blijkbaar zo, dat als kleuren op een bepaalde manier ten opzichte van elkaarliggen in de kleuren cirkel, dat ze dan goed bij elkaar passen. Er zijn 3 basis situaties waarin ditzo is.

• Complementair:

• Analoog:

• Zelfde tint, andere helderheid/verzadiging:

Hiernaast zijn er nog een aantal aanwijzingen om te weten of de kleuren echt passen. Je hebtnamelijk naast de kleuren in de kleurencirkel ook nog wit, grijs en zwart. Deze kunnen niet goedop de kleurencirkel worden afgebeeld, vanwege het feit dat ze niet onder een hue waarde vallen.Wit, grijs en zwart passen wel in elke combinatie met iedere andere kleur inclusief zichzelf. Als jein je outfit twee keer dezelfde kleur draagt moet de kleur of hetzelfde zijn of een duidelijk anderetint. Er zijn nog veel meer uitzonderingen ten opzichte van kleuren van je kleding, maar in dezescriptie houden we het bij deze punten.

4.2 Segmentatie

Zoals eerder gezegd is het belangrijk om de persoon van de achtergrond te kunnen onderschei-den. Een manier om dit voor elkaar te krijgen is segmentatie. Met segmentatie kan je de fotoonderverdelen in segmenten/regio’s. Hiermee is het mogelijk om de segmenten van de persooneruit te vissen en de rest te negeren aangezien het achtergrond is.

11

Page 14: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

4.2.1 Algemeen

Hier worden kort de algmene segmentatie technieken uitgelegd

Er zijn verschillende algoritmes voor zwart wit afbeeldingen en voor kleur afbeeldingen. Ditkomt omdat zwart wit afbeeldingen minder informatie bevatten en daarmee met andere tech-nieken te segmenteren zijn. Deze technieken kunnen in principe ook worden gebruikt om kleurafbeeldingen te segmenteren. Dit kan gedaan worden door de techniek op de RGB waarden apartuit te voeren en weer samen te voegen. Het nadeel hiervan is dat je de afhankelijkheid die deRGB waarden van een pixel met elkaar hebben niet wordt meegenomen in de berekening. Ditkan voor inaccurate en niet kloppende resultaten zorgen. In dit project is er van uitgegaan datde foto’s in kleur genomen zijn, hierdoor is niet verder gekeken naar de zwart wit segmentatietechnieken.

Twee veel gebruikte methodes in de segmentatie technieken is regio merging en -splitting.Regio merging is een methode waarbij je met een aantal gebieden begint en dat je met eenalgoritme kijkt welke gebieden in hetzelfde segment horen en daardoor samengevoegd moetenworden. Zodra geen enkel gebied volgens het algoritme meer samengevoegd moet worden meteen andere is het segmenteren klaar. Regio splitting is het tegenovergestelde van merging. Je be-gint met een groot gebied en deelt deze op totdat elk gebied niet verder opgedeeld hoeft te worden.

Segmentatie technieken kan je onderverdelen in de volgende twee klassen:

• Automatisch

• Interactief

Automatisch betekend dat er niet interactief gesegmenteerd wordt. Interactief betekend dater interactief gesegmenteerd wordt. Het grootste verschil in de output van beide methoden isdat een automatische segmentatie techniek eindigt met homogene gebieden. En een interactievetechniek eindigt met gebieden die volgens de gebruiker belangrijk zijn en gebieden die dat nietzijn. Dit betekend dat voor dit project interactief wenselijker is dan automatisch, evengoed isbesloten naar beiden te kijken voor de wetenschappelijke achtergrond ervan.

4.2.2 Automatische segmentatie

Fuzzy C-means

Fuzzy c-means3 is een segmentatie techniek die vaak wordt gebruikt in combinatie met anderetechnieken, daarom wordt deze als eerste behandeld. In deze techniek is het algemene idee dateen pixel niet bij maar 1 klasse/segment hoeft te horen, dit betekend dat pixels die op de randvan twee clusters liggen bij beide geclassificeerd kunnen worden. Ieder pixel heeft een waardedie weergeeft hoeveel het bij een bepaald cluster hoort, het gewicht van de pixel bij het cluster.De centroid (gemiddelde) van de clusters en het gewicht van de pixel bij het cluster wordt metde volgende berekeningen gevonden:

µij =1∑l

k=1dij

dil

2/m−1 (4.1)

cj =

∑ni=1 µ

mijxi∑n

i=1 umij

,∀j = 1, 2, ...k (4.2)

n = aantal data punten (pixels)cj = het j’de clusterk = het aantal clustersm = fuzzy index, 1 ≤ m <∞µij = gewicht van data punt i in cluster centroid j

3http://en.wikipedia.org/wiki/Fuzzy_clustering

12

Page 15: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

dij = Euclidische afstand tussen data punt i en cluster centroid j

Het algoritme gaat als volgt:

1. Bepaal het aantal clusters. (hier komt vaak een andere techniek aan te pas) Of neem eenwillekeurig aantal clusters.

2. Geef iedere pixel een willekeurig gewicht bij ieder cluster.

3. Herhaal het volgende tot het algoritme het punt heeft bereikt dat het niet nuttig is verderte gaan. (Het algoritme verandert de uitkomst (bijna) niet meer)

(a) Bereken de centroid van ieder cluster.

(b) Bereken het gewicht van ieder pixel bij ieder cluster.

Na dit algoritme eindig je met een geclusterde foto, oftewel je hebt de segmenten gevonden.

HTFCM

Deze afkorting staat voor Histogram Thresholding Fuzzy C-Means segmentatie[10]. Het maaktgebruik van de fuzzy c-means techniek. Voor het bepalen van de hoeveelheid begin clusters wordter gebruik gemaakt van histogrammen.

In de eerste plaats wordt van de foto van de rood, groen en blauw waarden apart een his-togram gemaakt. Dit histogram bestaat uit het aantal pixels tegen de intensiteit afgezet. Depieken in deze histogrammen worden gepakt om te kunnen bepalen hoeveel clusters er zijn.

Figure 4.5: Met x is de intensiteit van de gevonden pieken aangegeven

13

Page 16: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Er wordt vervolgens in de foto gekeken welke gebieden het beste bij welke piek horen en wor-den samen gevoegd in een cluster. Zodra het aantal clusters bekend is kan FCM plaatsvinden.Zie 4.2.2.

AFHA

Een ander algoritme dat een beter resultaat boekt dan de vorige is AFHA[13]. Dit algoritme kijkteerst naar welke clusters er in de foto voorkomen door middel van een ant colony optimization.

Ant colony optimization in het kort: In dit geval zijn de mieren (ants) de pixels in de foto. Hetbegint met dat iedere pixel een cluster is. De mieren gaan in het algoritme kijken welk cluster hetbest bij ze past. Dit doen ze door te kijken welk cluster het dichtsbijzijnde en het aantrekkelijkstis. De clusters beginnen met geen feromonen, maar hoe meer mieren naar het cluster toegaathoe meer feromonen er achter worden gelaten. Deze feromonen bepalen hoe aantrekkelijk eencluster is. Dit betekend hoe meer feromonen hoe meer mieren ernaar toegaan.

In het AFHA algoritme gebruiken ze een aangepaste versie (advanced ant colony optimiza-tion). Hierin wordt er begonnen met al een aantal clusters. Verder negeren de mieren alle clustersdie te ver weg liggen. Deze aanpassingen zijn gemaakt om de berekeningen die gemaakt moetenworden wat lichter te maken.

Het AFHA algoritme is als volgt:

1. Laad de foto in als 3D dataset, met als dimensies de RGB waarden.

2. Bepaal de cluster centroids en aantal d.m.v. pixel kleuren statistieken.([13] pagina 1892)

3. Bereken de cluster center set en aantal gebruik makend van advanced ant colony optimiza-tion.

4. Cluster met behulp van Fuzzy c-means. Zie 4.2.2

Detecting human faces

Er is ook een algoritme bedacht waarbij gezichten uit een foto gevonden kunnen worden met be-hulp van segmenteren. Dit is belangrijk, omdat in de applicatie het ook mogelijk is aan de handvan de plaatsing van het gezicht te bepalen waar de kleding is en daarmee de kleuren hiervan tevinden. Zodra namelijk bekend is waar het gezicht zich bevindt kan beredeneerd worden dat hetlichaam zich recht onder het gezicht bevindt en daarmee ook de kleding.

Eerst word er een multiscale transform gedaan waarbij homogene clusters gevonden kunnenworden[7]. Hierna wordt naar elk van deze clusters gekeken en vergeleken met een Guassianfunctie waarin alle huidskleuren zouden zitten. Deze Guassian is gemaakt met behulp van hetCIELuv systeem. Zodra dit gedaan is moet nog alleen het gezicht gevonden worden en niet ookde armen etc. Dit wordt gedaan door te kijken naar deze clusters en te kijken welke van dezeellips-vormig zijn. Als ze ellips-vormig zijn is het hoogstwaarschijnlijk een gezicht.

4.2.3 Interactieve segmentatie

Seeded region growing

Dit is een snel en simpel voorbeeld van een interactief algoritme, maar heeft wel beperkingen van-wege deze eenvoud. Deze wordt enkel behandeld omdat er overwogen is deze te implementerenvanwege de eenvoud[14]. De gebruiker hoeft enkel twee punten aan te geven, een in de voorgronden een in de achtergrond. Het algoritme gaat vervolgens naar iedere buurpixel kijken en bepalenof zijn kleur het best bij de gemiddelde kleur van de voor- of achtergrond hoort. De pixel wordtingedeeld bij degene waarvan de kleur het meest overeenkomt.

14

Page 17: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Region based segmentation

Eerder is kort uitgelegd wat region merging is. Het algoritme beschreven in [16] maakt hiergebruik van. Het begint met gebieden maken gebasseerd op de kleur en de Euclidische afstand.Je begint met dat elke pixel apart een cluster is en gaat die vergelijken met de clusters in de buurtTwee clusters worden samengevoegd als de kleur en Euclidische afstand dicht genoeg bij elkaarliggen. Zodra het aantal clusters onder een bepaalde waarde zakt worden andere techniekengebruikt om ze te mergen. Op dit punt is ieder cluster opgeslagen als een gemiddelde kleur engrootte van het cluster, wat ervoor zorgt dat er minder opslagcapaciteit nodig is. Hierna wordende volgende methoden toegepast:

• Boundary merging, dit betekent dat als twee clusters een grens hebben die langzaam over-gaat (een wazige grens) dat deze clusters samengevoegd worden.

• Regularity, hierbij wordt gekeken naar de complexiteit van een voorwerp. Vaak is decomplexiteit niet groot, dus er wordt gekeken naar hoe complex het cluster is als er tweesamengevoegd worden. Is dit te groot dan worden ze niet samengevoegd, is het nog laagdan wel.

• Inclusion, dit betekent dat er een klein cluster volledig in een grotere zit en aan geen enkelander cluster grenst. Vaak kan je dan deze clusters mergen.

Zodra dit allemaal gedaan is heb je alleen nog maar basis clusters over.

Dit is niet interactief, maar wordt door [14] gebruikt om een interactief algoritme ervante maken. Dit doen ze door middel van een boom te maken met de gevonden clusters. Metals bladeren alle pixels en als wortel het gehele plaatje. De gebruiker kan dan aangeven watvoorgrond en wat achtergrond is en dan wordt iedere knoop afgelopen en als een van de tweeclusters gemarkeerd. Je begint in de bladeren en markeert iedere knoop vanaf daar als hetzelfdeals de ouder. Zodra er een conflict is wordt de knoop niet gemarkeerd en zijn ouder wordt alstegenstrijdig gemarkeerd. Hierna wordt iedere niet tegenstrijdige knoop opgezocht en zijn nietgemarkeerde kinderen als hetzelfde gemarkeerd als deze knoop. Als er hierna nog steeds nietgemarkeerde knopen zijn dan worden deze gemarkeerd naar de dichtsbijzijnde knoop. Hierna isiedere pixel gemarkeerd als deel van een cluster.

SIOX

SIOX wordt o.a. gebruikt door het programma GIMP[8]. Het idee hierachter is dat de gebruikermet behulp van rechthoeken aan kan geven welke gedeeltes van de foto het voorwerp zijn. Enook wat het interessante gebied is (waar het voorwerp wat je wilt hebben volledig invalt) Iederander gebied is achtergrond.

Figure 4.6: De groene rechtoeken zijn onderdeel van het voorwerp en de rode rechthoek is hetinteressante gebied

15

Page 18: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Als eerste stap na de gebruikers-input wordt de colour space van de foto omgezet in de CIELabkleur ruimte.[12] Wanneer dit gedaan is wordt er segmentatie uitgevoerd op de foto. Ze makeneen ”colour signature” van de achtergrond en gaan voor ieder pixel na of deze dezelfde signatuurheeft of niet. De bekende achtergrond wordt geclusterd in even grootte clusters. Deze clustersworden vervolgens verwerkt met een twee stage k-d boom algoritme. Zodra het algoritme klaar isheb je een k-d boom met de clusters met de bekende achtergrond. Als je nu een onbekende pixelhebt kan je de boom doorlopen om te kijken of het bij de achtergrond hoort. Het is ook mogelijkdezelfde boom op te zetten voor de bekende voorgrond. Mocht een pixel bij geen van beidebomen horen dan kijk je bij welke van de twee de pixel het dichtstbij staat. Nu is het voorwerpbijna uit de foto gehaald. Het enige dat nog gedaan moet worden is post processing. Dit omde kleuren van de achtergrond die ook in de voorgrond zijn gekomen weg te halen. Dit wordtgedaan door te kijken naar de grootst mogelijke regio in de voorgrond en eigenlijk alles wat erniet aan vastzit weg te knippen. De gebruiker kan nog wel specificeren hoeveel er vervaagd wordt.Minder vervaging is beter voor plaatjes waarbij niet alles evengoed aansluit op het hoofdobject.Bijvoorbeeld met menselijk haar sluit het niet allemaal mooi aan en wordt er misschien wat vanweggefilterd als je teveel vervaagt.

4.3 Algoritmes

Het belangrijkste doel van het beeldbewerken in deze applicatie is het kunnen bepalen van debelangrijke kleuren in de foto. Er is gekozen om dit te bereiken door eerst de ruis uit de fotote verwijderen, waarna de onbelangrijke (achtergrond) kleuren uit de foto verwijderd kunnenworden. Dit is zodat er alleen nog maar belangrijke kleuren in de foto achter blijven, watzeer handig is om te bepalen welke kleuren van de outfit zijn. De algoritmes worden hier kortbeschreven.

4.3.1 Ruis verwijderen

Het eerste dat gebeurt, is het bewerken van de foto. De foto wordt gedenoised, dit betekentdat de ruis uit de foto wordt gehaald. In dit geval wordt niet alleen de ruis eruit gehaald,maar wordt de foto extra vervaagd. Er is gekozen om dit te doen door middel van total variationdenoising4. Deze manier zorgt er namelijk voor dat de overgangen in de foto scherp blijven tijdenshet vervagen. In tegenstelling tot bijvoorbeeld Gaussian denoising waarbij ook de overgangenvervaagd worden. Dit is belangrijk zodat de lijnen die de mens scheidt van de achtergrondbehouden worden. Hierdoor kan de achtergrond verwijderd worden zonder dat er ook pixels vande kleding verdwijnen. De gedenoisde versie van de foto wordt alleen gebruikt bij het verwijderenvan de achtergrond. Hierna wordt weer de orginele foto gebruikt, maar dan wel zonder de pixelsdie eruit zijn gefilterd in de vorige stap. Dit zodat de details in de kleding later nog wel zichtbaarzijn en met elkaar vergeleken kunnen worden in de stappen waarin de belangrijke kleuren wordenbepaald en vergeleken.

4.3.2 Achtergrond verwijderen

De achtergrond verwijderen is een belangrijk punt. Dit kan op vele manieren bereikt worden.

Er kan gekozen worden om dit wel of niet interactief te doen. Het is misschien zelfs hetbeste dit wel te doen, omdat er dan minder fouten gemaakt kunnen worden dan wanneer hetautomatisch gebeurt. De gebruiker weet namelijk beter dan de computer waar hij/zij zich in defoto bevindt en dus wat de belangrijke en onbelangrijke kleuren zijn.

Als er gekozen is om het interactief te doen dan moet de gebruiker op de een of andere manieraangeven welke kleuren de achtergrond zijn. Dit kan door middel van klikken op de achtergrondkleuren die uit de foto verwijderd moeten worden. Een andere manier om aan gebruiker-input tekomen is als volgt:5 De gebruiker kan met een rode lijn aangeven welk gedeelte de achtergrond

4http://scikit-image.org/docs/dev/auto_examples/plot_denoise.html5https://clippingmagic.com/

16

Page 19: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

is en met een groene lijn welk gedeelte de voorgrond is. De kleuren die onder de rode lijn vallenmaar niet onder de groene lijn worden verwijderd uit de foto en deze wordt weergegeven aan degebruiker. Als de gebruiker niet tevreden is met het resultaat is het mogelijk om meer lijnen aante brengen en op die manier wel het gewenste resultaat te krijgen.

Als het niet interactief gedaan wordt zijn er verschillende manieren te bedenken om de onbe-langrijke kleuren te verwijderen. De meest voor de hand liggende is de kleuren in de hoekpuntente pakken en deze geheel uit de foto te verwijderen. In deze applicatie zal het namelijk nietvoorkomen dat als iemand zijn/haar gehele outfit op een foto wilt hebben de outfit in een vande hoekpunten te zien is. Het is echter wel zo dat als de achtergrond dezelfde kleur heeft als eengedeelte van de outfit het kan gebeuren dat de outfit dan ook verwijderd wordt. Het kan ookbereikt worden met behulp van segmenteren. Zie sectie 4.2.

4.3.3 Kleuren vinden

Het vinden van de juiste kleuren uit de foto zonder de achtergrond, wordt gedaan door de huewaardes te berekenen van de pixels die overgebleven zijn. Er wordt een histogram gemaakt waarde hue waardes tegen het aantal pixels worden afgezet. Vanuit dit histogram is het mogelijkte zien welke kleuren veel voorkomen en welke helemaal niet. En kunnen de kleuren vergelekenworden.

Het enige probleem hiervan zijn alle waarden van wit, grijs en zwart. Deze kunnen namelijkonder alle hue waarden verdeeld worden. Zie 4.1.1. Hierdoor is het onmogelijk om met alleende hue waarde van de pixel wit, grijs en zwart in een ander hokje op te delen dan alle anderekleuren. Dit zorgt er dan voor dat als het wit onder rood onderverdeeld wordt er meer rood lijktte zijn dan er daadwerkelijk is en het rood dat er is witter wordt gemaakt.

Wat er gedaan wordt om dit te voorkomen is al deze waarden in een aparte waarde op te slaan.Onder deze waarde worden de pixels die wit, grijs of zwart zijn opgeslagen. Dit zorgt ervoor datdeze waarden apart behandeld kunnen worden en apart bekeken kunnen worden in het histogram.

Van al deze hue waarden wordt een histogram gemaakt waaruit afgelezen kan worden welkekleuren het belangrijkst zijn en welke minder belangrijk. Aangezien de kleur die het meestvoorkomt ook het meest overheerst is het belangrijker dat deze bij alle andere kleuren hoort dandat eentje die bijna niet voorkomt.Hier kan nog wel een uitbreiding voor gemaakt worden voor accesoires. Deze nemen niet veelpixels in beslag, maar zijn even belangrijk als een kledingstuk.

17

Page 20: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

CHAPTER 5

De algoritmes

5.1 Verwijder de achtergrond

Twee van de eerder genoemde algoritmes zijn geımplementeerd. In de eerste plaats worden dekleuren van de vier hoekpunten in de foto verwijderd. Dit wordt als volgt gedaan: De foto wordtaan het algoritme meegegeven. De ruis wordt eruit gefilterd door middel van total variationdenoising. Dit is een functie in de python library scikit-image1. Het algoritme zoekt vervolgensde RGB waarden van de vier hoekpunten op en slaat deze op. Ieder pixel in de foto zonder ruiswordt vergeleken met ieder van de vier gevonden kleuren (hoekpunt kleuren). Zodra de waardevan de pixel in de buurt valt van een van de hoekpunt kleuren wordt deze uit de foto verwijderd.Dit vergelijken gebeurd als volgt: Er wordt gekeken of de pixel een echte kleur is of grijs, witof zwart. Zodra het namelijk grijs, wit of zwart is zal er gekeken worden of de RGB waardenvan de pixel in een bepaalde range van de RGB waarden van de hoekpunt kleur valt. Maar alshet een echte kleur is (alles behalve wit, grijs en zwart) dan wordt gekeken of de hue waardevan de pixel in een range valt van de hue waarde van de hoekpunt kleur. Als blijkt dat het eenkleur is die verwijderd moet worden krijgt deze pixel de waarde [-1,-1,-1]. en wordt als zwartweergegeven op het scherm. Dit algoritme kan gezien worden als een regio splitting segmentatietechniek. Waarbij het gebied zo klein kan zijn als een pixel.

De eerder besproken range is met trial en error besloten. Na het filteren van de ruis in defoto vallen de RGB waarden in een range van 0-1 en de hue waarde is ook in een range van 0-1.Het blijkt dat de range om te checken of de RGB in de buurt valt het best is op 0.1 en de rangevan de hue waarde op 0.2.

Als na het uitvoeren van deze methode de gebruiker niet tevreden is en op de retry knop drukt,krijgt de gebruiker de kans om zelf aan te geven welke kleuren er verwijderd worden. Zodra degebruiker op de foto een punt aanklikt wordt de kleur van dit punt bepaald en opgeslagen. Dezewordt meegegeven aan het algoritme dat deze kleur weg zal halen uit de foto. Het weghalen vande kleur gebeurt op dezelfde manier als bij de vorige is uitgelegd, het enige verschil is dat er nietmet vier kleuren vergeleken wordt, maar met maar een kleur.

5.2 Vind belangrijke kleuren

Dit algoritme is niet al te lastig. De foto zonder de onbelangrijke kleuren wordt hiervoor gebruikt.Het principe is dat er een histogram wordt gemaakt van het aantal pixels dat een bepaalde huewaarde heeft. Hiernaast wordt ook de RGB waarde van dezelfde hue gemiddeld over alle pixelsdie deze hue waarde hebben. Dit om later te kunnen weergeven welke kleur bij deze hue hoorten om te kunnen checken of de kleuren bij elkaar passen of niet. Ieder pixel in de foto wordtnagegaan en gekeken of het wit, grijs of zwart is en of het een echte kleur is. Blijkt het wit, grijs of

1http://scikit-image.org/

18

Page 21: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

zwart te zijn dan wordt deze pixel toegevoegd aan een aparte sectie van het histogram, namelijkhue waarde 13 (een hoger dan waar mee wordt gewerkt). Er wordt gewerkt met 12 hue waardes.Hiervoor is gekozen, omdat een bepaalde kleurencirkel ook met 12 hue waardes werkt en hetdaarmee makkelijker maakt om tests te maken die kijken of het algoritme voor het vergelijkenvan de kleuren klopt of niet. Als het een kleur blijkt te zijn wordt de hue ervan berekend endeze wordt vermenigvuldigd met 12, zodat deze toegevoegd kan worden in het histogram onderdeze bepaalde hue. In de lijst waarbij het aantal pixels voor een bepaalde hue wordt bijgehoudenwordt er enkel een bij opgeteld. En in de lijst waarbij de RGB waarde wordt bijgehouden wordtsimpel deze RGB erbij opgeteld. Helemaal aan het eind wordt de RGB gedeeld door het aantalgevonden pixels zodat de gemiddelde RGB weergegeven kan worden aan de gebruiker en gebruiktkan worden voor het vergelijken van de kleuren.

Zie appendix A voor het algoritme.

5.3 Match de kleuren

Dit algoritme is de belangrijkste van alle, dit omdat de applicatie draait om het bepalen vanhet vergelijken van kleuren. De verschillende manieren om te vergelijken is al eerder uitgelegd.Hoe gematcht wordt is wel belangrijk, er kan namelijk gekozen worden tussen: zodra een kleurbij een andere kleur past is het een match, zodra de kleur bij elke andere kleur past is het eenmatch. In het eerste geval vind je dat een kleur in je kleding matcht zodra je ook een anderekleur draagt die met die matcht In het tweede geval vind je dat een kleur in je kleding matchtzodra het een match is met iedere andere kleur in je kleding. Ik heb gekozen voor de tweedemethode, aangezien je kleding een geheel moet zijn en dus de kleuren van je kleding allemaal bijelkaar moeten passen. Maar er zou altijd nog een module gemaakt kunnen worden die de eerstesituatie implementeert.

Deze methode is als volgt geımplementeerd. Iedere gevonden RGB waarde wordt vergelekenmet iedere andere gevonden RGB waarde behalve zichzelf. Deze twee worden vergeleken door tekijken of het een wit, grijs of zwart kleur is. Zodra dat het geval is matcht het altijd, dus wordthet niet toegevoegd aan de no match lijst. Als het een echte kleur is, wordt gekeken welke HSVwaardes de twee kleuren hebben en worden de volgende situaties getest: Zijn ze complementaan elkaar, wordt gedaan door te kijken of het verschil in de hues 0.5 is. Dit aangezien de huesworden weergegeven van 0-1 en de helft hiervan 0.5 is. En als dan de twee hues een verschil van0.5 hebben betekend het dat ze tegenover elkaar op de kleurencirkel liggen. Zijn ze analoog vanelkaar, wordt gedaan door te kijken of het verschil in de hues minder dan 0.1 is. Zijn ze tintenvan elkaar, wordt gedaan door te kijken of ze in dezelfde hue vallen (verschil van minder dan0.01) en of hun saturation of hun value niet hetzelfde zijn.

Het verschil tussen de hues wordt als volgt berekend: is hue− hue2 < 0, dan is het verschilhue − hue2 + 1 anders is het verschil gewoon hue − hue2 Dit om ervoor te zorgen dat er dewaarde altijd tussen de 0 en de 1 valt.

Zie appendix B voor het algoritme.

19

Page 22: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

CHAPTER 6

Implementatie

6.1 Wat is er gedaan

Er is gekozen om uiteindelijk twee versies van de applicatie te maken. De eerste is de applicatiedie aan alle hoofddoelen voldoet. Deze is in Python geschreven. De tweede is een applicatie dienaast de hoofddoelen beter bereikbaar is voor de gebruiker. En daarbovenop op zo een maniergemaakt is dat het makkelijk is om modules hiervoor te maken. Hier volgt een lijst van featuresdie zijn verwerkt in de eerste applicatie:

• Uploaden foto

• Automatisch verwijderen achtergrond

• Als de achtergrond niet goed verwijderd is, verwijderen hiervan met user input

• Bepalen belangrijke kleuren

• Kleuren vergelijken

• Resultaten weergeven aan de gebruiker

Deze zijn ook geımplementeerd in de tweede applicatie:

• Bereikbaarheid is groot

• Modules kunnen maken voor deze applicatie

6.2 Hoe werken de applicaties

6.2.1 De Python applicatie

Implementatie

De applicatie bestaat uit 3 gedeeltes.

• Evaluatie kleding (met GUI)

• Beeld bewerken

• Kleuren vergelijken

Er wordt de gebruiker gevraagd om het pad naar de foto op te geven. Er wordt gekeken ofdit een geldig pad is en of het echt een plaatje is. Zodra dit klopt, wordt de foto echt ingeladen.Deze foto wordt meegegeven aan de functie ”denoise img” in ”Beeldbewerken”. Deze functiefiltert de ruis eruit en stuurt de bewerkte foto terug. Het hoofdprogramma roept de functie

20

Page 23: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

”remove corner colors” in ”Beeldbwerken” aan. Deze zorgt voor het automatisch verwijderenvan de achtergrond en stuurt de foto zonder de achtergrond terug. Deze foto wordt weergegevenaan de gebruiker via de GUI (gemaakt met Tkinter). Het hoofdprogramma roept hierna defunctie ”determine important colors” in ”Kleuren vergelijken” aan. Deze bepaalt welke kleurener zich nog in de foto bevinden. Het resultaat hiervan wordt weer terug gestuurd. Dit resultaatwordt weergegeven aan de gebruiker via de GUI. Als laatste wordt de functie ”check colors”in ”Kleuren vergelijken” aangeroepen. Deze bepaalt welke gevonden kleuren wel en welke nietbij elkaar passen. Dit resultaat wordt terug gestuurd en weergegeven aan de gebruiker via de GUI.

Als er op de foto gedrukt wordt door de gebruiker wordt de functie ”remove color” in ”Beeldbewerken” aangeroepen met de bijbehorende kleur. Deze verwijdert die kleur uit de foto en stuurthet resultaat terug. Daarna worden de functies ”determine important colors” en ”check colors”aangeroepen om het resultaat te bepalen. Dit wordt samen met de nieuwe foto weergegeven aande gebruiker via de GUI.

Als de gebruiker op de retry knop drukt worden alle opgeslagen gegevens verwijderd behalvede orginele foto. De resultaten worden van de GUI afgehaald.

Als de gebruiker op de quit knop drukt wordt het hele programma afgesloten.

Gebruiksaanwijzing

De Python applicatie wordt als volgt gebruikt: Je downloadt de Python code die bij deze ap-plicatie hoort. Je gaat in een command prompt naar de bijbehorende map en tikt het volgendein: Python outfit evaluation.py Hierna wordt er gevraagd om het pad naar de foto in te tikken.Zodra dit gedaan is wordt de daadwerkelijke applicatie opgestart.

In de applicatie zie je links de foto die je ingeladen hebt. Rechts hiervan zie je de foto met deautomatisch verwijderde achtergrond. Helemaal rechts zie je een lijst met de gevonden kleurenin de fotot. Onderaan vind je een tabel met de resultaten van het programma. In deze tabel iste vinden welke kleuren goed met elkaar combineren en welke niet.

Als je als gebruiker het er niet mee eens bent hoe de achtergrond verwijderd is dan is ereen retry knop die je in kan klikken. Waarna de automatisch verwijderde achtergrond ongedaanwordt gemaakt en je als gebruiker zelf op punten in de foto kan drukken waarvan de bijbehorendekleuren als achtergrond worden bestempeld.

Als je klaar bent met het programma druk je op de quit knop die ervoor zorgt dat hetprogramma afsluit.

6.2.2 De website

Implementatie

De applicatie bestaat uit 4 gedeeltes.

• Website

• Server

– Beeld bewerken

– Kleuren vergelijken

Op de website wordt er een foto geupload. De url naar deze wordt naar de server doorgestu-urd. De server laadt de foto in en stuurt deze naar de functie ”denoise img” in ”Beeldbewerken”.Deze functie filtert de ruis eruit en stuurt de bewerkte foto terug. De server roept de functie ”re-move corner colors” in ”Beeldbwerken” aan. Deze zorgt voor het automatisch verwijderen vande achtergrond en stuurt de foto zonder de achtergrond terug. Deze foto wordt geupload naar

21

Page 24: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

de website. De server roept hierna de functie ”determine important colors” in ”Kleuren vergeli-jken” aan. Deze bepaalt welke kleuren er zich nog in de foto bevinden. Het resultaat hiervanwordt weer terug gestuurd. Als laatste wordt de functie ”check colors” in ”Kleuren vergelijken”aangeroepen. Deze bepaalt welke gevonden kleuren wel en welke niet bij elkaar passen. Ditresultaat wordt naar de website gestuurd die dit aan de gebruiker weergeeft.

Als er op de foto gedrukt wordt door de gebruiker wordt de RGB waarde hiervan naar deserver gestuurd. Deze roept de functie ”remove color” in ”Beeld bewerken” aan met de gestu-urde kleur. Het resultaat hiervan wordt geupload naar de website Daarna worden de functies”determine important colors” en ”check colors” aangeroepen om het resultaat te bepalen. Dezeworden naar de website gestuurd die deze weergeeft samen met de nieuwe bewerkte foto.

Als de gebruiker op de retry knop drukt wordt dit naar de server gestuurd die alle bewaardegegevens verwijderd op de orginele foto na.

Gebruiksaanwijzing

De website wordt als volgt gebruikt: Je downloadt de Python code die bij deze applicatie hoort.Je gaat in een command prompt naar de bijbehorende map en tikt het volgende in: Pythonserver.py

Hierna kan de gebruiker naar de website toe. Op de website wordt eerst gevraagd een foto teuploade. Zodra dit gedaan is wordt je doorgestuurd naar een pagina met de resultaten.

Op deze pagina zie je bovenaan een bericht dat de foto goed of juist niet goed geupload is.Daaronder worden berichten weergegeven aan de gebruiker waar het programma mee bezig is.Hieronder komen uiteindelijk de resultaten terecht. Daar direct rechts van is de orginele foto tezien en helemaal rechts de foto zonder de achtergrond. De gebruiker kan op ieder moment eenkleur in de foto aanklikken, deze wordt dan verwijderd.

Als je als gebruiker het er niet mee eens bent hoe de achtergrond verwijderd is dan is ereen retry knop die je in kan klikken. Waarna de automatisch verwijderde achtergrond ongedaanwordt gemaakt en je als gebruiker zelf op punten in de foto kan drukken waarvan de bijbehorendekleuren als achtergrond worden bestempeld.e

22

Page 25: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Hier volgt een schematische weergave van de connecties van de website naar de server.

23

Page 26: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

6.3 Voorbeeld output van de applicatie

Hier volgt een afbeelding van de output van het programma met uitleg erbij wat er weergegevenword.

24

Page 27: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Dit is een afbeelding waarbij het automatisch verwijderen van de achtergrond goed gelopenis evenals het vinden en vergelijken van de kleuren.

Hier is de achtergrond niet goed verwijderd, omdat de kleur van de achtergrond en de kleur vanhet shirt te veel op elkaar lijken.

Hier is de achtergrond niet goed verwijderd, omdat de kleur van de achtergrond en de kleur vande tas en jas te veel op elkaar lijken.

25

Page 28: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Dit is een voorbeeld van proeven die gedaan zijn om te kijken of het vergelijken van de kleurengoed bij elkaar passen of niet.

Dit is een voorbeeld met een perfecte kleur achtergrond.

26

Page 29: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

CHAPTER 7

Discussie

Voor de genoemde doelgroep is nu een werkend prototype gemaakt. Deze kan met behulp vaneen opdrachtprompt aangeroepen worden en kan je gebruiken voor het evalueren van de kleuren-combinatie in kleding. De beschreven algoritmes zijn in python geımplementeerd en werken naarbehoren. Het programma geeft duidelijk weer welke kleuren niet goed met de rest combinerenen welke kleuren wel goed combineren.

7.1 Wat had beter gekund

Er is een aantal punten waardoor het maken van de applicatie niet zo ging als gepland. On-der andere was Python langzamer dan verwacht met het verwerken en bewerken van de foto.Dit zorgde voor een langzamere applicatie dan gebruiksvriendelijk is. Het ligt er tevens ook aanwaarop de applicatie gebruikt wordt. Op een netbook (Intel Atom processor, 2GB RAM) waarophet getest is duurde het 25 seconden om de applicatie te uit te voeren, dus het scherm te krijgenmet alle automatische waardes. Daarnaast duurde het ook 5 seconden voordat gebruiker-input inde vorm van het verwijderen van een aangegeven kleur verwerkt is. Maar als dezelfde applicatieop mijn thuis computer (Intel i3 processor, 4GB RAM) gedraaid wordt duurt het eerste gedeeltemaar 3 seconden en het verwerken van de gebruiker-input zo danig snel dat het timen ervan nietbelangrijk is.

7.2 Toekomstig werk

Op dit moment is alles nog in Python, het zou sneller en efficienter kunnen als het omgeschrevenwordt naar een andere taal. Het Kleuren vergelijken werkt op het moment met 5 cases, com-plementair, analoog, tinten, wit/grijs/zwart past bij alles en als er twee keer ongeveer dezelfdekleur voorkomt in een outfit moet het of echt hetzelfde zijn of echt anders. Maar er zijn nogmeer mogelijkheden om dit te verbeteren, zoals zwart en bruin passen niet goed bij elkaar. Hi-ervoor moet nog meer onderzoek worden gedaan naar het kleuren vergelijken. Verder moet ernog gewerkt worden aan het feit dat de gebruiker kan aangeven in de lijst met gevonden kleurenwelke kleuren er genegeerd moeten worden. Naast deze punten had het ook mooi geweest als eenklein gedeelte van de feedback al af was. Het is namelijk lastig voor de gebruiker als ze alleen tehoren krijgen welke kleuren niet bij elkaar passen, in plaats van te horen waarom niet. Als degebruiker ook weet waarom, kan diegene ervan leren en heeft hij/zij later misschien minder hetprogramma nodig. Dit is echter opgeschoven tot toekomstig werk vanwege tijdsgebrek. Er is ooknog geen feedback geımplementeerd in de zin van het weergeven van namen van de kleuren[5] enwelke kleuren er dan beter gedragen kunnen worden.

27

Page 30: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

7.3 Bereikbaarheid programma

Het programma is te vinden op https://github.com/Simonevg/AfstudeerProject. Dit is eenprivate repository op git, dit aangezien het plan is er nog verder aan te werken. De huidigeapplicatie wordt naar de branch op github gepusht die development heet en de master branchbevat de laatst goed werkende versie van de applicatie. Deze versie staat tevens ook op mijncomputer mocht er vanwege de een of andere reden iets fout zijn gegaan met het pushen. Degithub wordt pas publiek gemaakt zodra de applicatie naar mijn mening af is. Dat betekent datde applicatie de extra features heeft waar ik nog aan wil werken, de website goed werkt en ereen backup is gemaakt op mijn computer. Mocht iemand eerder toegang willen tot de applicatie,graag een mailtje sturen naar [email protected].

7.4 Wat heb ik ervan geleerd

Ondanks dat Python een redelijk goede programmeertaal is zal het niet snel meer de eerste keuzezijn als er aan beeldbewerking gedaan moet worden. Daar is het te langzaam voor. Python iseen prima taal om een prototype mee te maken, maar niet goed voor echte producten vanwege desnelheid. Verder zal er volgende keer tijdens het vooronderzoek meer nagedacht moeten wordenover de uiteindelijke applicatie. Dus niet alleen naar de hoofddoelen kijken, maar ook naar deextra doelen en daar alvast wat tijd aan besteden. Dan zou nu misschien wat meer van de extradoelen geımplementeerd zijn. Als laatste punt: kijk beter naar de documentatie van functies,zodat in ieder geval duidelijk is hoe ze te gebruiken zijn. Het is namelijk altijd wel te vinden endat scheelt tijd en moeite tijdens het programmeren.

28

Page 31: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

CHAPTER 8

Conclusie

Het idee van deze applicatie was om mensen die het lastig hebben met het kunnen zien van kleurenof het maken van kleurencombinaties te helpen. Dit zou gedaan worden door een applicatie temaken waarin een foto geupload kan worden waarin de kleuren van je outfit met elkaar vergelekenzouden worden en teruggegeven zou worden of deze bij elkaar passen of niet. Er is voldaan aande minimale eisen die gesteld zijn, namelijk het kunnen uploaden van een foto naar de applicatie,een gui die de resultaten kan weergeven, het kunnen verwijderen van onbelangrijke kleuren en hetbepalen van belangrijke kleuren. Tot slot is het mogelijk dat de belangrijke kleuren vergelekenworden en gekeken word of ze bij elkaar passen of niet. Dit is allemaal verwerkt in een prototypegeschreven in python. Van de extra doelen is de volgende ook gehaald, het automatisch kunnenverwijderen van de achtergrond. Er zijn nog mogelijkheden het programma uit te breiden. Hetverbeteren van de kleuren vergelijken, het verbeteren van de algoritmes, het weergeven van denamen van kleuren en de feedback van het kleuren vergelijken.

29

Page 32: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Appendices

30

Page 33: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

APPENDIX A

Algoritme kleuren vinden

Algorithm A.0.1 Algoritme kleuren vinden

for all pixel in photo doif pixel not [-1,-1,-1] then

hue, sat, value = HSV(pixel)if pixel = white, gray, black then

hue hist[13]++save RGB[13][0] += pixel[0] // R value pixelsave RGB[13][1] += pixel[1] // G value pixelsave RGB[13][2] += pixel[2] // B value pixel

elsehue hist[hue*12]++save RGB[hue*12][0] += pixel[0] // R value pixelsave RGB[hue*12][1] += pixel[1] // G value pixelsave RGB[hue*12][2] += pixel[2] // B value pixel

end ifend if

end forfor all index in len(save RGB) do

save RGB[index][0] = save RGB[index][0]/hue hist[index][0]save RGB[index][1] = save RGB[index][1]/hue hist[index][1]save RGB[index][2] = save RGB[index][2]/hue hist[index][2]

end for

31

Page 34: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

APPENDIX B

Algoritme Kleuren vergelijken

Algorithm B.0.2 Algoritme Kleuren vergelijken

for all RGB in RGBList dohue, sat, val = HSV(RGB)for all RGB2 in RGBList(except RGB) do

hue2, sat2, val2 = HSV(RGB2)if hue==hue2 thenif value not value2 or sat not sat2 then

// same hue but other tint matchHSV and HSV2 matchbreak;

end ifelse if diff(hue, hue2) < 0.5 then

complements matchHSV and HSV2 matchbreak;

else if hue == hue2+0.1 or hue == hue2-0.1 then// if they are next to each other on the colour circle they matchHSV and HSV2 matchbreak;

end ifend forif not match found then

value doesn’t match anythingno match append (RGB, RGB2)

end ifend for

32

Page 35: Simone van Gompel · 2020. 8. 15. · Abstract An important aspect of life is making a good impression on other people. This is mostly done by the choice of clothing and the colours

Bibliography

[1] Adrian Ford & Alan Roberts, Colour Space Conversions, August 11, 1998.

[2] http://en.wikipedia.org/wiki/HSL_and_HSV

[3] Lexi Sheehy, http://www.collegefashion.net/fashion-tips/

a-foolproof-guide-to-matching-colours-in-your-outfits/ Penn State Univer-sity.

[4] http://www.sostylist.com/index.php/colourmatchingadviceforclothing

[5] https://pypi.Python.org/pypi/webcolours/1.4

[6] Fredrik Lundh & Matthew Ellis, Python Imaging Library Overview, March 12, 2002, PIL1.1.3

[7] Mig-Hsuan Yang, Narenda Ahuja, Detecting Human Faces in colour Images, August 11,1998.

[8] Gerald Friedland, Kristian Jantz, Lars Knipping, Raul Rojas, Image Segmentation by Uni-form colour Clustering Approach and Benchmark Results.

[9] Yining Deng, B. S. Manjunath, Hyundoo Shin, colour Image Segmentation.

[10] Khang Siang Tan, Nor Ashidi Mat Isa, colour image segmentation using histogram thresh-olding - Fuzzy C-means hybrid approach.

[11] Wladyslaw Skarbek, Andreas Koschan, colour Image Segmentation - A Survey -.

[12] H.D. Cheng, X.H. Jiang, Y. Sun, Jingli Wang, colour image segmentation: advances andprospects.

[13] Zhiding Yu, Oscar C. Au, Roubing Zou, Weiyu Yu, Jing Tian, An adaptive unsupervisedapproach toward pixel clustering and colour image segmentation.

[14] Kevin McGuinness, Noel E. O’Connor, A comparative evaluation of interactive segmentationalgorithms.

[15] Y. Deng, C. Kenney, M.S. Moore, and B.S. Manjunath, Peer group filtering and perceptualcolour image quantization.

[16] Tomasz Adamek, Noel E. OConnor, Noel Murphy, Region-based Segmentation of imagesusing syntatic visual features.

[17] Charles Poynton, ColorFAQ.

33