JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<script type="application/processing">
    float angle = 0.0;
    ArrayList peers = new ArrayList();
    ArrayList tmp = new ArrayList();
    ArrayList connections = new ArrayList();
    float rot = -1;
    Torrent testTorrent = new Torrent(30);
    int initialSeeders = 2;
    int initialPeers = 8;

    void setup() {
        size(450, 450);
        fill(256);
        fill(0);
        textAlign(CENTER);

        // establish initial seeds/peers
        // Modified to add seeds to random positions
        int seeds = 0;
        int peers = 0;
        for (int i = 0; i < initialSeeders + initialPeers; i++) {
            if (random(0, 1) > 0.8 && seeds < initialSeeders || peers == initialPeers) {
                seeds++;
                addSeeder();
            } else {
                peers++;
                addPeer();
            }
        }
        //for (int i = 0; i < initialPeers; i++) {
        //    addPeer();
        //}
    }

    ArrayList shuffle(ArrayList input) {
        ArrayList yin = new ArrayList();
        for (int i = 0; i < input.size(); i++) {
            yin.add(input.get(i));
        }

        ArrayList temp = new ArrayList();
        while (yin.size() > 0) {
            int x = int(random(0, yin.size()));
            temp.add(yin.get(x));
            yin.remove(x);
        }
        return (temp);
    }

    class Bit {
        int id;
        int bitHue;

        Bit(int i, int hu) {
            id = i;
            bitHue = hu;
        }
    }


    class Torrent {
        ArrayList bits = new ArrayList();

        Torrent(int totbits) {
            for (int i = 0; i < totbits; i++) {
                int ll = (255 / totbits) * i;
                Bit k = new Bit(i, ll);
                bits.add(k);
            }
        }
    }

    class Kibble {
        float starttime;
        float endtime;
        float big;

        Kibble() {
            starttime = 0;
            endtime = 0;
            big = (random(0, 4));
        }
    }

   ...

CSS

h1 {
    text-align: center;
}

JavaScript

var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
    if (scripts[i].type == "application/processing") {
        var src = scripts[i].src,
            canvas = scripts[i].nextSibling;
        if (src && src.indexOf("#")) {
            canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
        } else {
            while (canvas && canvas.nodeName.toUpperCase() != "CANVAS")
            canvas = canvas.nextSibling;
        }
        if (canvas) {
            new Processing(canvas, scripts[i].text);
        }
    }
}