See life

A flocking sketch using with p5.js and dat.GUI libraries Inspired by this flocking tutorial: http://www.flight404.com/blog/?p=459 http://libcinder.org/docs/dev/flocking_chapter1.html

by Javier Graciá Carpio

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<div class="sketch" id="sketch">
    <div id="sketch-gui"></div>
</div>

CSS

.sketch {
    display: table;
    position: relative;
}
#sketch-gui {
    position: absolute;
    right: 0;
}

JavaScript

var sketchContainer = "sketch";
var guiContainer = "sketch-gui";

var sketch = function (p) {
    // Global variables
    var fishes = [];
    var jellys = [];
    var whales = [];
    var hammers = [];
    var repulsionDist = 30;
    var alignDist = 50;
    var attractionDist = 150;
    var huntDist = 200;
    var limitDist = 300;
    var maxVel = 5;
    var repulsionDistSq = p.sq(repulsionDist);
    var alignDistSq = p.sq(alignDist);
    var attractionDistSq = p.sq(attractionDist);
    var huntDistSq = p.sq(huntDist);
    var limitDistSq = p.sq(limitDist);
    var maxVelSq = p.sq(maxVel);
    var paintLines = false;
    var paintLimits = false;
    var paintDetails = true;
    var bgImg;

    // Initial setup
    p.setup = function () {
        // Create the canvas
        var canvas = p.createCanvas(850, 750);

        // Create the water-like image to be used as the background
        bgImg = createWaterImage(p.width, p.height);

        // Create all the species
        createFishes(300);
        createJellys(100);
        createWhales(1);
        createHammers(3);

        // Add the GUI
        createGUI();
    };

    // Execute the sketch
    p.draw = function () {
        var i, fish, jelly, whale, hammer;

        // Paint the water-like image
        p.background(bgImg);

        // Fishes
        for (i = 0; i < fishes.length; i++) {
            fish = fishes[i];

            // Update the fish properties
            fish.evaluateInteractions(fishes, true, true, true, false, false);
            fish.evaluateInteractions(whales, false, false, false, true, false);
            fish.evaluateInteractions(hammers, false, false, false, true, false);
            fish.keepClose();
            fish.update();

            // Paint the fish
            if (paintDetails) {
                fish.paintDetail();
            } else {
                fish.paint();
            }

            // Paint the limits if necessary
            if (paintLimits && i === 0) {
    ...