JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/brockCharts/API/LineChartPro.js"></script>
<canvas id="myCanvas" style='background-color: rgba(20,20,20,0.03)'></canvas>
<canvas id="preyLine" style='background-color: rgba(20,20,20,0.03)'></canvas>
<canvas id="predatorLine" style='background-color: rgba(20,20,20,0.03)'></canvas>
<div>Number of prey: <span id='prey_count'></span></div>
<div>Number of predators: <span id='predator_count'></span></div>
<div>Trials: <span id='counter'></span></div>
<div>Holder: <span id='holder'></span></div>

CSS

#predatorLine {
    position: absolute;
    right: -8px;
}

JavaScript

function doubleOrNone() {
    decider = Math.round(Math.random());
    if (decider === 1) {
        decider = 1.25;
    } else {
        decider = 0.8;
    }
}

number_prey = [25];
number_predator = [25];
number_prey_array = [];
number_predator_array = [];
counter = 0;
var myVar2 = setInterval(function () {
    prop_prey = number_prey[0] / (number_prey[0] + number_predator[0]);

    doubleOrNone();
    prey_reproduce = (0.37 - ((Math.log10(number_prey[0]) - 1) / 5)) * decider;

    doubleOrNone();
    predator_reproduce = (0.18 * (prop_prey) - (Math.log10(number_predator[0]) / 200)) * decider;
    attack_ceiling = 0.15 * number_predator[0];

    doubleOrNone();
    prey_death = decider * 0.10;
    doubleOrNone();
    predator_death = decider * 0.02;
    predator_attack = 0.2 * number_prey[0];

    if (predator_attack > attack_ceiling) {
        predator_attack = attack_ceiling;
    }

    number_prey.push(number_prey[0] + (prey_reproduce * number_prey[0]) - (prey_death * number_prey[0]) - predator_attack); // p_a is fine on its own.
    number_predator.push(number_predator[0] + (predator_reproduce * number_predator[0]) - (predator_death * number_predator[0]));
    number_prey.shift();
    number_predator.shift();
    number_prey_array[counter] = Math.round(number_prey[0]);
    number_predator_array[counter] = Math.round(number_predator[0]);
    if (counter > 1000) {
        number_prey_array.shift();
        number_predator_array.shift();
    }

    if (number_prey_array[counter] === 0 && number_predator_array[counter] === 0) {
        clearInterval(myVar2);
    }

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight * 0.6;

    context.beginPath();
    for (y = 0; y < number_prey[0]; y++) {
        placeX = Math.random() * canvas.width;
        placeY = Math.random() * canvas.height;
        context.rect(placeX, placeY, 2, 2);
    }
   ...