├── .gitignore
├── EA.pptx
├── README.MD
├── docs
    ├── bundle.js
    ├── bundle.js.map
    ├── index.html
    ├── styles.css
    └── styles.css.map
├── eagif4.gif
├── oving2.pdf
├── package.json
├── src
    ├── css
    │   └── styles.css
    ├── index.html
    └── js
    │   ├── ea.js
    │   ├── main.js
    │   ├── simulator
    │       ├── creature.js
    │       ├── creatureDefinitions.js
    │       └── walkSimulator.js
    │   └── walkerEaRunner.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | *.iml
3 | node_modules/


--------------------------------------------------------------------------------
/EA.pptx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/walkingea/55b5983b95e9b2e2719e21187608c64f304fba75/EA.pptx


--------------------------------------------------------------------------------
/README.MD:
--------------------------------------------------------------------------------
  1 | WalkingEa
  2 | =========
  3 | 
  4 | Try it out: https://matsemann.github.io/walkingea/
  5 | 
  6 | ![Animation](eagif4.gif?raw=true)
  7 | 
  8 | 
  9 | To run
 10 | 
 11 | ```
 12 | npm install
 13 | npm run server
 14 | ```
 15 | 
 16 | Open http://localhost:8080 in your browser
 17 | 
 18 | 
 19 | OPPGAVE
 20 | -------
 21 | 
 22 | Vi har laget en simulator og en basic EA-loop. Loopen kaller stort sett bare på et sett funksjoner, som dere må implementere.
 23 | I hovedsak fila `walkerEaRunner.js` det skal endres i. Målet er å skrive kode som klarer å avle frem individer som har lært å gå.
 24 | 
 25 | ### Oppgave 1
 26 | 
 27 | I simulatoren ser dere nå bare en enslig stakkar. Vi trenger derimot en hel populasjon, så første oppgave går ut på å opprette flere individer. 
 28 | 
 29 | * Endre på `generatePopulationFunction()` slik at den returnerer like mange individer som man har satt `population size` til.
 30 | * Gi hvert individ tilfeldige gener. Genene i vårt tilfelle er et array med (flyt)tall mellom 0 og 1, der antallet elementer bestemmes utifra hvilken figur som utvikles.
 31 | * Når oppgaven er løst skal man ved en refresh av nettleseren se flere individer (fordel på de forskjellige etasjene) som beveger seg i tilfeldige spasmer
 32 | 
 33 | Bevegelsene til individene baseres på genene. Hvert tall i genet tilhører en muskel (kant), og styrer frekvensen/sinusfunksjonen som denne trekker seg sammen i. Gyldig verdi per tall er domenet [0, 1]
 34 | 
 35 | 
 36 | ### Oppgave 2
 37 | 
 38 | Neste steg er å gi hvert individ en score basert på hvor bra det gjorde det. Output fra simuleringen er en liste med verdier, der hver verdi tilhører et individ.
 39 | Denne verdien er igjen en liste, med posisjonshistorikken per sekund for det individet igjennom simuleringen.
 40 | 
 41 | Det er mange måter å beregne fitness på basert på denne historikken. Man kan score individene basert på sluttposisjon, på lengste distanse de noensinne oppnådde,
 42 | på hvor jevnt de beveget seg, trekke dem i score for å ha beveget seg bakover osv. Lønner seg å begynne simpelt, og heller komme tilbake og justere scoringen senere.
 43 | 
 44 | * I `fitnessFunction`, sett `fitness`-verdien på hvert individ basert på resultatene fra simuleringen.
 45 | * Når dette er gjort skal man etter en iterasjon (60 simulerte sekunder) se grafen oppdatere seg.
 46 | 
 47 | 
 48 | ### Oppgave 3
 49 | Nå som alle individene har en score kan man velge hvem som skal få parre seg. Om man alltid velger de beste får man en grådig algoritme
 50 | som fort kan bli stuck, så vi ønsker at de dårlige løsningene skal ha en sjanse, men at de gode løsningene skal ha en *større* sjanse.
 51 | 
 52 | Det finnes flere algoritmer man kan implementere. Et tips er å implementere dem i hver sin funksjon, og så kan man lett bytte hvilken som 
 53 | brukes ved å sende forskjellig funksjon inn til selve EAen.
 54 | 
 55 | Som input får man listen over alle individer, med `fitness`-verdien satt. Det man skal returnere er en liste med `populationSize` antall individer.
 56 | Så man velger ut ett og ett individ basert på en av algoritmene under, helt til man har nok. Samme individ kan plukkes ut flere ganger.
 57 | 
 58 | * Fitness-proportionate selection.
 59 |  1. Normaliser fitness-verdiene til individene (slik at fitness-verdiene for alle individer summerer til 1)
 60 |  2. Lag et array ("Roulettehjul") med verdier fra 0 til 1, der hvert individ blir tildelt like stor del av arrayet som den normaliserte fitnessen deres tilsvarer. (`rouletteWheel[i] = rouletteWheel[i -1] + [normalisert fitness-verdi for individ i]`)
 61 |  3. Spinn roulettehjulet for å velge et individ. (Lag et tilfeldig tall X mellom 0 og 1 og velg individet som befinner seg i `rouletteWheel[i] > X`)
 62 | 
 63 | * Tournament selection
 64 |  1. Justeres med to verdier: k og p
 65 |  2. Trekk ut k tilfeldige individer fra populasjonen
 66 |  3. Med sannsynlighet p, velg individet med best fitness score
 67 |  4. Med sannsynlighet p*(1-p)^(n-1), velg individet med n-te best fitness
 68 |  
 69 | * Simple tournament selection
 70 |  1. Trekk ut k tilfeldige individer fra populasjonen
 71 |  2. Velg individet med best fitness av disse
 72 |  3. Denne kan ikke justeres/tweakes i like stor grad
 73 |  
 74 | * Andre algoritmer
 75 |  1. Sigma scaling, gir mye variasjon i starten og senere mer målrettet, som kan være nyttig
 76 |  2. Truncation selection
 77 |  3. Rank selection
 78 |  
 79 | * Implementer en av algoritmene nevnt over inne i `parentSelectionFunction`
 80 | * Når dette er gjort skal man etter noen generasjoner se en trend at man har fått bedre individer. Snittscoren i grafen bør ha økt fra det den var i starten.
 81 | 
 82 | 
 83 | ### Oppgave 4
 84 | 
 85 | Crossover er der selve "paringen" skjer. Funksjonen får inn to individer, og har mulighet til å mikse deres DNA.
 86 | 
 87 | * Gjøres i funksjonen `crossoverFunction`.
 88 | * Først må man finne ut om de skal mikses eller ikke. Gjøres ved å generere et tilfeldig tall (mellom 0 og 1) og sjekke om det er mindre enn `crossoverRate` som har blitt valgt.
 89 | * Om tilfeldighetene sier at en crossover skal gjøres, gjøres det ved å velge en tilfeldig index i individene sitt gen, og bytte/swappe alle verdiene i genet etter denne indeksen.
 90 | 
 91 | 
 92 | ### Oppgave 5
 93 | 
 94 | Mutasjonen er der man har mulighet til å innføre nye "egenskaper" i populasjonen. Det gjøres ved å gjøre justeringer på genet til individene.
 95 | 
 96 | I hovedsak to måter å gjøre mutasjon på: per verdi, eller på genet som helhet
 97 | * Førstnevnte itererer man over hver verdi i genet, og for hver verdi trekker man et tilfeldig tall og sammenligner med `mutationRate`. Om det skal muteres, muterer man den verdien.
 98 | * Nummer 2, som er den mest vanlige, er at man finner ut om man skal mutere eller ikke. Skal man mutere, gjøres det ved å velge en tilfeldig verdi i genet og mutere denne.
 99 | 
100 | Forskjellen på disse to er at den første har mulighet til å endre flere verdier i samme mutasjon, og kan dermed raskere utvikle spennende egenskaper.
101 | Samtidig står man også i fare for at for store endringer ødelegger individet man muterer, så en tradeoff der. Bruker man den først er `mutationRate` per verdi,
102 | i genet og bør derfor være lav. Bruker man nummer 2 er `mutationRate` per individ, og kan da være en del høyere.
103 | 
104 | Når en muterer verdien er det igjen flere måter å gjøre det på (når genet er flyttall):
105 | * Bare bytte ut verdien med en ny, tilfeldig verdi mellom 0 og 1. Kan bli en større endring, på godt og vondt.
106 | * Trekke fra/legge til en litt mindre, tilfeldig verdi.
107 | * Legge til en tilfeldig, normalfordelt verdi rundt 0. Ofte denne som brukes i praksis da endringen i snitt er liten, men med en liten sannsynlighet for større endringer. `Rnd2` her gir et godt eksempel på hvordan lage et normalfordelt tall: http://jsfiddle.net/Guffa/tvt5K/
108 | 
109 | Mutasjon får inn ett individ. Det er to måter å bruke mutationRate på:
110 | * Om et tilfeldig tall er under mutationRate, muterer vi en tilfeldig verdi i arrayet til individet. Da har man typisk en høy mutation rate.
111 | * For hver verdi i arrayet til individet trekker vi et tilfeldig tall og sjekker om det er under mutationRate, i så fall muterer vi den posisjonen i arrayet. Her kan man altså kanskje få flere mutasjoner på samme individ. Har typisk en veldig lav mutation rate, da den nå gjelder per verdi.
112 | 
113 | Husk at verdiene i genet bare er mellom 0 og 1, så etter en verdi er mutert må man passe på at det fortsatt gjelder.
114 | 
115 | ### Oppgave 6
116 | For adult-selection kjører vi foreløbig en "full generational replacement", altså at alle foreldre dør og blir erstattet av barna.
117 | Men det kan være lurt å la et par av de beste foreldrene få overleve. Dette sikrer at det beste individet i en generasjon ikke er dårligere enn det var i forrige generasjon,
118 | og at man ikke mister de beste genkombinasjonene man har produsert så langt. Dette kalles for "elitisme".
119 | 
120 | * I `adultSelectionFunction`, plukk ut noen få av de beste fra `oldPopulation` og returner de sammen med barna (`concat` funksjonen i javascript).
121 | * Når dette er gjort bør max fitness per generasjon aldri synke, da noen av de beste alltid blir med videre.
122 | 
123 | ### Tweaking
124 | 
125 | Å skrive koden er bare 10% av det å lage en evolusjonær algoritme, da det er masse tweaking for å få den god. Her er noe av det som kan justeres:
126 | 
127 | * `Mutation rate` kan være lurt å ha litt høy, da det er den som innfører nye egenskaper til populasjonen. Samtidig kan for høy mutasjon komme i veien og ødelegge for gode individer.
128 | 
129 | * `Crossover rate` er også viktig en viktig faktor. Ikke gitt at det å kombinere to foreldre gir gode avkom. Får man etter hvert mange like individer kan det være at crossover- og mutation rate er for lave.
130 | 
131 | * `Population`, en større populasjon gir større mangfold som kan gi bedre løsninger. Men det gjør også algoritmen tregere.
132 | 
133 | * `Elitism` / adult-selection, det er ofte lurte å kopiere over noen av de beste fra hver generasjon, men kopierer man over for mange av de gode mister man mangfoldet og får en grådig algoritme som kan bli stuck.
134 | 
135 | * `Mutasjon`, nevnt flere måter å gjøre mutasjon på som kan testes
136 | 
137 | * `Parent-selection`, flere forskjellige måter å gjøre det på. I tillegg har f. eks. Tournament Selection to parametre som kan justeres,
138 | som avgjør sannsynligheten for å velge den beste løsningen eller om en dårligere en skal bli valgt for å bevare mangfoldet. Refereres ofte til
139 | "selection pressure". For høy pressure gjør at bare gode individer velges, for lav at for mange dårlige blir med videre, så trikset er å 
140 | tweake denne masse. Et tegn på for lav selection pressure kan være at average-fitness ikke øker særlig på sikt.
141 | 
142 | * `Fitness-funksjonen`, her er det ofte mye tweaking for å belønne egenskaper som kan lønne seg på sikt.
143 | 
144 | 
145 | ### Bonus
146 | 
147 | * Prøv å lære noen av de andre figurene å gå.
148 | 
149 | * Legg til en ny figur ved å utvide `creatureDefinitions.js`. `Points` er koordinater til punktene, mens `edges` er indekser til punkter som skal kobles sammen. 
150 | Navnet du gir figuren må også legges til i dropdownen i `index.html`
151 | 
152 | * Implementer en ny form for parent selection.
153 | 
154 | * Lek deg med simulatoren. F. eks. justere på verdiene i `jointDef` i `creature.js`.
155 | 
156 | * Jeg har lagt ved en pdf som heter `oving2.pdf`. I denne finner man 3 problemer: One-Max, LOLZ og Surprising Sequences.
157 | EAen er så generell at den kan gjenbrukes til å løse alle mulige problemer, så prøv å løse noen av disse ved å kalle `runEA` med funksjoner relatert til disse problemene.
158 | Parent selection, crossover og slik kan nok gjenbrukes, men mutation må nok byttes ut med en som ikke er beregnet på flyttall, fitness funksjonen må omskrives spesifikt per problem, og funksjonen
159 | som genererer populasjonen må også byttes ut til problemet.
160 | 
161 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Walking EA - Evolve</title>
 5 |     <link rel="stylesheet" href="styles.css"/>
 6 | </head>
 7 | <body>
 8 | 
 9 | <h1>Walking EA</h1>
10 | <p>Press start evolution over at the right. Scroll down for a description. See <a href="https://github.com/Matsemann/walkingea">the code</a> to evolve your own.</p>
11 | 
12 | <div class="container">
13 | 
14 |     <div class="canvas">
15 |         <canvas id="mainCanvas" width="800" height="600"></canvas>
16 | 
17 |         <div id="debugInfo">
18 | 
19 |         </div>
20 |         <div class="slider">
21 |             <label for="speedslider">Speed</label>
22 |             <input id="speedslider" type="range" min="1" max="50" step="1" value="2"/>
23 |             <input id="speedslidervalue" type="text" value="2" readonly/>
24 |         </div>
25 | 
26 |         <!--
27 |         <div class="slider inline">
28 |             <label for="cameraslider">CameraX</label>
29 |             <input id="cameraslider" type="range" min="-50" max="100" step="1" value="5"/>
30 |             <input id="cameraslidervalue" type="text" value="5" readonly/>
31 |         </div>-->
32 |     </div>
33 | 
34 |     <div class="controls">
35 |         <h2>Controls</h2>
36 | 
37 |         <div>
38 |             <label for="figure">Figure</label>
39 |             <select id="figure">
40 |                 <option>circle</option>
41 |                 <option selected>something</option>
42 |                 <option>rojas</option>
43 |             </select>
44 |         </div>
45 | 
46 |         <div class="slider">
47 |             <label for="mutationslider">Mutation</label>
48 |             <input id="mutationslider" type="range" min="0" max="1" step=".05" value=".6"/>
49 |             <input id="mutationslidervalue" type="text" value=".6" readonly/>
50 |         </div>
51 | 
52 |         <div class="slider">
53 |             <label for="crossoverslider">Crossover</label>
54 |             <input id="crossoverslider" type="range" min="0" max="1" step=".05" value=".5"/>
55 |             <input id="crossoverslidervalue" type="text" value=".5" readonly/>
56 |         </div>
57 | 
58 |         <div class="slider">
59 |             <label for="populationslider">Population size</label>
60 |             <input id="populationslider" type="range" min="2" max="100" step="2" value="20"/>
61 |             <input id="populationslidervalue" type="text" value="20" readonly/>
62 |         </div>
63 | 
64 | 
65 |         <div>
66 |             <button id="start">Start evolution</button>
67 |         </div>
68 | 
69 |         <canvas id="graph" style="margin-top: 15px"></canvas>
70 |     </div>
71 | </div>
72 | 
73 | <div class="desc">
74 |     <h2>Information</h2>
75 | 
76 |     <p>Works by contracting "muscles"</p>
77 | 
78 |     <h3>Controls</h3>
79 |     <p>
80 |         <b>Speed</b> controls how fast the simulation progresses<br/>
81 |         <b>Creature</b> is how the creature should look<br/>
82 |         <b>Mutation chance</b> the chance of some muscle having its contraction characteristics changed<br/>
83 |         <b>Crossover chance</b> the chance of two parents being mixed<br/>
84 |         <b>Population size</b> how many creatures there should be<br/>
85 |     </p>
86 | 
87 |     <p>Inspired by <a href="https://youtu.be/3zqaBS5_6LM">this video</a> by Junior Rojas,
88 |         <a href="http://boxcar2d.com/">Boxcard2d</a> and its browser predecessor
89 |         <a href="http://rednuht.org/genetic_cars_2/">Genetic Cars 2</a>.
90 |     </p>
91 | </div>
92 | 
93 | 
94 | <script src="bundle.js"></script>
95 | </body>
96 | </html>


--------------------------------------------------------------------------------
/docs/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background: #eee;
 3 | }
 4 | 
 5 | .container {
 6 |     width: 1200px;
 7 | }
 8 | 
 9 | .canvas {
10 |     width: 800px;
11 |     float: left;
12 | }
13 | 
14 | .controls {
15 |     width: 350px;
16 |     float: right;
17 | }
18 | 
19 | .inline {
20 |     float: left;
21 | }
22 | 
23 | .slider {
24 |     padding: 10px 10px 10px 0;
25 | }
26 | 
27 | label {
28 |     display: block;
29 |     font-weight: bold;
30 | }
31 | 
32 | .slider input[type="range"] {
33 |     width: 150px;
34 |     position: relative;
35 |     top: 5px;
36 | }
37 | .slider input[type="text"] {
38 |     width: 30px;
39 | }
40 | 
41 | .desc {
42 |     clear: both;
43 |     padding-top: 5px;
44 | }
45 | /*# sourceMappingURL=styles.css.map*/


--------------------------------------------------------------------------------
/docs/styles.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"styles.css","sourceRoot":""}


--------------------------------------------------------------------------------
/eagif4.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/walkingea/55b5983b95e9b2e2719e21187608c64f304fba75/eagif4.gif


--------------------------------------------------------------------------------
/oving2.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/walkingea/55b5983b95e9b2e2719e21187608c64f304fba75/oving2.pdf


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "walkingea",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "webpack",
 8 |     "server": "webpack-dev-server"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "chart.js": "^2.6.0",
14 |     "planck-js": "^0.1.34"
15 |   },
16 |   "devDependencies": {
17 |     "babel-core": "^6.24.1",
18 |     "babel-loader": "^6.4.1",
19 |     "babel-plugin-transform-async-to-generator": "^6.24.1",
20 |     "babel-preset-es2015": "^6.24.1",
21 |     "css-loader": "^0.28.0",
22 |     "extract-text-webpack-plugin": "^2.1.0",
23 |     "webpack": "^2.4.1",
24 |     "webpack-dev-server": "^2.4.2"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/css/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background: #eee;
 3 | }
 4 | 
 5 | .container {
 6 |     width: 1200px;
 7 | }
 8 | 
 9 | .canvas {
10 |     width: 800px;
11 |     float: left;
12 | }
13 | 
14 | .controls {
15 |     width: 350px;
16 |     float: right;
17 | }
18 | 
19 | .inline {
20 |     float: left;
21 | }
22 | 
23 | .slider {
24 |     padding: 10px 10px 10px 0;
25 | }
26 | 
27 | label {
28 |     display: block;
29 |     font-weight: bold;
30 | }
31 | 
32 | .slider input[type="range"] {
33 |     width: 150px;
34 |     position: relative;
35 |     top: 5px;
36 | }
37 | .slider input[type="text"] {
38 |     width: 30px;
39 | }
40 | 
41 | .desc {
42 |     clear: both;
43 |     padding-top: 5px;
44 | }


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Walking EA - Evolve</title>
 5 |     <link rel="stylesheet" href="styles.css"/>
 6 | </head>
 7 | <body>
 8 | 
 9 | <h1>Walking EA</h1>
10 | <p>Press start evolution over at the right. Scroll down for a description. See <a href="https://github.com/Matsemann/walkingea">the code</a> to evolve your own.</p>
11 | 
12 | <div class="container">
13 | 
14 |     <div class="canvas">
15 |         <canvas id="mainCanvas" width="800" height="600"></canvas>
16 | 
17 |         <div id="debugInfo">
18 | 
19 |         </div>
20 |         <div class="slider">
21 |             <label for="speedslider">Speed</label>
22 |             <input id="speedslider" type="range" min="1" max="50" step="1" value="2"/>
23 |             <input id="speedslidervalue" type="text" value="2" readonly/>
24 |         </div>
25 | 
26 |         <!--
27 |         <div class="slider inline">
28 |             <label for="cameraslider">CameraX</label>
29 |             <input id="cameraslider" type="range" min="-50" max="100" step="1" value="5"/>
30 |             <input id="cameraslidervalue" type="text" value="5" readonly/>
31 |         </div>-->
32 |     </div>
33 | 
34 |     <div class="controls">
35 |         <h2>Controls</h2>
36 | 
37 |         <div>
38 |             <label for="figure">Figure</label>
39 |             <select id="figure">
40 |                 <option>circle</option>
41 |                 <option selected>something</option>
42 |                 <option>rojas</option>
43 |             </select>
44 |         </div>
45 | 
46 |         <div class="slider">
47 |             <label for="mutationslider">Mutation</label>
48 |             <input id="mutationslider" type="range" min="0" max="1" step=".05" value=".6"/>
49 |             <input id="mutationslidervalue" type="text" value=".6" readonly/>
50 |         </div>
51 | 
52 |         <div class="slider">
53 |             <label for="crossoverslider">Crossover</label>
54 |             <input id="crossoverslider" type="range" min="0" max="1" step=".05" value=".5"/>
55 |             <input id="crossoverslidervalue" type="text" value=".5" readonly/>
56 |         </div>
57 | 
58 |         <div class="slider">
59 |             <label for="populationslider">Population size</label>
60 |             <input id="populationslider" type="range" min="2" max="100" step="2" value="20"/>
61 |             <input id="populationslidervalue" type="text" value="20" readonly/>
62 |         </div>
63 | 
64 | 
65 |         <div>
66 |             <button id="start">Start evolution</button>
67 |         </div>
68 | 
69 |         <canvas id="graph" style="margin-top: 15px"></canvas>
70 |     </div>
71 | </div>
72 | 
73 | <div class="desc">
74 |     <h2>Information</h2>
75 | 
76 |     <p>Works by contracting "muscles"</p>
77 | 
78 |     <h3>Controls</h3>
79 |     <p>
80 |         <b>Speed</b> controls how fast the simulation progresses<br/>
81 |         <b>Creature</b> is how the creature should look<br/>
82 |         <b>Mutation chance</b> the chance of some muscle having its contraction characteristics changed<br/>
83 |         <b>Crossover chance</b> the chance of two parents being mixed<br/>
84 |         <b>Population size</b> how many creatures there should be<br/>
85 |     </p>
86 | 
87 |     <p>Inspired by <a href="https://youtu.be/3zqaBS5_6LM">this video</a> by Junior Rojas,
88 |         <a href="http://boxcar2d.com/">Boxcard2d</a> and its browser predecessor
89 |         <a href="http://rednuht.org/genetic_cars_2/">Genetic Cars 2</a>.
90 |     </p>
91 | </div>
92 | 
93 | 
94 | <script src="bundle.js"></script>
95 | </body>
96 | </html>


--------------------------------------------------------------------------------
/src/js/ea.js:
--------------------------------------------------------------------------------
  1 | import Chart from 'chart.js';
  2 | 
  3 | let currentGeneration;
  4 | let chart;
  5 | 
  6 | 
  7 | export function runEa({generatePopulation, fitness, adultSelection, parentSelection, crossover, mutate}) {
  8 | 
  9 |     currentGeneration = 0;
 10 |     makeChart();
 11 |     debugInfo([{fitness: 0, genes: []}]);
 12 |     currentGeneration++;
 13 | 
 14 |     let population = generatePopulation();
 15 | 
 16 |     async function iteration() {
 17 |         await fitness(population);
 18 |         debugInfo(population);
 19 | 
 20 |         const parents = parentSelection(population);
 21 | 
 22 |         const children = [];
 23 | 
 24 |         for (let i = 0; i < parents.length; i += 2) {
 25 |             const parent1 = parents[i];
 26 |             const parent2 = parents[(i + 1) % parents.length];
 27 | 
 28 |             const child1 = copy(parent1);
 29 |             const child2 = copy(parent2);
 30 | 
 31 |             crossover(child1, child2);
 32 |             children.push(child1);
 33 |             children.push(child2);
 34 |         }
 35 | 
 36 |         children.forEach(c => mutate(c));
 37 | 
 38 |         population = adultSelection(population, children);
 39 |         currentGeneration++;
 40 |         setTimeout(iteration, 0);
 41 |     }
 42 | 
 43 |     iteration();
 44 | }
 45 | 
 46 | function copy(individual) {
 47 |     return {
 48 |         genes: individual.genes.slice(),
 49 |         fitness: 0
 50 |     };
 51 | }
 52 | 
 53 | function debugInfo(population) {
 54 |     let sum = 0;
 55 |     let max = -99999;
 56 |     let best = null;
 57 | 
 58 |     population
 59 |         .forEach(i => {
 60 |             const f = i.fitness;
 61 |             sum += f;
 62 |             if (f > max) {
 63 |                 max = f;
 64 |                 best = i;
 65 |             }
 66 |         });
 67 | 
 68 |     let avg = sum / population.length;
 69 | 
 70 | 
 71 |     document.getElementById("debugInfo").innerHTML = `<b>Generation: <b/>${currentGeneration}, <b>best fitness:</b>
 72 |         ${max.toFixed((2))}, <b>average:</b> ${avg.toFixed((2))}<br>
 73 |         Best: <input value="[${best.genes}]">`;
 74 | 
 75 |     chart.data.datasets[0].data.push(max);
 76 |     chart.data.datasets[1].data.push(avg);
 77 |     chart.data.labels.push(currentGeneration);
 78 |     chart.update();
 79 | }
 80 | 
 81 | var ctx = document.getElementById("graph");
 82 | 
 83 | function makeChart() {
 84 |     chart = new Chart(ctx, {
 85 |         type: 'line',
 86 |         data: {
 87 |             labels: [],
 88 |             datasets: [
 89 |                 {
 90 |                     label: 'Max',
 91 |                     backgroundColor: '#7bff49',
 92 |                     borderColor: '#7bff49',
 93 |                     fill: false,
 94 |                     borderWidth: 2,
 95 |                     //data: [{x: 1, y:5}, {x: 2, y:5}, {x: 3, y:5}]
 96 |                     data: []
 97 |                 }, {
 98 |                     label: 'Avg',
 99 |                     backgroundColor: '#6489ff',
100 |                     borderColor: '#6489ff',
101 |                     borderWidth: 2,
102 |                     fill: false,
103 |                     //data: [{x: 1, y:4}, {x: 1, y:3}, {x: 1, y:2}]
104 |                     data: []
105 |                 }
106 |             ]
107 |         },
108 |         options: {
109 |             responsive: true,
110 |             legend: {
111 |                 display: true,
112 |                 position: 'bottom'
113 |             },
114 |             scales: {
115 |                 xAxes: [
116 |                     {
117 |                         display: true,
118 |                         ticks: {
119 |                             suggestedMin: 50,
120 |                             suggestedMax: 100
121 |                         }
122 |                     }
123 |                 ],
124 |                 yAxes: [
125 |                     {
126 |                         display: true,
127 |                         scaleLabel: {
128 |                             display: true,
129 |                             labelString: 'Value'
130 |                         }
131 |                     }
132 |                 ]
133 |             }
134 | 
135 |         }
136 |     });
137 | 
138 | }
139 | 
140 | 


--------------------------------------------------------------------------------
/src/js/main.js:
--------------------------------------------------------------------------------
 1 | import css from '../css/styles.css';
 2 | import {setSimulationIterations, endSimulation} from './simulator/walkSimulator.js';
 3 | import evolveWalkers from './walkerEaRunner.js';
 4 | 
 5 | function startSimulation() {
 6 |     endSimulation();
 7 |     const options = {
 8 |         mutationRate: parseFloat(document.getElementById('mutationslider').value),
 9 |         crossoverRate: parseFloat(document.getElementById('crossoverslider').value),
10 |         creatureType: document.getElementById('figure').value,
11 |         populationSize: document.getElementById('populationslider').value
12 |     };
13 | 
14 | 
15 |     console.log(options);
16 | 
17 |     evolveWalkers(options);
18 | 
19 | }
20 | 
21 | startSimulation();
22 | 
23 | document.getElementById('speedslider').addEventListener('input', () => {
24 |     let value = document.getElementById('speedslider').value;
25 |     setSimulationIterations(value);
26 |     document.getElementById('speedslidervalue').value = value;
27 | });
28 | document.getElementById('mutationslider').addEventListener('input', () => {
29 |     let value = document.getElementById('mutationslider').value;
30 |     document.getElementById('mutationslidervalue').value = value;
31 | });
32 | document.getElementById('crossoverslider').addEventListener('input', () => {
33 |     let value = document.getElementById('crossoverslider').value;
34 |     document.getElementById('crossoverslidervalue').value = value;
35 | });
36 | document.getElementById('populationslider').addEventListener('input', () => {
37 |     let value = document.getElementById('populationslider').value;
38 |     document.getElementById('populationslidervalue').value = value;
39 | });
40 | 
41 | document.getElementById('start').addEventListener('click', () => {
42 |     startSimulation();
43 | });
44 | 


--------------------------------------------------------------------------------
/src/js/simulator/creature.js:
--------------------------------------------------------------------------------
  1 | import {Vec2, DistanceJoint, Circle} from 'planck-js';
  2 | 
  3 | import defs from './creatureDefinitions.js';
  4 | 
  5 | 
  6 | export default class Creature {
  7 | 
  8 |     constructor(d, movements, world, color, offset, name) {
  9 |         const definition = defs[d];
 10 | 
 11 |         this.color = color;
 12 |         this.offset = offset;
 13 |         this.name = name;
 14 |         this.bodies = [];
 15 |         this.joints = [];
 16 |         this.jointLengths = [];
 17 |         this.movements = movements;
 18 | 
 19 |         this.maxDst = -200;
 20 |         this.distances = [];
 21 | 
 22 | 
 23 |         const shape = Circle(.1);
 24 | 
 25 |         for (let i = 0; i < definition.points.length; i++) {
 26 |             const p = definition.points[i];
 27 |             const bodyDef = {
 28 |                 type: 'dynamic',
 29 |                 position: Vec2(p[0], p[1]),
 30 |                 linearDamping: .8,
 31 |                 angularDamping: .5,
 32 |                 fixedRotation: true
 33 |             };
 34 | 
 35 |             const fixtureDef = {
 36 |                 density: 1,
 37 |                 friction: 1000.5,
 38 |                 restitution: 0.1,
 39 |                 filterGroupIndex: -1
 40 |             };
 41 | 
 42 |             const body = world.createBody(bodyDef);
 43 |             body.createFixture(shape, fixtureDef);
 44 | 
 45 |             this.bodies.push(body);
 46 |         }
 47 | 
 48 |         const jointDef = {
 49 |             frequencyHz: 10.,
 50 |             dampingRatio: 8.8
 51 |         };
 52 | 
 53 |         for (let i = 0; i < definition.edges.length; i++) {
 54 |             const e = definition.edges[i];
 55 | 
 56 |             const joint = DistanceJoint(jointDef,
 57 |                 this.bodies[e[0]], this.bodies[e[0]].getWorldPoint(Vec2(0, 0)),
 58 |                 this.bodies[e[1]], this.bodies[e[1]].getWorldPoint(Vec2(0, 0))
 59 |             );
 60 |             world.createJoint(joint);
 61 |             this.joints.push(joint);
 62 |             this.jointLengths.push(joint.getLength());
 63 |             //this.movements.push(Math.random());
 64 |             //this.movements.push(.05 + offset / 5);
 65 |         }
 66 | 
 67 |     }
 68 | 
 69 |     update(time) {
 70 |         let dst = this.findDst();
 71 |         this.setMaxDst(dst);
 72 |         this.logDst(dst, time);
 73 | 
 74 |         for (let i = 0; i < this.joints.length; i++) {
 75 |             const j = this.joints[i];
 76 |             const l = this.jointLengths[i];
 77 |             const m = this.movements[i];
 78 | 
 79 |             var newL = (Math.sin(time * 10 * m + Math.PI / 2 + i*.7) + 1) / 4 + 0.5;
 80 | 
 81 |             j.setLength(l * newL);
 82 |         }
 83 | 
 84 |     }
 85 | 
 86 |     setMaxDst(dst) {
 87 |         if (dst > this.maxDst) {
 88 |             this.maxDst = dst;
 89 |         }
 90 |     }
 91 | 
 92 |     logDst(dst, time) {
 93 |         if (time - this.distances.length > 0) {
 94 |             this.distances.push(dst);
 95 |         }
 96 |     }
 97 | 
 98 |     findDst() {
 99 |         let max = -200;
100 |         this.bodies.forEach(b => {
101 |             const x = b.getPosition().x;
102 |             if (x > max) {
103 |                 max = x;
104 |             }
105 |         });
106 |         return max;
107 |     }
108 | 
109 | 
110 |     render(ctx) {
111 |         this.bodies.forEach(b => {
112 |             const c = this.color;
113 |             ctx.fillStyle = `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`;
114 | 
115 |             const p = b.getPosition();
116 |             const a = b.getAngle();
117 |             ctx.beginPath();
118 |             ctx.arc(p.x, p.y + this.offset, .1, 0, 2 * Math.PI);
119 |             ctx.fill();
120 | 
121 |         });
122 | 
123 |         this.joints.forEach(j => {
124 |             const a = j.getBodyA().getPosition();
125 |             const b = j.getBodyB().getPosition();
126 | 
127 |             const c = this.color;
128 |             //ctx.strokeStyle = `rgba(${c.r}, ${c.g}, ${c.b}, 0.3)`;
129 |             ctx.strokeStyle = `rgba(0, 0, 0, 0.6)`;
130 |             ctx.lineWidth=.05;
131 |             ctx.beginPath();
132 |             ctx.moveTo(a.x, a.y + this.offset);
133 |             ctx.lineTo(b.x, b.y + this.offset);
134 |             ctx.stroke();
135 |         });
136 | 
137 |         if (this.name) {
138 |             let pos = this.bodies[0].getPosition();
139 |             ctx.renderText(this.name, 14, pos.x + .2, pos.y + this.offset);
140 |         }
141 | 
142 |     }
143 | 
144 | 
145 | }
146 | 


--------------------------------------------------------------------------------
/src/js/simulator/creatureDefinitions.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | const definitions = {
 4 |     something: {
 5 |         points: [
 6 |             [0, 0],
 7 |             [0, 1],
 8 |             [1, 1],
 9 |             [1, 0],
10 |             [-1, 0],
11 |             [-1, 1]
12 |         ],
13 |         edges: [
14 |             [0, 1],
15 |             [0, 2],
16 |             [1, 2],
17 |             [1, 3],
18 |             [2, 3],
19 |             [1, 4],
20 |             [4, 5],
21 |             [0, 5],
22 |             [1, 5]
23 |         ]
24 |     },
25 |     circle: {
26 |         points: [
27 |             [0, 0],
28 |             [-0.707, 0.293],
29 |             [-1, 1],
30 |             [-0.707, 1.707],
31 |             [0, 2],
32 |             [0.707, 1.707],
33 |             [1, 1],
34 |             [0.707, 0.293],
35 |             [0, 1]
36 |         ],
37 |         edges: [
38 |             [0, 1],
39 |             [1, 2],
40 |             [2, 3],
41 |             [3, 4],
42 |             [4, 5],
43 |             [5, 6],
44 |             [6, 7],
45 |             [7, 0],
46 |             [0, 8],
47 |             [1, 8],
48 |             [2, 8],
49 |             [3, 8],
50 |             [4, 8],
51 |             [5, 8],
52 |             [6, 8],
53 |             [7, 8]
54 |         ]
55 |     },
56 |     rojas: {
57 |         points: [
58 |             [0, 0],
59 |             [-.8, .4],
60 |             [-.1, 1],
61 |             [.7, 1.2],
62 |             [1.6, .4],
63 |             [2, .95],
64 |             [2.3, 0],
65 |             [2.7, .4],
66 |             [3, 0]
67 |         ],
68 |         edges: [
69 |             [0, 1],
70 |             [0, 2],
71 |             [0, 4],
72 |             [1, 2],
73 |             [2, 3],
74 |             [2, 4],
75 |             [3, 4],
76 |             [3, 5],
77 |             [4, 5],
78 |             [4, 6],
79 |             [4, 7],
80 |             [5, 7],
81 |             [6, 7],
82 |             [6, 8],
83 |             [7, 8],
84 |         ]
85 |     }
86 | };
87 | export default definitions;
88 | 


--------------------------------------------------------------------------------
/src/js/simulator/walkSimulator.js:
--------------------------------------------------------------------------------
  1 | import {World, Vec2, Edge} from 'planck-js';
  2 | import Creature from './creature.js';
  3 | 
  4 | const nrGrounds = 5;
  5 | const groundsDistance = 2.5;
  6 | const simulationTime = 60; // seconds
  7 | let finished = false;
  8 | 
  9 | const simFreq = 1 / 60;
 10 | let simulationIterations = 2;
 11 | let simulationTimeout = null;
 12 | let renderInterval = null;
 13 | 
 14 | let simulation = null;
 15 | let promiseResolve = null;
 16 | 
 17 | 
 18 | const canvas = document.getElementById('mainCanvas');
 19 | const ctx = canvas.getContext('2d');
 20 | 
 21 | ctx.renderText = function(text, size, x, y) {
 22 |     this.save();
 23 |     this.font = size + 'px sans-serif';
 24 |     this.transform(1 / this.camera.zoom, 0, 0, -1 / this.camera.zoom, x, y);
 25 |     this.fillText(text, 0, 0);
 26 |     this.restore();
 27 | };
 28 | 
 29 | /**
 30 |  * @returns {Promise.<number[][]>}
 31 |  */
 32 | export function simulate(creatureType, population) {
 33 |     finished = false;
 34 |     simulation = new Simulation(creatureType, population);
 35 | 
 36 | 
 37 |     startSimulation();
 38 |     startRendering();
 39 | 
 40 |     return new Promise(resolve => promiseResolve = resolve);
 41 | }
 42 | 
 43 | export function setSimulationIterations(nr) {
 44 |     simulationIterations = nr;
 45 | }
 46 | 
 47 | export function setCameraX(x) {
 48 |     simulation.camera.pos.x = x;
 49 | }
 50 | 
 51 | function startSimulation() {
 52 |     for (let i = 0; i < simulationIterations; i++) {
 53 |         simulation.update();
 54 |     }
 55 | 
 56 |     if (simulation.isFinished()) {
 57 |         finishSimulation();
 58 |     } else {
 59 |         let timeout = 1000 * simFreq;
 60 |         if (simulationIterations > 15) {
 61 |             timeout = 1; // to not have 1/60 timeout when trying to speed up very fast
 62 |         }
 63 | 
 64 |         simulationTimeout = setTimeout(startSimulation, timeout);
 65 |     }
 66 | }
 67 | 
 68 | function startRendering() {
 69 |     renderInterval = setInterval(() => {
 70 |         simulation.render();
 71 |     }, 1000 * simFreq);
 72 | }
 73 | 
 74 | function finishSimulation() {
 75 |     endSimulation();
 76 | 
 77 |     const result = simulation.creatures.map(c => c.distances);
 78 | 
 79 |     promiseResolve(result);
 80 | }
 81 | export function endSimulation() {
 82 |     clearTimeout(simulationTimeout);
 83 |     clearInterval(renderInterval);
 84 | 
 85 |     if (simulation) {
 86 |         simulation.timeout = simulationTime + 1;
 87 |     }
 88 | 
 89 | }
 90 | 
 91 | 
 92 | class Simulation {
 93 | 
 94 |     constructor(creatureType, phenotypes) {
 95 |         this.camera = {
 96 |             pos: Vec2(5, 5.5),
 97 |             zoom: 45,
 98 |         };
 99 |         ctx.camera = this.camera;
100 | 
101 |         this.world = new World(Vec2(0, -10));
102 |         this.createGround();
103 | 
104 | 
105 |         this.creatures = phenotypes.map((individual, i) => {
106 |             const offsett = (i % nrGrounds) * groundsDistance;
107 |             return new Creature(creatureType, individual.genes, this.world, getRandomColor(), offsett, individual.name);
108 |         });
109 |         this.timePassed = 0;
110 | 
111 |     }
112 | 
113 | 
114 |     update() {
115 |         this.timePassed += simFreq;
116 | 
117 |         if (this.isFinished()) {
118 |             return;
119 |         }
120 | 
121 |         this.creatures.forEach(c => c.update(this.timePassed));
122 |         this.world.step(simFreq);
123 |     }
124 | 
125 |     isFinished() {
126 |         return this.timePassed >= simulationTime;
127 |     }
128 | 
129 |     render() {
130 |         const camera = this.camera;
131 |         ctx.clearRect(0, 0, canvas.width, canvas.height);
132 |         ctx.fillText(this.timePassed.toFixed(1), 10, 10);
133 | 
134 |         ctx.save();
135 | 
136 |         ctx.translate(canvas.width / 2 - (camera.pos.x * camera.zoom),
137 |             canvas.height / 2 + (camera.pos.y * camera.zoom));
138 |         ctx.scale(camera.zoom, -camera.zoom);
139 | 
140 |         this.renderGrid();
141 |         this.renderGrounds();
142 |         this.renderMaxLine();
143 | 
144 |         this.creatures.forEach(c => c.render(ctx));
145 | 
146 | 
147 |         ctx.restore();
148 |     }
149 | 
150 |     renderGrounds() {
151 |         for (let i = 0; i < nrGrounds; i++) {
152 |             ctx.beginPath();
153 |             ctx.lineWidth = .01;
154 | 
155 |             ctx.moveTo(-40, i * groundsDistance);
156 |             ctx.lineTo(100, i * groundsDistance);
157 |             ctx.stroke();
158 |         }
159 |     }
160 | 
161 |     renderGrid() {
162 | 
163 |         for (let i = -40; i <= 100; i += 5) {
164 | 
165 |             ctx.beginPath();
166 |             ctx.lineWidth = .008;
167 |             if (i == 0) {
168 |                 ctx.lineWidth = 0.05;
169 |             }
170 |             ctx.moveTo(i, -5);
171 |             ctx.lineTo(i, 17);
172 |             ctx.stroke();
173 |         }
174 | 
175 | 
176 |     }
177 | 
178 |     renderMaxLine() {
179 |         var max = 0;
180 |         var currMax = 0;
181 |         this.creatures.forEach(c => {
182 |             const x = c.maxDst;
183 |             const currX = c.findDst();
184 |             if (x > max) {
185 |                 max = x;
186 |             }
187 | 
188 |             if (currX > currMax) {
189 |                 currMax = currX;
190 |             }
191 |         });
192 | 
193 |         if (max > this.camera.pos.x + 3) {
194 |             this.camera.pos.x = max - 3;
195 |         }
196 | 
197 |         ctx.save();
198 |         ctx.font = '0.3px serif';
199 |         ctx.scale(1, -1);
200 |         ctx.fillText("Best", max+0.1, 0.75);
201 |         ctx.fillText(max.toFixed(2), max+0.1, 1);
202 |         ctx.fillText("Current", currMax-1.2, 0.75);
203 |         ctx.fillText(currMax.toFixed(2), currMax-.8, 1);
204 | 
205 |         ctx.restore();
206 | 
207 |         ctx.beginPath();
208 |         ctx.lineWidth = .02;
209 |         ctx.moveTo(max, -5);
210 |         ctx.lineTo(max, 17);
211 |         ctx.stroke();
212 | 
213 |         ctx.beginPath();
214 |         ctx.lineWidth = .005;
215 |         ctx.moveTo(currMax, -5);
216 |         ctx.lineTo(currMax, 17);
217 |         ctx.stroke();
218 |     }
219 | 
220 | 
221 |     createGround() {
222 |         this.ground = this.world.createBody();
223 |         this.ground.createFixture(Edge(Vec2(-40.0, 0), Vec2(100.0, 0)),
224 |             {density: 0, friction: 1.5});
225 | 
226 |     }
227 | 
228 | }
229 | 
230 | function getRandomColor() {
231 |     return {
232 |         r: Math.floor(Math.random() * 255),
233 |         g: Math.floor(Math.random() * 255),
234 |         b: Math.floor(Math.random() * 255),
235 |     }
236 | }
237 | 


--------------------------------------------------------------------------------
/src/js/walkerEaRunner.js:
--------------------------------------------------------------------------------
 1 | import creatureDefinitions from './simulator/creatureDefinitions.js';
 2 | import {simulate} from './simulator/walkSimulator.js';
 3 | import {runEa} from './ea.js';
 4 | 
 5 | /**
 6 |  * @typedef {Object} Individual
 7 |  * @property {number[]} genes
 8 |  * @property {number} fitness
 9 |  */
10 | 
11 | export default function evolveWalkers(options) {
12 |     const mutationRate = options.mutationRate;
13 |     const creatureType = options.creatureType;
14 |     const populationSize = options.populationSize;
15 |     const crossoverRate = options.crossoverRate;
16 | 
17 |     const numberOfGenes = creatureDefinitions[creatureType].edges.length;
18 | 
19 |     /**
20 |      * @returns {Individual[]}
21 |      */
22 |     function generatePopulationFunction() {
23 |         const population = [];
24 | 
25 |         population.push({
26 |             genes: new Array(numberOfGenes).fill(0.1),
27 |             fitness: 0
28 |         });
29 | 
30 |         return population;
31 |     }
32 | 
33 |     /**
34 |      * @param population {Individual[]}
35 |      */
36 |     async function fitnessFunction(population) {
37 |         const results = await simulate(creatureType, population);
38 | 
39 |         // results[i] belongs to population[i]
40 |     }
41 | 
42 |     /**
43 |      * @param population {Individual[]}
44 |      * @returns {Individual[]}
45 |      */
46 |     function parentSelectionFunction(population) {
47 |         return population;
48 |     }
49 | 
50 |     /**
51 |      * @param oldPopulation {Individual[]}
52 |      * @param children {Individual[]}
53 |      * @returns {Individual[]}
54 |      */
55 |     function adultSelectionFunction(oldPopulation, children) {
56 |         return children;
57 |     }
58 | 
59 |     /**
60 |      * @param individual {Individual}
61 |      */
62 |     function mutateFunction(individual) {
63 |     }
64 | 
65 |     /**
66 |      *
67 |      * @param parent1 {Individual}
68 |      * @param parent2 {Individual}
69 |      */
70 |     function crossoverFunction(parent1, parent2) {
71 |     }
72 | 
73 |     runEa({
74 |         generatePopulation: generatePopulationFunction,
75 |         fitness: fitnessFunction,
76 |         adultSelection: adultSelectionFunction,
77 |         parentSelection: parentSelectionFunction,
78 |         mutate: mutateFunction,
79 |         crossover: crossoverFunction
80 |     });
81 | }
82 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | 
 4 | var config = {
 5 |     context: __dirname + '/src',
 6 |     entry: {
 7 |         app: './js/main.js'
 8 |     },
 9 |     output: {
10 |         path: __dirname + '/dist',
11 |         filename: 'bundle.js'
12 |     },
13 |     devServer: {
14 |         open: false,
15 |         contentBase: __dirname + '/src',
16 |         hot: false,
17 |         inline: false
18 |     },
19 | 
20 |     module: {
21 |         loaders: [
22 |             {
23 |                 test: /\.js$/,
24 |                 loader: 'babel-loader',
25 |                 query: {
26 |                     presets: ['es2015'],
27 |                     plugins: ["transform-async-to-generator"]
28 |                 }
29 |             }
30 |         ],
31 |         rules: [
32 |             {
33 |                 test: /\.css$/,
34 |                 use: ExtractTextPlugin.extract({
35 |                     use: 'css-loader'
36 |                 })
37 |             }
38 |         ]
39 |     },
40 | 
41 |     stats: {
42 |         colors: true
43 |     },
44 | 
45 |     devtool: "source-map",
46 | 
47 |     plugins: [
48 |         new ExtractTextPlugin('styles.css'),
49 |     ]
50 | };
51 | 
52 | module.exports = config;


--------------------------------------------------------------------------------