Fractal Rendering

This example uses OpenLayers v4.0.1. The latest is v.

#### Fractal Rendering

depth: (# points)

Example of a fractal.

This example demonstrates how features with many vertices can be efficiently rendered.

Related API documentation:

- ol.Feature
,
- ol.Map
,
- ol.View
,
- ol.geom.LineString
,
- ol.layer.Vector
,
- ol.source.Vector

Copy Edit
Fractal Rendering Example of a fractal. var radius = 10e6; var cos30 = Math.cos(Math.PI / 6); var sin30 = Math.sin(Math.PI / 6); var rise = radius * sin30; var run = radius * cos30; var triangle = new ol.geom.LineString([ [0, radius], [run, -rise], [-run, -rise], [0, radius] ]); var feature = new ol.Feature(triangle); var layer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [feature] }) }); var map = new ol.Map({ layers: [layer], target: 'map', view: new ol.View({ center: [0, 0], zoom: 1 }) }); function makeFractal(depth) { var geometry = triangle.clone(); var graph = coordsToGraph(geometry.getCoordinates()); for (var i = 0; i < depth; ++i) { var node = graph; while (node.next) { var next = node.next; injectNodes(node); node = next; } } var coordinates = graphToCoords(graph); document.getElementById('count').innerHTML = coordinates.length; geometry.setCoordinates(coordinates); feature.setGeometry(geometry); } function injectNodes(startNode) { var endNode = startNode.next; var start = startNode.point; var end = startNode.next.point; var dx = end[0] - start[0]; var dy = end[1] - start[1]; // first point at 1/3 along the segment var firstNode = { point: [start[0] + dx / 3, start[1] + dy / 3] }; // second point at peak of _/\_ var r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30); var a = Math.atan2(dy, dx) + Math.PI / 6; var secondNode = { point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)] }; // third point at 2/3 along the segment var thirdNode = { point: [end[0] - dx / 3, end[1] - dy / 3] }; startNode.next = firstNode; firstNode.next = secondNode; secondNode.next = thirdNode; thirdNode.next = endNode; } function coordsToGraph(coordinates) { var graph = { point: coordinates[0] }; var length = coordinates.length; for (var level = 0, node = graph; level < length - 1; ++level) { node.next = { point: coordinates[level + 1] }; node = node.next; } return graph; } function graphToCoords(graph) { var coordinates = [graph.point]; for (var node = graph, i = 1; node.next; node = node.next, ++i) { coordinates[i] = node.next.point; } return coordinates; } var depthInput = document.getElementById('depth'); function update() { makeFractal(Number(depthInput.value)); } var updateTimer; /** * Regenerate fractal on depth change. Change events are debounced so updates * only occur every 200ms. */ depthInput.onchange = function() { window.clearTimeout(updateTimer); updateTimer = window.setTimeout(update, 200); }; update(); .map { background: whitesmoke; } #depth { width: 100px; } <div id="map" class="map"></div> <label for="depth"> depth:&nbsp; <input id="depth" type="range" min="0" max="9" step="1" value="5"> &nbsp;(<span id="count">#</span> points) </label>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Fractal Rendering</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
        <style>
          .map {
            background: whitesmoke;
          }
          #depth {
            width: 100px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>
        <label for="depth">
          depth:&nbsp;
          <input id="depth" type="range" min="0" max="9" step="1" value="5">
          &nbsp;(<span id="count">#</span> points)
        </label>
        <script>
          var radius = 10e6;
          var cos30 = Math.cos(Math.PI / 6);
          var sin30 = Math.sin(Math.PI / 6);
          var rise = radius * sin30;
          var run = radius * cos30;

          var triangle = new ol.geom.LineString([
            [0, radius], [run, -rise], [-run, -rise], [0, radius]
          ]);

          var feature = new ol.Feature(triangle);

          var layer = new ol.layer.Vector({
            source: new ol.source.Vector({
              features: [feature]
            })
          });

          var map = new ol.Map({
            layers: [layer],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 1
            })
          });

          function makeFractal(depth) {
            var geometry = triangle.clone();
            var graph = coordsToGraph(geometry.getCoordinates());
            for (var i = 0; i < depth; ++i) {
              var node = graph;
              while (node.next) {
                var next = node.next;
                injectNodes(node);
                node = next;
              }
            }
            var coordinates = graphToCoords(graph);
            document.getElementById('count').innerHTML = coordinates.length;
            geometry.setCoordinates(coordinates);
            feature.setGeometry(geometry);
          }

          function injectNodes(startNode) {
            var endNode = startNode.next;

            var start = startNode.point;
            var end = startNode.next.point;
            var dx = end[0] - start[0];
            var dy = end[1] - start[1];

            // first point at 1/3 along the segment
            var firstNode = {
              point: [start[0] + dx / 3, start[1] + dy / 3]
            };

            // second point at peak of _/\_
            var r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30);
            var a = Math.atan2(dy, dx) + Math.PI / 6;
            var secondNode = {
              point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)]
            };

            // third point at 2/3 along the segment
            var thirdNode = {
              point: [end[0] - dx / 3, end[1] - dy / 3]
            };

            startNode.next = firstNode;
            firstNode.next = secondNode;
            secondNode.next = thirdNode;
            thirdNode.next = endNode;
          }

          function coordsToGraph(coordinates) {
            var graph = {
              point: coordinates[0]
            };
            var length = coordinates.length;
            for (var level = 0, node = graph; level < length - 1; ++level) {
              node.next = {
                point: coordinates[level + 1]
              };
              node = node.next;
            }
            return graph;
          }

          function graphToCoords(graph) {
            var coordinates = [graph.point];
            for (var node = graph, i = 1; node.next; node = node.next, ++i) {
              coordinates[i] = node.next.point;
            }
            return coordinates;
          }

          var depthInput = document.getElementById('depth');

          function update() {
            makeFractal(Number(depthInput.value));
          }

          var updateTimer;

          /**
           * Regenerate fractal on depth change.  Change events are debounced so updates
           * only occur every 200ms.
           */
          depthInput.onchange = function() {
            window.clearTimeout(updateTimer);
            updateTimer = window.setTimeout(update, 200);
          };

          update();
        </script>
      </body>
    </html>