2 - ol3.2ex 77b - Fractal example 2

「fractal.js（277-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「277-ol3ex.js」

var radius = 10e6;

var cos30 = Math.cos(Math.PI / 6);
/** Math.cos()
 * 引数として与えた数のコサインを返します。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/
 * JavaScript/Reference/Global_Objects/Math/cos]）
 */

/** Math.PI()
 * 円周率。約 3.14159 です。
 * （MDN[https://developer.mozilla.org/ja/docs/Web
 * /JavaScript/Reference/Global_Objects/Math/PI]）
 */

var sin30 = Math.sin(Math.PI / 6);
/** Math.sin()
 * 引数として与えた数のサイン（正弦）を返します。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/
 * JavaScript/Reference/Global_Objects/Math/sin]）
 */

var rise = radius * sin30;
var run = radius * cos30;

var triangle = new ol.geom.LineString([
/** ol.geom.LineString
 * Linestring geometry.（ol3 API）
 */

 [0, radius], [run, -rise], [-run, -rise], [0, radius]
]);

var feature = new ol.Feature(triangle);
/** ol.Feature
 * A vector object for geographic features with a geometry 
 * and other attribute properties, similar to the features 
 * in vector file formats like GeoJSON.
 * GeoJSONのようなベクトルファイル形式のフィーチャに類似した、
 * ジオメトリとその他の属性プロパティを持つ地物フィーチャのため
 * のベクトルオブジェクト。（ol3 API）
 */

var layer = new ol.layer.Vector({
/** ol.layer.Vector
 * Vector data that is rendered client-side.
 * クライアント側で描画されたベクタデータ。（ol3 API）
 */

 source: new ol.source.Vector({
 /*: ol.source.Vector 
  * Provides a source of features for vector layers.
  * ベクタレイヤのフィーチャのソースを提供します。（ol3 API）
  */

  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 = /** @type {ol.geom.LineString} */ (triangle.clone());
 /** @type 
  * 値のタイプ（型）の説明 - 式などで表示
  * （@use JSDoc[http://usejsdoc.org/]より）
  */

 /** clone()
  * Clone this feature. If the original feature has 
  * a geometry it is also cloned. The feature id is 
  * not set in the clone.
  * このフィーチャを複製します。元のフィーチャは、ジオメトリ
  * を有する場合にも複製します。フィーチャ ID は、クローンに
  * 設定されていません。（ol3 API）
  */

 var graph = coordsToGraph(geometry.getCoordinates());
 /** getCoordinates()
  * Returns: Coordinates.（ol3 API）
  */

 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;
 /** element.innerHTML
  * innerHTML は、与えられた要素に含まれる全てのマークアップ
  * と内容を設定または取得します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * API/element.innerHTML]）
  */

 geometry.setCoordinates(coordinates);
 /** setCoordinates()
  * setCoordinates(coordinates) [Type: ol.Coordinate, 
  * Description: Coordinates]（ol3 API）
  */

 feature.setGeometry(geometry);
 /** setGeometry()
  * Set the geometry for this feature. This will 
  * update the property associated with the current 
  * geometry property name. By default, this is 
  * geometry but it can be changed by calling 
  * setGeometryName.
  * このフィーチャのジオメトリを設定します。これは、現在のジ
  * オメトリプロパティ名に関連付けられているプロパティを更新
  * します。デフォルトでは、ジオメトリですがそれは 
  * setGeometryName を呼び出すことによって変更できます。
  * （ol3 API）
  */

}

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);
 /** Math.sqrt()
  * 引数として与えた数の平方根を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/sqrt]）
  */

 var a = Math.atan2(dy, dx) + Math.PI / 6;
 /** Math.atan()
  * 引数として与えた数のアークタンジェントをラジアン単位で返
  * します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/atan]）
  */

 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.
 * デプスチェンジによってフラクタルを再生します。アップデート
 * が200ミリ秒毎に生じるだけで、チェンジイベントがデバウンス
 * されます。
 */

depthInput.onchange = function() {
/** GlobalEventHandlers.onchange()
 * The onchange property sets and returns the event 
 * handler for the change event.
 * onchange プロパティは、change イベントに対してイベント
 * ハンドラを設定、および、返します。
 * （MDN[https://developer.mozilla.org/en-US/
 * docs/Web/API/GlobalEventHandlers/onchange]）
 */

 window.clearTimeout(updateTimer);
 /** Window.clearTimeout(timeoutID)
  * window.setTimeout() によって設定された遅延を解除します。
  * timeoutID は、解除したいタイマの ID です。ID は、
  * window.setTimeout() の戻り値によって取得できます。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * API/WindowTimers/clearTimeout]）
  */

 updateTimer = window.setTimeout(update, 200);
 /** setTimeout(func, dylay)
  * 指定された遅延の後に、コードの断片または関数を実行します。
  * func : delay ミリ秒後に実行したい関数。
  * delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * API/Window/setTimeout]）
  */

};

update();