1d2d/index.html at master · usize/1d2d · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html style="background: #000000; color: white; font-size: 11px; font-family: Lucida Console, Monaco, monospace;">
    <head>
        <script src="1d2d.js"></script>
        <style>
            a {
                color: white;
            }
        </style>
    </head>
    <body>
            1D <a href="https://en.wikipedia.org/wiki/Rule_30">Rule 30</a>
            fed into
            2D <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Conway's Game of Life</a>
            as input.
            |
            <a href="https://github.com/usize/1d2d">code</a>,
            |
            change initial conditions by adding '#seed=xxxx' to the url.
        <canvas id="top-convas"></canvas>
        <canvas id="bottom-convas"></canvas>
    </body>
    <script>
        let width = window.screen.width - 25;
        let heightBottom = Math.floor(window.screen.height / 3);
        let heightTop = Math.floor((window.screen.height - heightBottom) - 150);

        let topCanvas = document.getElementById("top-convas");
        topCanvas.width = width;
        topCanvas.height = heightTop;
        let bottomCanvas = document.getElementById("bottom-convas");
        bottomCanvas.width = width;
        bottomCanvas.height = heightBottom;

        let topDrawer = new CellDrawer(topCanvas);
        let bottomDrawer = new CellDrawer(bottomCanvas);

        let seed = window.location.hash.split("=")[1] || 1243;
        let rule30 = new Rule30(seed, bottomDrawer.width, bottomDrawer.height);
        let life = new ConwaysGameOfLife(topDrawer.width, topDrawer.height);
        topDrawer.draw(life.read());

        setInterval(() => {
            bottomDrawer.draw(rule30.read());
            rule30.tick();
            life.insertRow(rule30.read()[0]);
            life.tick();
            topDrawer.draw(life.read());
        }, 10);
    </script>
</html>