SVGの生成(その２）

線描を減らすために、緯線と経線の交点のみ描くようにしました。

線の色・スタイルも若干変えています。


<html><head>
<script>
var CENX;
var CENY;
var RAD;
var svgHtml;

function outLine(point){
  var tsx;
  var tsy;
  var tex;
  var tey;
  
  var retStr = "";
  for(i=1;i<5;i++){
      tsx = point[0][1]*RAD+CENX;
      tsy = point[0][2]*RAD+CENY;
      tex = point[i][1]*RAD+CENX;
      tey = point[i][2]*RAD+CENY;

      retStr += 
         '<path d="M '+(tsx+"").substring(0,10)+" "+(tsy+"").substring(0,10)+" "+
             "L " + (tex+"").substring(0,10)+" "+(tey+"").substring(0,10)+' Z" stroke-width="1" stroke="#00ff00" />\n';
  }
  
  return retStr;
}

function radians(deg){
  return deg/180*Math.PI;
}

function getXYZ(lamda,fai,L0,B0,P){
  var cosB0 = Math.cos( radians( B0 ) );
  var sinB0 = Math.sin( radians( B0 ) );
  var cosP = Math.cos( radians( P ) );
  var sinP = Math.sin( radians( P ) );
  var L,M,N;
  var LD,MD,ND;
  var x, y, z;

  L = Math.cos( radians( fai ) ) * Math.cos( radians(lamda-L0));
  M = Math.cos( radians( fai ) ) * Math.sin( radians(lamda-L0));
  N = Math.sin( radians( fai ) );

  LD = cosB0  * L + sinB0 * N;
  MD = M;
  ND = -sinB0 * L + cosB0 * N;

  x = LD;
  y = cosP * MD - sinP * ND;
  z = sinP * MD + cosP * ND;
  
  return [x,y,z];
}

function drawCircles(){
  CENX = document.getElementById("CenX").value-0;
  CENY = document.getElementById("CenY").value-0;
  RAD  = document.getElementById("Rad").value-0;

  svgHtml = '<svg width="'+(CENX*2)+'" height="'+(CENY*2)+'" xmlns="http://www.w3.org/2000/svg"><circle cx="'+CENX+'" cy="'+CENY+'" r="'+RAD+'" fill="none" stroke-width="1" stroke="#00ff00"/>';
  document.getElementById("textOut").value = svgHtml;

  var L0 = document.getElementById("L0").value-0;
  var B0 = document.getElementById("B0").value-0;
  var P = document.getElementById("P").value-0;
  var ret;
  var point = new Array();
  var x, y, z;
  
  var lamda = 0;
  var fai   = 0;
  
  for(fai=-90;fai<=90;fai+=15){
    for(lamda=0;lamda<=360;lamda+=15){
      ret = getXYZ(lamda,fai,L0,B0,P);
      if( ret[0] > 0 ){
        point[0] = ret;
        point[1] = getXYZ(lamda-5, fai  , L0,B0,P);
        point[2] = getXYZ(lamda  , fai-5, L0,B0,P);
        point[3] = getXYZ(lamda+5, fai  , L0,B0,P);
        point[4] = getXYZ(lamda  , fai+5, L0,B0,P);
        
	    document.getElementById("textOut").value += outLine(point);
      }
    }
  }
  document.getElementById("textOut").value +=  "</svg>";
  document.getElementById("svgCanvas").innerHTML = document.getElementById("textOut").value;
  alert("完了しました");
}

</script>
</head>
<body>
<form>
L0=<input id="L0" type="text" value="10.0" />
B0=<input id="B0" type="text" value="30.0" />
P=<input id="P" type="text" value="20.0" /><br>
中央座標X：<input id="CenX" type="text" value="300" />
中央座標Y：<input id="CenY" type="text" value="300" />
半径：<input id="Rad" type="text" value="300" />

<input value="Draw" type="button" onClick="drawCircles()" />
</form>
<textarea id="textOut" cols="60" rows="30">
</textarea>
<div id="svgCanvas" width="400" height="400"></div>
</body>
</html>
星をください

天体観測行きます！

SVGの生成(その２）
