canvas = { replay; // set variables let popsize = 300; var start = Date.now(); let timer = null; var freq_R = []; var freq_P = []; var freq_S = []; var time = []; const h = 250; // set population var population = d3.range(popsize).map(function (d, i) { //note 100 is population size (replaced ne slider with fixed value) //set initial frequency from ternary slider var random_seed = Math.random(); if (random_seed <= frequencies[0]) { var allele = "R"; } else if (random_seed >= 1 - frequencies[2]) { var allele = "S"; } else { var allele = "P"; } return { x: w * Math.random(), y: h * Math.random(), dx: (Math.random() - 0.5) * speed * 10, dy: (Math.random() - 0.5) * speed * 10, r: 5, status: allele, isColliding: false }; }); // create canvas var canvas = document.createElement("canvas"); canvas.width = w + 10; canvas.height = h + 10; var context = canvas.getContext("2d"); // function that draws a single node in a population function drawNode(d) { context.beginPath(); if (d.status == "R") { context.fillStyle = "#F89540"; } else if (d.status == "P") { context.fillStyle = "#31688E"; } else if (d.status == "S") { context.fillStyle = "#FDE725"; } context.arc(d.x, d.y, d.r, 0, d.r * Math.PI); context.fill(); } // function that updates the location of each node function updateNode(d) { d.x += d.dx; if (d.x > w) { d.x = w; d.dx = -d.dx; } // right else if (d.x < 0) { d.x = 0; d.dx = -d.dx; } // left d.y += d.dy; if (d.y > h) { d.dy = -d.dy; d.y = h; } // bottom else if (d.y < 0) { d.dy = -d.dy; d.y = 0; } // top drawNode(d); } // function that calculates the frequency function updatePlot() { var count_R = 0; var count_P = 0; var count_S = 0; for (var g = 0; g < population.length; g++) { if (population[g].status == "R") { count_R = count_R + 1; } else if (population[g].status == "P") { count_P = count_P + 1; } else { count_S = count_S + 1; } } freq_R.push(count_R / population.length.toFixed(2)); freq_P.push(count_P / population.length).toFixed(2); freq_S.push(count_S / population.length).toFixed(2); time.push(time.length); viewof plot.value = [time, freq_R, freq_P, freq_S]; } // function to detect collision between two nodes function detectCollision(n1, n2, isfirst) { // Calculate the distance between the two circles let squareDistance = (n1.x - n2.x) * (n1.x - n2.x) + (n1.y - n2.y) * (n1.y - n2.y); //when colliding if (squareDistance <= 2 * n1.r * (2 * n2.r)) { if (isfirst) { n2.x = w * Math.random(); n2.y = w * Math.random(); } if (n1.isColliding == false || n2.isColliding == false) { n1.isColliding = true; n2.isColliding = true; n1.dx = -1 * n1.dx; n1.dy = -1 * n1.dy; n2.dx = -1 * n2.dx; n2.dy = -1 * n2.dy; } } //CHANGES //Interaction of R and P individual if ( n1.status == "R" && n2.status == "P" && Math.random() < rate_C / popsize ) { n1.status = "P"; n2.status = "P"; } else if ( n1.status == "P" && n2.status == "R" && Math.random() < rate_C / popsize ) { n1.status = "P"; n2.status = "P"; } //Interaction of R and S individual else if ( n1.status == "R" && n2.status == "S" && Math.random() < rate_C / popsize ) { n1.status = "R"; n2.status = "R"; } else if ( n1.status == "S" && n2.status == "R" && Math.random() < rate_C / popsize ) { n1.status = "R"; n2.status = "R"; } //Interaction of S and P individual else if ( n1.status == "S" && n2.status == "P" && Math.random() < rate_C / popsize ) { n1.status = "S"; n2.status = "S"; } else if ( n1.status == "P" && n2.status == "S" && Math.random() < rate_C / popsize ) { n1.status = "S"; n2.status = "S"; } else { n1.isColliding = false; n2.isColliding = false; } } for (var g = 0; g < population.length; g++) { for (var j = g + 1; j < population.length; j++) { detectCollision(population[g], population[j], true); } } timer = d3.timer(ticked); function ticked() { var now = Date.now(), duration = now - start; //if(duration % 500 ==0){ updatePlot(); //} // Update the circle positions. context.clearRect(0, 0, w + 10, h + 10); context.save(); // check collisions for (var g = 0; g < population.length; g++) { for (var j = g + 1; j < population.length; j++) { detectCollision(population[g], population[j], false); } } population.forEach(function (d) { updateNode(d); }); context.restore(); } return canvas; }