From 4376164ab8b22bfba22826e4c9384e1f274768e9 Mon Sep 17 00:00:00 2001
From: jrtechs <jeffery@jrtechs.net>
Date: Sat, 23 Feb 2019 13:06:36 -0500
Subject: [PATCH] Created plotting graph for the genetic algorithm.

---
 geneticAlgorithm/geneticAlgo.html | 185 +++++++++++++++++++++++++++++-
 1 file changed, 182 insertions(+), 3 deletions(-)
diff --git a/geneticAlgorithm/geneticAlgo.html b/geneticAlgorithm/geneticAlgo.html
index a79839b..8d9c8d8 100644
--- a/geneticAlgorithm/geneticAlgo.html
+++ b/geneticAlgorithm/geneticAlgo.html
@@ -1,5 +1,14 @@
 <html>
 <head>
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
+      crossorigin="anonymous">
+    </script>
+
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
     <script>
         class Gene
         {
@@ -201,7 +210,7 @@
         };
 
 
-        const runGeneticOptimization = function(geneticChromosome, constFunction,
+        const runGeneticOptimization = function(geneticChromosome, costFunction,
                                                 populationSize, maxGenerations,
                                                 desiredCost, mutationRate, keepNumber,
                                                 newBloodNumber)
@@ -218,7 +227,7 @@
                 matePopulation(population, populationSize);
                 newBlood(population, newBloodNumber);
                 mutatePopulation(population, mutationRate);
-                let generationResult = naturalSelection(population, keepNumber, constFunction);
+                let generationResult = naturalSelection(population, keepNumber, costFunction);
 
                 if(bestCost > generationResult.bestFit)
                 {
@@ -235,19 +244,189 @@
             return bestChromosome;
         };
 
+
+
+
+        let genericChromosomeG, costFunctionG,
+                        populationSizeG, maxGenerationsG,
+                        desiredCostG, mutationRateG, keepNumberG,
+                        newBloodNumberG, populationG, generationG,
+                        bestCostG = Number.MAX_VALUE, bestChromosomeG = genericChromosomeG;
+        const runGeneticOptimizationforGraph = function()
+        {
+
+
+
+
+            let generationResult = naturalSelection(populationG, keepNumberG, costFunctionG);
+
+            if(bestCostG > generationResult.bestFit)
+            {
+                bestChromosomeG = generationResult.bestChrom;
+                bestCostG = generationResult.bestFit;
+            }
+            populationG = generationResult.survivors;
+
+            generationG++;
+
+
+            console.log("Generation " + generationG + " Best Cost: " + bestCostG);
+
+            console.log(generationResult);
+
+            matePopulation(populationG, populationSizeG);
+            newBlood(populationG, newBloodNumberG);
+            mutatePopulation(populationG, mutationRateG);
+
+            createGraph();
+
+        };
+
+        const createGraph = function()
+        {
+                        var dataPoints = [];
+
+            console.log(dataPoints);
+
+            var data = new google.visualization.DataTable();
+            data.addColumn('number', 'Gene 1');
+            data.addColumn('number', 'Gene 2');
+
+            for(let i = 0; i < populationG.length; i++)
+            {
+                data.addRow([populationG[i].getGenes()[0].getRealValue(),
+                        populationG[i].getGenes()[1].getRealValue()]);
+            }
+
+            var options = {
+              title: 'Genetic Evolution On Two Genes Generation: ' + generationG,
+              hAxis: {title: 'Gene 1', minValue: 0, maxValue: 10},
+              vAxis: {title: 'Gene 2', minValue: 0, maxValue: 10},
+            };
+
+            var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
+
+            chart.draw(data, options);
+        };
+
+
         let gene1 = new Gene(1,10,10);
         let gene2 = new Gene(1,10,0.4);
         let geneList = [gene1, gene2];
 
         let exampleOrganism = new Chromosome(geneList);
 
-        runGeneticOptimization(exampleOrganism, basicCostFunction, 100, 50, 0.01, 0.3, 20, 10);
+
+        genericChromosomeG = exampleOrganism;
+        costFunctionG = basicCostFunction;
+        populationSizeG = 100;
+        maxGenerationsG = 30;
+        desiredCostG = 0.00001;
+        mutationRateG = 0.3;
+        keepNumberG = 30;
+        newBloodNumberG = 10;
+        generationG = 0;
+
+
+        function resetPopulation()
+        {
+
+            autoRunning = false;
+            $("#runAutoOptimizer").val("Auto Run");
+
+            populationSizeG = $("#populationSize").val();
+            mutationRateG = $("#mutationRate").val();
+            keepNumberG = $("#survivalSize").val();
+            newBloodNumberG = $("#newBlood").val();
+            generationG = 0;
+
+            populationG = createRandomPopulation(genericChromosomeG, populationSizeG);
+            createGraph();
+        }
+
+        populationG = createRandomPopulation(genericChromosomeG, populationSizeG);
+
+
+        window.onload = function () {
+            google.charts.load('current', {'packages':['corechart']}).then(function()
+            {
+                createGraph();
+            })
+
+        };
+
+
+        let autoRunning = false;
+        function runAutoOptimizer()
+        {
+            if(autoRunning === true)
+            {
+                runGeneticOptimizationforGraph();
+                setTimeout(runAutoOptimizer, 1000);
+            }
+        }
+
+        function startStopAutoRun()
+        {
+            autoRunning = !autoRunning;
+
+            if(autoRunning)
+            {
+                $("#runAutoOptimizer").val("Stop Auto Run");
+            }
+            else
+            {
+                $("#runAutoOptimizer").val("Resume Auto Run");
+            }
+
+            runAutoOptimizer();
+        }
+
+
+
+        //runGeneticOptimization(exampleOrganism, basicCostFunction, 100, 50, 0.01, 0.3, 20, 10);
 
     </script>
+
 </head>
 
 
 <body>
+    <div id="chart_div" style="width: 900px; height: 500px;"></div>
+
+    <input class='btn btn-primary' id="runOptimizer" onclick='runGeneticOptimizationforGraph()' type="button" value="Next Generation">
+    <input class='btn btn-primary' id="runAutoOptimizer" onclick='startStopAutoRun()' type="button" value="Auto Run">
+
+    <div class="card">
+        <div class="card-header">
+            <h2>Population Variables</h2>
+        </div>
+        <div class="card-body">
+            <div class="row p-2">
+                <div class="col">
+                    <label for="populationSize">Population Size</label>
+                    <input type="text" class="form-control" id="populationSize" placeholder="Population Size" required>
+                </div>
+                <div class="col">
+                    <label for="populationSize">Survival Size</label>
+                    <input type="text" class="form-control" id="survivalSize" placeholder="Survival Size" required>
+                </div>
+            </div>
+            <div class="row p-2">
+                <div class="col">
+                    <label for="populationSize">Mutation Rate</label>
+                    <input type="text" class="form-control" id="mutationRate" placeholder="Mutation Rate" required>
+                </div>
+                <div class="col">
+                    <label for="populationSize">New Organisms Per Generation</label>
+                    <input type="text" class="form-control" id="newBlood" placeholder="New Organisms" required>
+                </div>
+            </div>
+            <br>
+            <input class='btn btn-primary' id="reset" onclick='resetPopulation()' type="button" value="Reset Population">
+        </div>
+    </div>
+
 </body>
 
 
