Skip to content

Commit e50f27a

Browse files
Courssumm02Courssumm02
Courssumm02
authored and
Courssumm02
committed
m5 v1 done
1 parent 759249d commit e50f27a

File tree

7 files changed

+621
-70
lines changed

7 files changed

+621
-70
lines changed

‎Module 5 v2/app.js

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
function main(){
2+
3+
const N_CLONES = 3000
4+
const a1_prob = 0.2
5+
const a2_prob = 1 - a1_prob
6+
const N_GEN = 500
7+
const D = 1
8+
const gridx = Math.round(Math.sqrt(N_CLONES)) * Math.round(Math.sqrt(N_CLONES))==N_CLONES?Math.round(Math.sqrt(N_CLONES)) : Math.round(Math.sqrt(N_CLONES))+1
9+
const gridy = Math.round(Math.sqrt(N_CLONES)) * Math.round(Math.sqrt(N_CLONES))==N_CLONES?Math.round(Math.sqrt(N_CLONES)) : Math.round(Math.sqrt(N_CLONES))+1
10+
11+
var grid = [...Array(gridx*gridy).keys()]
12+
13+
let count = 0
14+
for (let i = 0; i < gridx; i++){
15+
for (let j = 0; j < gridy; j++){
16+
grid[count] = {x: i, y: j}
17+
count++
18+
}
19+
}
20+
21+
for (let i = 0; i < N_CLONES; i++){
22+
if (Math.random() < a1_prob){
23+
grid[i].v1 = 1
24+
if (Math.random() < a1_prob){
25+
grid[i].v2 = 1
26+
}else{
27+
grid[i].v2 = 2
28+
}
29+
}else{
30+
grid[i].v1 = 2
31+
if (Math.random() < a1_prob){
32+
grid[i].v2 = 1
33+
}else{
34+
grid[i].v2 = 2
35+
}
36+
}
37+
}
38+
39+
//INIT Done
40+
41+
function getRandomInt(min, max) {
42+
min = Math.ceil(min);
43+
max = Math.floor(max);
44+
return Math.floor(Math.random() * (max - min + 1)) + min;
45+
}
46+
47+
function move(x,y){
48+
return [x + getRandomInt(-D,D), y + getRandomInt(-D,D)]
49+
}
50+
51+
52+
var a1a1 = grid.filter((el)=>{
53+
return el.v1 == 1 && el.v2 == 1
54+
})
55+
var a1a2 = grid.filter((el)=>{
56+
return (el.v1 == 1 && el.v2 == 2) || (el.v1 == 2 && el.v2 == 1)
57+
})
58+
var a2a2 = grid.filter((el)=>{
59+
return el.v1 == 2 && el.v2 == 2
60+
})
61+
draw_grid(new Array(gridx).fill(new Array(gridy)))
62+
63+
var a1a1_data = []
64+
var a1a2_data = []
65+
var a2a2_data = []
66+
var g;
67+
68+
for (let i = 0; i < N_GEN; i++){
69+
setTimeout(()=>{
70+
71+
var visual = []
72+
g = grid.map((item)=>{
73+
const [x,y]=move(item.x, item.y)
74+
item.x = x
75+
item.y = y
76+
return item
77+
})
78+
var new_grid = []
79+
for (let j = 0; j < N_CLONES; j++){
80+
var {x,y,v1,v2}=g[j]
81+
var possible_mates = g.filter((el)=>{
82+
return Math.abs(el.x - x)<=D && Math.abs(el.y - y)<=D
83+
})
84+
var the_mate = possible_mates[Math.floor(Math.random() * possible_mates.length)];
85+
var combinations = [[v1,the_mate.v1],[v1, the_mate.v2],[v2,the_mate.v1],[v2,the_mate.v2]][Math.floor(Math.random() * [[v1,the_mate.v1],[v1, the_mate.v2],[v2,the_mate.v1],[v2,the_mate.v2]].length)];
86+
var offspring = {x:x,y:y,v1: combinations[0], v2: combinations[1]}
87+
new_grid.push(offspring)
88+
}
89+
grid = new_grid
90+
var a1a1 = g.filter((el)=>{
91+
return el.v1 == 1 && el.v2 == 1
92+
})
93+
var a1a2 = g.filter((el)=>{
94+
return (el.v1 == 1 && el.v2 == 2) || (el.v1 == 2 && el.v2 == 1)
95+
})
96+
var a2a2 = g.filter((el)=>{
97+
return el.v1 == 2 && el.v2 == 2
98+
})
99+
a1a1_data.push(a1a1.length)
100+
a1a2_data.push(a1a2.length)
101+
a2a2_data.push(a2a2.length)
102+
for (let i = 0; i < gridx; i++){
103+
var row = []
104+
for (let j = 0; j < gridy; j++){
105+
var el = g.filter((el)=>{
106+
return el.x == i && el.y == j
107+
})
108+
if (el[0]){
109+
el.forEach((n)=>{
110+
if (n.v1 == 1 && n.v2 == 1){
111+
row.push("A1A1")
112+
}
113+
if((n.v1 == 1 && n.v2 == 2) || (n.v1 == 2 && n.v2 == 1)){
114+
row.push("A1A2")
115+
}
116+
if (n.v1 == 2 && n.v2 == 2){
117+
row.push("A2A2")
118+
}
119+
})}
120+
121+
else{
122+
row.push("N1")
123+
}
124+
}
125+
visual.push(row)
126+
};
127+
128+
update_grid(visual)
129+
},20)
130+
}
131+
}
132+
main()
133+
// console.log(JSON.stringify(visual));
134+
// draw_grid(visual)
135+
136+
137+
// const ctx = document.getElementById('myChart').getContext('2d');
138+
139+
// const chart = new Chart(ctx, {
140+
// type: 'line',
141+
// data: {
142+
// labels: [...Array(N_GEN).keys()],
143+
// datasets: [{
144+
// label: 'Number of a1a1',
145+
// data: a1a1_data,
146+
// borderWidth: 1,
147+
// fill: false,
148+
// borderColor: 'red'
149+
// },
150+
// {
151+
// label: 'Number of a1a2',
152+
// data: a1a2_data,
153+
// borderWidth: 1,
154+
// fill: false,
155+
// borderColor: 'green'
156+
// },
157+
// {
158+
// label: 'Number of a2a2',
159+
// data: a2a2_data,
160+
// borderWidth: 1,
161+
// fill: false,
162+
// borderColor: 'blue'
163+
// },
164+
165+
// ]
166+
// },
167+
// options: {
168+
// scales: {
169+
// yAxes: [{
170+
// ticks: {
171+
// beginAtZero: true
172+
// }
173+
// }],
174+
// y: {
175+
// display: true,
176+
// type: 'logarithmic',
177+
// }
178+
// }
179+
// }
180+
// });
181+
182+
183+
184+
185+
186+
187+
188+
189+
190+
191+
192+
193+
194+
195+
196+
197+
198+
199+
200+
201+
202+
203+
204+
205+
206+
207+
208+
209+
210+
211+
212+
213+
214+
215+
216+
217+
218+
219+
220+
221+
222+
223+
224+
// var ctx = document.getElementById('myChart').getContext('2d');
225+
226+
227+
// var a1_data = {
228+
// label: "A1",
229+
// data: arr_a1,
230+
// lineTension: 0.5,
231+
// fill: false,
232+
// borderColor: 'red',
233+
// borderWidth: 0.8
234+
// }
235+
// var a2_data = {
236+
// label: "A2",
237+
// data: arr_a2,
238+
// lineTension: 0.5,
239+
// fill: false,
240+
// borderColor: 'blue',
241+
// borderWidth: 1.5
242+
// }
243+
244+
// const data = {
245+
// labels: [...Array(gen).keys()],
246+
// datasets: [a1_data, a2_data]
247+
// };
248+
249+
250+
// var myChart = new Chart(ctx, {
251+
// type: 'line',
252+
// data: data,
253+
// options: {
254+
// scales: {
255+
// y: {
256+
// beginAtZero: true
257+
// }
258+
// },
259+
// bezierCurve: true
260+
// }
261+
// });
262+
// myChart.update()
263+
// }

‎Module 5 v2/main.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'></script>
9+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
10+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
11+
<script src="https://d3js.org/d3.v7.min.js"></script>
12+
</head>
13+
<body class="container pt-5 pb-5">
14+
<main>
15+
<!-- <h1>Module 5</h1>
16+
<p class="fs-5 col-md-8">Here I implement a simulation genetic drift with natural selection.</p>
17+
<div class="col-md-6">
18+
<h2>Tech used projects</h2>
19+
<p>Here are some libraries used in this module</p>
20+
<ul class="icon-list">
21+
<li><a href="https://getbootstrap.com/">Bootstrap</a></li>
22+
<li><a href="https://www.chartjs.org/">Chart Js</a></li>
23+
</ul>
24+
</div>
25+
<div class="mb-5">
26+
<a href="https://github.com/techboy-coder/nature-in-code" class="btn btn-primary btn-lg px-4">Other examples made by me</a>
27+
</div> -->
28+
29+
<hr>
30+
31+
</main>
32+
<!-- <form action="" id="input">
33+
<label for="samples">Number of samples</label>
34+
<input type="number" name="samples" id="samples" placeholder="100" value="100">
35+
<label for="generations">Number of generations</label>
36+
<input type="number" name="generations" id="generations" placeholder="100" value="100">
37+
<label for="a1">Frequency of a1 (between 1 and 0; a2 = 1-a1) </label>
38+
<input type="number" name="a1" id="a1" placeholder="0.5" value="0.3" step="0.0001">
39+
</form> -->
40+
<!-- <button type="button" onclick="app();">Run Simulation</button> -->
41+
<script src="util.js"></script>
42+
COLORS: a1a1: white; a1a2: blue; a2a2: brown; empty: green
43+
<canvas id="myChart"></canvas>
44+
<script src="app.js"></script>
45+
</body>
46+
</html>

‎Module 5 v2/notes.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
- Individual can only mate with partner in distance d on a N x M Grid
2+
- Calculate Probs of Alleles variations
3+
- Repeat for g generations

0 commit comments

Comments
 (0)