Random tiles: CartoDB hates me

<!DOCTYPE html>
<html>
  <head>
    <title>Broken pieces | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
        background: black;
      }
      #map {
        zoom: 40%;
      }
    </style>
     <script type="cartocss/html" id="cartocss_template">
     #my_data {
        line-color: black; 
        line-width: 2;
        line-comp-op: screen;
        [color < 9] {
          line-width: 4;
          polygon-fill: purple;
          polygon-opacity: 0.3;
          [color < 7]{polygon-fill: #F21534; polygon-opacity: 0.3;}
          polygon-comp-op: screen;
        }
        [color  < 6] {
          line-color: #DB1721; 
          line-smooth: 3;
        }
        [color  < 4] {
          line-color: #7C1950; 
          line-smooth: 2;
        }
        [color <= 3]{
          line-dasharray: 4, 8;
          line-color: #13B5A8; 
        }
        [color  <= 1] {
          line-color: #7EBDA4; 
          line-smooth: 8;
        }
     }
    </script>
     <script type="cartocss/html" id="cartocss_template2">
     #my_data {
        [color > 8] {
          line-width: 4;
          polygon-fill: white;
          polygon-opacity: 0.2;
          polygon-comp-op: multiply;
        }
        [color = 8]{building-fill: yellow; building-fill-opacity: 0.3; building-height:1000 }
        [color  < 8] {
          line-color: white; 
          line-width: 1;
          line-comp-op: screen;
        }
        [color  < 6] {
          line-color: green; 
          line-smooth: 3;
        }
        [color  < 4] {
          line-color: purple; 
          line-opacity: 0.3;
          line-smooth: 2;
        }
        [color <= 3]{
          line-dasharray: 4, 8;
          line-color: magenta; 
        }
        [color  <= 1] {
          line-color: aqua; 
          line-smooth: 8;
        }
     }
    </script>
     <script type="cartocss/html" id="sql_template">
     WITH a AS (
        SELECT 
          ST_Extent(ST_SetSRID(!bbox!, 3857)) geom,
          random() r
      ),
      b AS (
          SELECT 
            geom,
            r,
            ST_XMin(geom) xmin, 
            ST_Ymin(geom) ymin,
            ST_XMax(geom) xmax, 
            ST_Ymax(geom) ymax,
            ST_X(ST_Centroid(geom)) xmid,
            ST_Y(ST_Centroid(geom)) ymid,
            ST_MaxDistance(geom, geom) d
          FROM a
        ),
      c AS (
        SELECT 
          ST_MakePoint(xmin + abs(d * sin((g / r))), ymin + abs(d * tan((g * r)))) geom,
          (r * 30)::int i
        FROM
          b, GENERATE_SERIES(1, 20) AS g
      )
     SELECT 
      ST_MakeLine(geom) the_geom_webmercator,
      (i/3)::int as color
      FROM c
      GROUP BY (i/3)::int
    </script>
    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    
  </head>
  <body>
    <div id="map"></div>

<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

}
        setTimeout(flash, 1500)
      }
      function scroll(){
        map.panTo(map.getBounds().getNorthEast(), {animate: true, duration: 20, easeLinearity: 1})
        setTimeout(scroll, 20000)
      }
      function main() {
        map = new L.Map('map', { 
          zoomControl: false,
          center: [43, 0],
          zoom: 20
        });

// create a layer with 1 sublayer
        cartodb.createLayer(map, {
          user_name: 'andrew',
          type: 'cartodb',
          sublayers: [{
            sql: $('#sql_template').html(),
            cartocss: $('#cartocss_template').html()
          },{
              sql: $('#sql_template').html(),
              cartocss: $('#cartocss_template').html()
            }]
        }).done(function(layer) {
          // console.log(layer.leafletLayer.options)
          layer.leafletLayer.options.setTileSize = 128;
          // la = layer;
          // add the layer to our map which already contains 1 sublayer
          map.addLayer(layer);

cartodb.createLayer(map, {
            user_name: 'andrew',
            type: 'cartodb',
            sublayers: [{
              sql: $('#sql_template').html(),
              cartocss: $('#cartocss_template2').html()
            },{
              sql: $('#sql_template').html(),
              cartocss: $('#cartocss_template2').html()
            }]
          }).done(function(layer2) {
            layer2.leafletLayer.options.setTileSize = 128;
            la = layer2;
            map.addLayer(la,1);

// cartodb.createLayer(map, {
            //   user_name: 'andrew',
            //   type: 'cartodb',
            //   sublayers: [{
            //     sql: $('#sql_template').html(),
            //     cartocss: $('#cartocss_template').html()
            //   },{
            //     sql: $('#sql_template').html(),
            //     cartocss: $('#cartocss_template').html()
            //   }]
            // }).done(function(layer3) {
            //   layer3.leafletLayer.options.setTileSize = 128;
            //   la = layer3;
            //   map.addLayer(la,2);
              scroll();
              setTimeout(flash, 200);
            // });

});
        });
      }

window.onload = main;
    </script>
  </body>
</html>

Modified http://libs.cartocdn.com/cartodb.js/v3/cartodb.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/cartodb.js