Trying Again

Courssumm02 · Courssumm02 · commit 2bb0249a6a42 · 2021-07-13T16:07:14.000+02:00
diff --git a/Module 3/app.js b/Module 3/app.js
@@ -1,13 +1,86 @@
-const BASES = ["A","T","G","C"]
-const DNA_LEN = 100
-const duplications = 100
-function rand_base(){
-    return BASES[Math.floor(Math.random() * BASES.length)]
-}
-var dna = new Array(DNA_LEN).fill(0).map(()=>{return rand_base()})
-const original_dna = dna
-
-for (let i = 0; i < 10; i++){
-    console.log(i);
-    // From here on!!
+function app(){
+
+    const BASES = ["A","T","G","C"]
+    const DNA_LEN = parseInt(document.getElementById("len").value)
+    const generations = parseInt(document.getElementById("generations").value)
+    const num_clones = parseInt(document.getElementById("clones").value)
+    const mutation_rate = parseFloat(document.getElementById("mutations").value)
+    function rand_base(){
+        return BASES[Math.floor(Math.random() * BASES.length)]
+    }
+
+    Array.prototype.contains = function(v) {
+        for (var i = 0; i < this.length; i++) {
+            if (this[i] === v) return true;
+        }
+        return false;
+    };
+    
+    Array.prototype.unique = function() {
+    var arr = [];
+    for (var i = 0; i < this.length; i++) {
+        if (!arr.contains(this[i])) {
+            arr.push(this[i]);
+        }
+    }
+    return arr;
+    }
+
+    function num_Unique(array){
+        var u = array.map(JSON.stringify)
+        return u.unique().length
+    }
+
+    var dna = new Array(DNA_LEN).fill(0).map(()=>{return rand_base()})
+    const original_dna = dna
+
+    const clones = new Array(num_clones).fill(original_dna)
+
+    var unique_dna = []
+
+    for (let i = 0; i < generations; i++){
+        for (let j = 0; j < clones.length; j++){
+            clones[j]=clones[j].map((base)=>{
+                if (Math.random() < mutation_rate){
+                    return rand_base()
+                }
+                return base
+            })
+        }
+        unique_dna.push(num_Unique(clones))
+    }
+
+
+    var ctx = document.getElementById('myChart').getContext('2d');
+
+
+    var unique_dna_data = {
+        label: "Total Unique DNA's",
+        data: unique_dna,
+        lineTension: 0.5,
+        fill: false,
+        borderColor: 'red',
+        borderWidth: 1.5
+    }
+
+
+    const data = {
+        labels: [...Array(generations).keys()],
+        datasets: [unique_dna_data]
+    };
+
+
+    var myChart = new Chart(ctx, {
+        type: 'line',
+        data: data,
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            },
+            bezierCurve: true
+        }
+    });
+    myChart.update()
 }
diff --git a/Module 3/main.html b/Module 3/main.html
@@ -10,8 +10,19 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
     
 </head>
-<body class="container">
-
+<body class="container pt-4">
+  <form action="" id="input" class="pb-4">
+    <label for="len">DNA length</label>
+    <input type="number" name="len" id="len" placeholder="100" value="100">
+    <label for="generations">Number of generations</label>
+    <input type="number" name="generations" id="generations" placeholder="100" value="100">
+    <label for="clones">Number of clones</label>
+    <input type="number" name="clones" id="clones" placeholder="100" value="100">
+    <label for="mutations">mutations</label>
+    <input type="number" name="mutations" id="mutations" placeholder="100" value="0.001" step="0.000000001">
+</form>
+<button type="button" onclick="app();">Run Simulation</button>
+<canvas id="myChart"></canvas>
   <script src="app.js"></script>
 </body>
 </html>
