GL-Solar, Rainbow Road edition

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>GL-Solar (Squares demo)</title>
    <script src="https://teczno.com/squares/squares-d3-0.0.5.min.js" type="application/javascript"></script>
    <script src="gl-boilerplate.js" type="application/javascript"></script>
    <script src="tile-queue.js" type="application/javascript"></script>
    <script src="map.js" type="application/javascript"></script>
    <link rel="stylesheet" href="https://www.openstreetmap.us/~migurski/style.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="map"></div>

<p>
        <a href="https://mike.teczno.com">Michal Migurski</a>, Feb 2013.
    </p>
    
    <script id="shader-vertex" type="x-shader/x-vertex">
    
        const float pi = 3.14159265359;
        const mat4 view = mat4 (2.0/{CANVAS_WIDTH}, 0, 0, 0, 0, -2.0/{CANVAS_HEIGHT}, 0, 0, 0, 0, -0.0001, 0, -1, 1, 0, 1);
        uniform mat4 panzoom;
        uniform float frame;

attribute vec3 xyz;
        attribute vec4 rgba;
        attribute float seg;
        varying float bounce;
        varying vec4 color;
        varying mat4 bloop;
        varying vec4 pos;

void main()
        {
            pos = view * panzoom * vec4(xyz, 1);
            bounce = log(xyz.z + 1.) * atan(frame/5000.) * .002;

bloop = mat4(1, 0, 0, 0,
                         0, 1, 0, 0,
                         0, 0, 1, 0,
                         sin(pos.x * 5.0) * sin(frame / 10.) * bounce,
                         sin(pos.y * 9.6) * cos(frame / 10.) * bounce,
                         0, 1);
            
            gl_Position = bloop * pos;
            
            if(seg >= 0.) {
                color = vec4(.5 * cos(frame/4. - seg/2. + 0. * pi/3.) + .5,
                             .5 * cos(frame/4. - seg/2. + 2. * pi/3.) + .5,
                             .5 * cos(frame/4. - seg/2. + 4. * pi/3.) + .5,
                             rgba.a);
            
            } else {
                color = rgba;
            }
        }
    
    </script>
    
    <script id="shader-fragment" type="x-shader/x-fragment">
        
        precision mediump float;
        
        const vec3 bg = vec3(0, 0, 0); // vec3(0.992, 0.965, 0.890);
        varying vec4 color;
        
        void main()
        {
            // instead of using the full RGBA, do a linear mix with background color
            gl_FragColor = vec4(mix(bg.rgb, color.rgb, color.a), 1);
        }
    
    </script>
    
    <script type="application/javascript">
    <!--
    
        var ctx = get_webgl_context();
        
        var geo = new sq.Geo.Mercator();
        var map = new Map(document.getElementById('map'), geo, {lat: 37.73570, lon: -122.40806}, 16.5);
        
        //
        // Return a pair of functions to call from Map class in map.js, one to
        // push new data into xyz-rgba buffer and the other to trigger redraw.
        //
        function get_webgl_context(matrix)
        {
            var map = document.getElementById('map'),
                c = document.createElement('canvas');

c.width = map.clientWidth;
            c.height = map.clientHeight;
            c.style.position = 'absolute';
            map.insertBefore(c, null);

Modified http://teczno.com/squares/Squares-D3-0.0.5.min.js to a secure url

https://teczno.com/squares/Squares-D3-0.0.5.min.js