Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>GA Babies</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="population.js"></script>
    <script>
        var diameter = 960,
            format = d3.format(",d"),
            color = d3.scale.category20c();
​
        var bubble = d3.layout.pack()
            .sort(null)
            .size([diameter, diameter])
            .padding(1.5);
​
        $(document).ready(function () {
​
            var populous = new Population(256);
            var generationCount = 0;
​
            var svg = d3.select("body").append("svg");
​
            function drawPopulous() {
                var squareSide = 16;
​
                for (var j = 0; j < squareSide; j++) {
                    for (var i = 0; i < squareSide; i++) {
​
                        var circle = svg.attr("width", 1024)
                            .attr("height", 1024)
                            .append("circle")
                            .attr("cx", 30 * (1 + j))
                            .attr("cy", 30 * (1 + i))
                            .attr("r", 10)
                            .style("stroke", "lightgrey")
                            .style("fill", "white");
​
                        var k = i * (j + i);
​
                        if (k < populous.population.length) {
                            circle.append("svg:title").text(function (item) {
                                return populous.population[k].geneCode;
                            });
​
                            var utility = fitness(populous.population[k]);
                            var worst = populous.population[k].geneCode.length;
                            var shade = (255 * utility) / worst;
​
                            shade = shade.toFixed(0);
​
                            var colorvalue = "rgb(" + shade + "," + shade + "," + shade + ")";
​
                            circle.style("fill", colorvalue);
​
                            if (shade < 50) {
                                StopShizzling();
​
                                circle.style("stroke", "#00FF88");
                                circle.style("stroke-width", "4");
                            }
                        }
                    }
                }
            }
​
            var breedthem = function () {
                var genLeap = 100;
​
                for (var generation = 0; generation < genLeap; generation++) {
                    populous.Breed();
​
                    $("#gencount").text(generation);
                }
​
                generationCount += genLeap;
​
                $("#gencount").text(generationCount);
​
                // refresh populous grid
                svg.remove();
​
                svg = d3.select("body").append("svg");
​
                drawPopulous();
            }
​
            var intHandler = null;
​
            function StopShizzling() {
                $("#breedbutton").text("Breed My Preties!");
                clearInterval(intHandler);
                intHandler = null;
            }
​
            $("#breedbutton").click(function() {
                if (intHandler !== null) {
                    StopShizzling();
                }
                else {
                    populous.initialise();
                    intHandler = setInterval(breedthem, 8);
                    $("#breedbutton").text("STOP!! FOR THE LOVE OF GOD...");
                }
            });
            
            drawPopulous();
        });
    </script>
</head>
<body>
    <div style="padding: 24px;">
        <div>Fitness string:</div>
        <div><input type="text" id="fitness-name" value="JoBloggs"/>
            <button id="breedbutton">Breed My Pretties!</button>
​
        </div>
        <div style="padding: 24px;">
            Generation: <span id="gencount">0</span>
        </div>
        <div id="population">
​
        </div>
    </div>
</body>
</html>
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers