html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Reproduction of hermaphrodites</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div id="individuals">
<div class="individual" id="generation_p">
<div class="neck"></div>
<div class="tshirt" onclick="randomize_p()">
<div class="sleeve sleeve_right">
<div class="arm">
<div class="hand righthand"></div>
</div>
</div>
<div class="sleeve sleeve_left">
<div class="arm">
<div class="hand lefthand"></div>
</div>
</div>
<div class="trousers">
<div class="shoe">
<div class="shoe_bottom shoe_bottom_right"></div>
</div>
</div>
<div class="trousers trousers_left">
<div class="shoe">
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
margin:0;
background-image:linear-gradient(45deg, #5a5 0%, #afa 100%);
width:100vw;
height:100vh;
font-family:arial;
}
div {
position:absolute;
}
#individuals {
height:100%;
}
.individual {
left:50%;
transform:translateX(-50%);
bottom:7.5%;
}
.face {
width:30%;
height:30%;
left:50%;
transform:translateX(-50%);
border-radius:50%;
bottom:105%;
}
.eye {
border-radius:50%;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const window_size = [window.innerWidth, window.innerHeight];
const square_size = Math.min(window_size[1]*0.47, window_size[0]*0.87-7.1);
$(function() {
$(".individual").width(square_size);
$(".individual").height(square_size);
$(".genotype").width(window_size[0]*0.96);
$(".genotype").css("top", window_size[1]*0.45+square_size*0.5+"px");
$(".genotype").css("display", "none");
$("#generation_p").css("left", window_size[0]/2+"px");
$("#next_generation").css({"width": square_size*0.1+"px", "height": square_size*0.1+"px", "left": window_size[0]*0.88+"px"});
$("#next_generation div").css("border-right-width", window_size[0]*0.04+"px");
});
var include_disease;
var show_ears;
var genotype_html = "Genotype of generation {GEN}:<br>";
function start() {
let same_probability_for_every_allele = propability_input.checked;
include_disease = disease_input.checked;
if(disease_dominant_input.checked)
possible_alleles[0][3] = [0, 1];
show_ears = ears_input.checked;
if(!show_ears)
$(".ear").css("display", "none");
for(let trait=0, len=possible_alleles.length; trait<len; trait++) {
if(trait==0 && !include_disease)
continue;
let l = possible_alleles[trait][3].length;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run