hexbg/halfhex.html at master · jongala/hexbg · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<html>
<head>
    <meta charset="utf-8"/>
    <title>Halfhex</title>
    <style type="text/css">
        body {
            font-family: sans-serif;
        }
        #example,
        #example canvas {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        #example {}

        .controls {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            padding:0.5em;
            font-size: 13px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="example"></div>
    <div class="controls">
    </div>
    <script src="js/hexbg.js"></script>
    <script src="3p/DAT.GUI.min.js"></script>
    <script type="text/javascript">
        function objToArray(obj) {
            var arr = [];
            for (key in obj) {
                if (obj.hasOwnProperty(key)) {
                    arr.push(obj[key]);
                }
            }
            return arr;
        }

        function arrayToObj(arr) {
            var obj = {};
            arr.forEach(function(val, i){
                obj[i] = val;
            });
            return obj;
        }

        // Default Palette
        DEFAULT_PALETTE = ["#ff0099", "#3399cc", "#774aa4", "#ffcc00"];

       // GUI controlled colors
        visPalette = arrayToObj(DEFAULT_PALETTE);

        // GUI controlled opts
        var visualOpts = {
            renderer: 'svg',
            scale: 48,
            minFill: 0.1,
            maxFill: 0.4,
            bgOpacity: 1,
            fgOpacity: 0.5,
        };
        var o = visualOpts;


        var exampleNode = document.getElementById('example');

        function renderOpts(opts) {
            halfhex(exampleNode, opts);
        }

        // shorthand
        var r = function(){
            visualOpts.palette = objToArray(visPalette);
            renderOpts(visualOpts);
        };

        function loadOpts(opts) {
            visualOpts = extend(visualOpts, opts);
            renderOpts(visualOpts);

            // Update the visual controls
            gui.__controllers.forEach(function(c){c.updateDisplay()});
            var folders = gui.__folders;
            for (key in folders) {
                if (folders.hasOwnProperty(key)) {
                    folders[key].__controllers.forEach(function(c){c.updateDisplay()});
                }
            }
        }

        function paletteToControls(palette, folder) {
            for (c in palette) {
                if (palette.hasOwnProperty(c)) {
                    folder.addColor(palette, c)
                        .onChange(r);
                }
            }
            return folder;
        }

        // convenient way to expose a redraw button
        var util = {redraw: r}
        var gui;

        window.addEventListener('load', function(e){
            gui = new dat.GUI();

            gui.add(o, 'renderer').options('canvas', 'svg')
                .onChange(r);
            //gui.add(o, 'clear').onChange(r);

            var core = gui.addFolder('Basics');
            core.open();
            core.add(o, 'scale').min(16).max(256).step(1)
                .onChange(r);
            core.add(o, 'minFill').min(0).max(1).step(0.1)
                .onChange(r);
            core.add(o, 'maxFill').min(0).max(1).step(0.1)
                .onChange(r);

            var polys = gui.addFolder('Polys');
            polys.open();
            polys.add(o, 'bgOpacity').min(0).max(1).step(0.1)
                .onChange(r);
            polys.add(o, 'fgOpacity').min(0).max(1).step(0.1)
                .onChange(r);

            paletteToControls(visPalette, polys);

            gui.add(util, 'redraw').name('Redraw →');

            gui.open(); // resizes the controls

            r(); // draws initial values
        });

    </script>
</body>
</html>