graphs/index.html at main · znah/graphs · 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Growing graphs</title>
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://znah.net/graphs/">
    <meta property="og:title" content="Growing Graphs">
    <meta property="og:description" content="Experimental simulation of emergent complexity through graph-rewriting automata.">
    <meta property="og:image" content="https://znah.net/graphs/preview.jpg">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://znah.net/graphs/">
    <meta property="twitter:title" content="Growing Graphs">
    <meta property="twitter:description" content="Experimental simulation of emergent complexity through graph-rewriting automata.">
    <meta property="twitter:image" content="https://znah.net/graphs/preview.jpg">
    <script src="js/graph.js"></script>
    <script src="js/force.js"></script>
    <script src="lib/swissgl.js"></script>
    <script src="js/bloom.js"></script>
    <script src="js/app.js"></script>
    <script src="lib/dat.gui.min.js"></script>
    <style>
        body { margin: 0; background: #000; overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
        canvas { display: block; width: 100vw; height: 100vh;}

        #info-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 450px;
            background: rgba(30, 30, 30, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 30px;
            color: #fff;
            z-index: 1000;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }

        #info-popup h1 { margin: 0 0 15px; font-size: 24px; font-weight: 600; background: linear-gradient(135deg, #fff 0%, #aaa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        #info-popup p { margin: 0 0 20px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); font-size: 15px; }
        #info-popup .author { font-size: 14px; color: rgba(255, 255, 255, 0.5); margin-bottom: 25px; }
        #info-popup a { color: #5dade2; text-decoration: none; border-bottom: 1px solid rgba(93, 173, 226, 0.3); transition: all 0.2s; }
        #info-popup a:hover { border-bottom-color: #5dade2; color: #fff; }

        #info-popup button {
            background: #fff;
            color: #000;
            border: none;
            padding: 12px 25px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            width: 100%;
            font-size: 15px;
        }

        #info-popup button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2); }
        #info-popup button:active { transform: translateY(0); }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 999;
            opacity: 0;
            animation: fadeInOverlay 0.6s forwards;
        }

        @keyframes fadeInOverlay { to { opacity: 1; } }
    </style>
</head>
<body>
    <div id="overlay" class="overlay"></div>
    <div id="info-popup">
        <h1>Growing Graphs</h1>
        <p>
            An experimental simulation of emergent complexity, inspired by Paul Cousin's work on
            <a href="https://paulcousin.net/graph-rewriting-automata/introduction.html" target="_blank">Graph-Rewriting Automata</a>.
        </p>
        <div class="author">
            By <a href="https://znah.net" target="_blank">Alex Mordvintsev</a> &bull;
            <a href="https://github.com/znah/graphs" target="_blank">GitHub</a> &bull;
            <a href="alice.html">Autonomous Demo</a>
        </div>
        <button onclick="dismissPopup()">Explore</button>
    </div>

    <canvas></canvas>
    <div id="status" style="position: absolute; bottom: 10px; left: 10px; color: white; font-family: monospace; z-index: 100;">status</div>
    <script>
        "use strict";
        function dismissPopup() {
            document.getElementById('info-popup').style.display = 'none';
            document.getElementById('overlay').style.display = 'none';
        }
        const canvas = document.querySelector('canvas');
        const app = new App(canvas);
        app.init();

        if (window.location.hash.slice(1)) {
            dismissPopup();
        }
    </script>
</body>
</html>