<?xml version="1.0" encoding="euc-jp"?>
<?xml-stylesheet type="text/css" href="nami-test1.css"?>

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
  "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"
[
  <!ENTITY mathml "http://www.w3.org/1998/Math/MathML">
]>

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:math="http://www.w3.org/1998/Math/MathML">

<head>
  <title>Nami's MathML-SVG example.</title>
  <script language="JavaScript1.3">
    function Msin(obj1,obj2){
      var x=getElementById(obj1);
      var y=getElementById(obj2);
      y.setAttribute("value",Math.sin(parseFloat(x.getAttribute("value"))));
    }

    function extend(which){
      var target = document.getElementById(which);
        target.style.color="black";
    }

    <!-- http://www.1000cp.com/oliver/mozilla/ -->
    function expand(which) {
            var target = document.getElementById(which);
            if (target.style.display == "block") {
                        target.style.display = "none";
            }
                else {
                        target.style.display = "block";
            }
        }

    <!-- http://www.skeeter-s.com/svg/ -->
    function change(scalefactor, direction, op){
      // Grab all the polygons, and iterate over them
      polys = document.getElementsByTagName("polyline");
      for (i = 0; i != polys.length; i++){
        // Get the individual numbers making up the points
        pointstr = polys[i].getAttribute("points");

        // trim, as javascript doesn't provide one
        // This is necessary to avoid an empty first element after split
      while (pointstr.charAt(0) == " "){ 
        pointstr = pointstr.slice(1, pointstr.length);
      }

      coords = pointstr.split(" ");
      outstr = "";

      // Go through them all and scale appropriately
      for (j in coords){
        num = coords[j].split(",");
        x = parseFloat(num[0]);
        y = parseFloat(num[1]);

       	if (!isNaN(x)){
       	if (!isNaN(y)){
        // direction == 2 is special; it means scale both
        // direction == 0 means scale X; direction == 1 means scale Y
	  if ( direction == 2 ){
            if (op == 0){
              x = x * scalefactor;
              y = y * scalefactor;
	    }else if (op == 1){
	      x = 500 - x;
	      y = 500 - y;
	    }
	  }else if( direction == 1 ){
            if (op == 0){
              y = y * scalefactor;
	    }else if (op == 1){
	      y = 500 - y;
	    }
	  }else if( direction == 0 ){
            if (op == 0){
              x = x * scalefactor;
	    }else if (op == 1){
	      x = 500 - x;
	    }
          }
   	  outstr = outstr+x+","+y+" ";
	}
	}
      }

      // Set the new values
      polys[i].setAttribute("points", outstr);
    }
  }

      <!-- Koch curve -->
      function koch1(n){
        var poly = document.getElementById("koch");
        pointstr = poly.getAttribute("points");

        if( n==0 ){
          outstr="0,0 600,0";
          poly.setAttribute("points", outstr);
          return;
        }

        pi2=2.0*Math.PI;
        x=0;
        y=0;
        px=0;
        py=0;

        coords = pointstr.split(" ");
        outstr = "";
        for (j in coords){
          if( j == 200 ){
            outstr="0,0 600,0";
            poly.setAttribute("points", outstr);
            return;
          }            

          co=coords[j].split(",");            
          numx = parseFloat(co[0]);
	  numy = parseFloat(co[1]);
          if( 0 == j ){
            outstr = outstr + numx + "," + numy + " ";
            px=0;
            py=0;
          }else{
            x = numx;
            y = numy;
            nx = px+(x-px)/3;
            ny = py+(y-py)/3;
            outstr = outstr + Math.ceil(nx) + "," + Math.ceil(ny) + " ";
            nx = nx+((x-px)*Math.cos(pi2/6)-(y-py)*Math.sin(pi2/6))/3;
            ny = ny+((x-px)*Math.sin(pi2/6)+(y-py)*Math.cos(pi2/6))/3;
            outstr = outstr + Math.ceil(nx) + "," + Math.ceil(ny) + " ";
            nx = nx+((x-px)*Math.cos(pi2/6)+(y-py)*Math.sin(pi2/6))/3;
            ny = ny+((px-x)*Math.sin(pi2/6)+(y-py)*Math.cos(pi2/6))/3;
            outstr = outstr + Math.ceil(nx) + "," + Math.ceil(ny) + " ";
            outstr = outstr + x + "," + y + " ";
            px=x;
            py=y;
          }
        }
        poly.setAttribute("points", outstr);
      }

  function plotsin(){
    var poly = document.getElementById("sin");
    pointstr = poly.getAttribute("points");

    pi2=2.0*Math.PI;
    x=0;
    y=100;
    outstr=""+x+","+y+" ";
    for( x=1; x!=200; x=x+1 ){
      y=100-100*Math.cos(pi2*x/400.0)*Math.sin(8*pi2*x/400);
      outstr=outstr+x+","+Math.ceil(y)+" ";
    }
    outstr=outstr+"200,100 0,100";
    poly.setAttribute("points", outstr);
  }

  function oc(obj){
    var poly = document.getElementById("sin");
    pointstr = poly.getAttribute("points");

    confirm("n="+obj.value+", OK?");

    pi2=2.0*Math.PI;
    x=0;
    y=100;
    n=parseFloat(obj.value);
    outstr=""+x+","+y+" ";
    for( x=1; x!=200; x=x+1 ){
      y=100-100*Math.cos(pi2*x/400.0)*Math.sin(n*pi2*x/400);
      outstr=outstr+x+","+Math.ceil(y)+" ";
    }
    outstr=outstr+"200,100 0,100";
    poly.setAttribute("points", outstr);
  }
</script>
</head>

<body bgcolor='#ffffff'>
<h1>MathML + SVG + Java applet + JavaScript サンプルページ</h1>
<p>
<a href="#svg">[SVG and JavaScript]</a> <a href="#simple">[MathML
sample]</a>
<a href="#Mand">[MathML and Java applet]</a> <a href="#svgandmath">[SVG
and MathML]</a> <a href="#ex">[misc]</a>
</p>
<p>
XMLでは各種のDTDを混在させることができます。Mozillaでは数式記述MLである
MathMLとベクトルデータによるグラフィクス記述MLであるSVGとの描画を
サポートしています。
</p>
<p>
このページではこれらをXHTMLに混在させ、ページ記述自体はHTMLとCSSとによる
制御を行っています。ですから、Java appletやJavaScriptも普通に使えます。
</p>
<p>
数式はMathMLを使って書いています。図はSVGによる記述です。
蛇足ですが、このページにbitmap画像は全く使われていません。
SVGはJavaScriptを使って変形できるようにしています。
jdk1.3.1_01 を使うことで Java applet が利用できます。
</p>
<p>
画像を貼りつけているわけではないので、テキストのサイズを変更すると
それに伴って数式の表示サイズも追従します。SVGの変形はJavaScriptで
行っていますから、クライアントの処理速度のみに依存します。</p>
<p>
根号などはフォントの具合でうまく表示できないかもしれません。
</p>

<a name="svg"><h2>SVG and JavaScriptで雪片曲線を描く</h2></a>
<div>
<button  name="Change" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="koch1(1);">Change</button>
<button  name="Reset" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="koch1(0);">Reset</button>
Changeをクリックするごとに細かい雪片曲線を描画します。
都合により4ステップが限界。
</div>
<div>
<svg:svg>
<svg:g>
  <svg:polygon x="0" y="1" id="koch" points="0,0 600,0" style="fill:lightblue; stroke:blue; stroke-width:2" /> 
</svg:g>
</svg:svg>
</div>

<h2>ボタンの中にMathML,図はSVG.</h2>
<form>
<button type="button" onclick="plotsin();">
  クリックして<br/>グラフを描画
  <span class="large">
  <math xmlns="&mathml;">
    <mo>cos</mo><mo>(</mo><mi>x</mi><mo>)</mo><mo>sin</mo><mo>(</mo><mi>n</mi><mi>x</mi><mo>)</mo>
  </math>
  </span>
</button>
nを変えて再描画
<input type="textfield" name="mf" id="mf" size="3" value="8" onchange="oc(this)"/>
<svg:svg>
<svg:g>
  <svg:polygon x="0" y="0" id="sin" points="0,0 200,0 200,200" style="fill:lightblue; stroke:blue; stroke-width:2" />
</svg:g>
</svg:svg>
</form>

<a name="simple"><h2>簡単な数式</h2></a>
<div id="simple">
<table cellspacing="10">
<tr>
<th>標準サイズ</th>
<th>拡大</th>
<th>さらに拡大</th>
<!-- <th>上括弧</th> -->
<th>累乗根</th>
</tr>
<tr>
<td>
<span>
<math:msqrt>
<math:mfrac>
  <math:mn>&pi;</math:mn>
  <math:mrow>
    <math:mn>1</math:mn><math:mo>+</math:mo>
    <math:mfrac><math:mi>x</math:mi><math:mn>2</math:mn></math:mfrac>
  </math:mrow>
</math:mfrac>
</math:msqrt>
</span>
</td>
<td>
<span class="large">
<math:msqrt>
<math:mfrac>
  <math:mi>&pi;</math:mi>
  <math:mrow>
    <math:mn>1</math:mn><math:mo>+</math:mo>
    <math:mfrac><math:mi>x</math:mi><math:mn>2</math:mn></math:mfrac>
  </math:mrow>
</math:mfrac>
</math:msqrt>
</span>
</td>
<td>
<span class="huge">
<math:msqrt>
<math:mfrac>
  <math:mi>&pi;</math:mi>
  <math:mrow>
    <math:mn>1</math:mn><math:mo>+</math:mo>
    <math:mfrac><math:mi>x</math:mi><math:mn>2</math:mn></math:mfrac>
  </math:mrow>
</math:mfrac>
</math:msqrt>
</span>
</td>
<!--
<td>
<span class="large">
<math xmlns="&mathml;">
<mover>
  <mrow>
  <mover>
   <mrow> <msub><mi>a</mi><mn>1</mn></msub> <mo>+</mo> <mi>...</mi> <mo>+</mo>
          <msub><mi>a</mi><mn>n</mn></msub> 
   </mrow>
   <mo>&OverBrace;</mo>
  </mover>
  </mrow>
  <mrow>
    <mi>n</mi><mo>-</mo><mtext>times</mtext>
  </mrow>
</mover>
</math>
</span>
</td>
-->
<td>
<math xmlns="&mathml;">
<mmultiscripts>
  <mrow>
  <msqrt>
    <mn>2</mn>
  </msqrt>
  </mrow>
  <mi> </mi><mi> </mi>
  <mprescripts/>
  <none/><mn>4</mn>
</mmultiscripts>
</math>
</td>
</tr>
</table>
</div>

<table cellspacing="10">
<tr><td>拡散反応系:</td>
<td>
  <span class="large">
  <math xmlns="&mathml;">
    <mi>&kappa;</mi>
    <mfrac>
      <mrow><mo>&PartialD;</mo><mi>u</mi></mrow>
      <mrow><mo>&PartialD;</mo><mi>t</mi></mrow>
    </mfrac>
    <mo>=</mo><mo>&epsi;</mo><mo>&Delta;</mo><mi>u</mi><mo>+</mo>
    <mi>u</mi><mo>(</mo><mi>u</mi><mo>-</mo><mi>a</mi><mo>)</mo>
    <mo>(</mo><mi>u</mi><mo>-</mo><mn>1</mn><mo>)</mo>
  </math>
  </span>
</td>
</tr>
<tr><td>ガウス分布:</td>
<td>
  <span>
  <math mode="display" xmlns="&mathml;">
  <mstyle displaystyle="true">
    <mfrac>
      <mn>1</mn>
      <msqrt><mn>2</mn><mi>&pi;</mi><mi>t</mi></msqrt>
    </mfrac>
    <msubsup>
      <mo>&Integral;</mo>
      <mrow><mo>-</mo><mi>&infin;</mi></mrow>
      <mi>x</mi>
    </msubsup>
    <msup>
      <mi fontsize="x-large">e</mi>
      <mrow>
        <mo>-</mo>
        <mfrac fontsize="small">
          <msup><mi>y</mi><mn>2</mn></msup>
          <mrow><mn>2</mn><mi>t</mi></mrow>
        </mfrac>
      </mrow>
    </msup>
    <mo>dy</mo>
  </mstyle>
  </math>
  </span>
</td>
</tr>
</table>

<h2>力学系のゼータ関数</h2>
<div class="large" id="zeta">
<math xmlns="&mathml;">
<mo>(</mo><mi>X</mi><mo>,</mo><mi>f</mi><mo>)</mo></math>
を力学系,<math:mi>U</math:mi><math:mo>&in;</math:mo>
<math:mi>C</math:mi><math:mi>(X;&Ropf;)</math:mi>
とする。力学系のゼータ関数を次で定義する。
この収束半径が自由エネルギー(位相圧力)を与える。
<math mode="display" xmlns="&mathml;">
  <mrow><mi>&zeta;</mi><mo>(</mo><mi>z</mi><mo>)</mo></mrow>=
  <mrow><mo>exp</mo><mo>(</mo>
  <msubsup>
    <mo>&sum;</mo><mrow><mi>n</mi><mo>=</mo><mn>0</mn></mrow><mi>&infin;</mi>
  </msubsup>
  <mfrac><mrow><msup><mi>z</mi><mi>n</mi></msup></mrow><mi>n</mi></mfrac>
  <mrow>
  <mo>(</mo>
  <msub>
    <mo>&sum;</mo>
    <mrow>
      <mi>x</mi><mo>&in;</mo>
        <mo>Fix</mo><mo>(</mo><mi>X</mi><mi>,</mi><msup><mi>f</mi><mi>n</mi></msup><mo>)</mo></mrow>
  </msub>
  <msub>
    <mi>S</mi><mi>n</mi>
  </msub>
  <mrow><mi>U</mi><mo>(</mo><mi>x</mi><mo>)</mo></mrow>
  <mo>)</mo>
  </mrow>
  <mo>)</mo>
  </mrow>
</math>
</div>

<a name="svgandmath"><h2>Tent写像</h2></a>
<div>
次の関数
<math xmlns="&mathml;">
<mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo>
</math>のグラフは

<center>
<math xmlns="&mathml;">
  <mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo><mo>=</mo>
  <mstyle displaystyle='true'>
  <mrow>
    <mo>&lbrace;</mo>
      <mtable columnalign='left left' equalrows='false' equalcolumns='false'>
        <mtr>
          <mtd><mrow><mn>2</mn><mi>x</mi></mrow></mtd>
	  <mtd><mo>(</mo><mn>0</mn><mo>&leq;</mo><mi>x</mi><mo>&lt;</mo><mn>1/2</mn><mo>)</mo></mtd>
        </mtr>
	<mtr><mtd></mtd><mtd></mtd></mtr>
	<mtr><mtd></mtd><mtd></mtd></mtr>
        <mtr>
          <mtd><mrow><mn>-2</mn><mi>x</mi><mo>+</mo><mn>2</mn></mrow></mtd>
	  <mtd><mo>(</mo><mn>1/2</mn><mo>&leq;</mo><mi>x</mi><mo>&lt;</mo><mn>1</mn><mo>)</mo></mtd>
        </mtr>
      </mtable>
</mrow>
</mstyle>
</math>
</center>

下左図のようになる。これはChaosを引き起こす典型的な写像である。
関数
<math xmlns="&mathml;">
<maction actiontype="restyle#zoom">
<mrow>
  <mi>g</mi><mo>(</mo><mi>x</mi><mo>)</mo>
<mo>=</mo><mi>4</mi><mi>x</mi><mo>(</mo><mn>1</mn><mo>-</mo><mi>x</mi><mo>)</mo>
</mrow>
</maction>
</math>
のグラフは下右図のようになる。これは
<math xmlns="&mathml;"><mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo></math>
と位相同型になる(背景が黄色い数式はクリックすると拡大します)。
<!--
<math xmlns="&mathml;">
<maction actiontype="toggle">
  <maction actiontype="statusline#Tent">
    <mi>Tent map</mi>
  </maction>

  <maction actiontype="statusline#Logistic">
    <mi>Logistic map</mi>
  </maction>

  <maction actiontype="statusline#Graph">
    <maction actiontype="restyle#background">
      <svg 
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.svg">
      <g><ellipse cx="2" cy="4" rx="2" ry="1" /></g></svg>
      <mi>Graph</mi>
    </maction>
  </maction>
</maction>
</math>
-->
</div>

<div class="figure">
<svg:svg>
  <svg:g>
    <svg:polyline x="0" y="0" id="bg" points="0,0 200,0 200,200 0,200 0,0"/> 
    <svg:polyline x="0" y="0" id="bg" points="0,200 200,0"/> 
    <svg:polyline x="0" y="0" id="bg" points="0,200 100,0 200,200"/> 
    <svg:polyline x="250" y="0" id="bg" points="0,0 200,0 200,200 0,200 0,0"/> 
    <svg:polyline x="250" y="0" id="bg" points="0,200 200,0"/> 
<svg:polyline x="250" y="0" points="0,200 10,162 20,127 30,98 40,71 50,50 60,32 70,18 80,7 89,2 99,0 109,2 120,8 130,18 140,32 150,50 160,72 170,98 180,128 190,162 200,200"/>
</svg:g>
</svg:svg>
<div>
<button  name="Larger" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="change(1.2, 2, 0);">Larger</button>
<button name="Smaller" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="change(0.8333, 2, 0);">Smaller</button>
<button name="Larger X" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="change(1.2, 0, 0);">Larger X</button>
<button name="Smaller X" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="change(0.8333, 0, 0);">Smaller X</button>
<button name="Larger Y" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="change(1.2, 1, 0);">Larger Y</button>
<button name="Smaller Y" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="change(0.8333, 1, 0);">Smaller Y</button>
<button name="Reflect X" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="change(1, 0, 1);">Reflect X</button>
<button name="Reflect Y" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="change(1, 1, 1);">Reflect Y</button>
<button name="Rotate 180" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="change(1, 2, 1);">Rotate <math:mi>&pi;</math:mi></button>
<button name="Reset" onmouseover="this.style.MozOpacity='1.0';"
 onmouseout="this.style.MozOpacity='0.75';"
 onclick="window.location.reload();">Reset</button>
</div>
</div>

<a name="Mand"><h2>Mandelbrot 集合</h2></a>
<p>
複素関数 
<math xmlns="&mathml;">
  <msub><mi>f</mi><mi>C</mi></msub><mo>(</mo><mi>z</mi><mo>)</mo><mo>=</mo>
  <msup><mi>z</mi><mn>2</mn></msup><mo>+</mo><mi>C</mi>
</math>
の初期値0に関する反復
<math xmlns="&mathml;">
  <msubsup><mi>f</mi><mi>C</mi><mi>n</mi></msubsup>
    <mo>(</mo><mi>0</mi><mo>)</mo></math>
が発散するような 
<math xmlns="&mathml;"><mi>C</mi><mo>&in;</mo><mi>&Copf;</mi></math>
を複素平面上に図示すると Mandelbrot 集合を
得る。下のappletで100程度を入力すれば描画される。
</p>
<object code="mand.class" codetype="application/java"
classid="java:mand.class" width="300" height="300"></object>

<p>
<math xmlns="&mathml;">
  <msubsup><mi>f</mi><mi>C</mi><mi>n</mi></msubsup>
  <mo>(</mo><msub><mi>z</mi><mn>0</mn></msub><mo>)</mo>
</math>
が発散するような
<math xmlns="&mathml;"><msub><mi>z</mi><mn>0</mn></msub></math>
は
<math xmlns="&mathml;"><mi>C</mi><mo>&in;</mo><mi>&#x2102;</mi></math>
に関するJulia集合と呼ばれる。
</p>

<a name="ex"><h2>演習問題</h2></a>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msub><mi>f</mi><mi>n</mi></msub>
</math>
を帰納的に
<math xmlns="&mathml;">
  <mstyle displaystyle='true'>
  <mrow>
    <mo>&lbrace;</mo>
      <mtable columnalign='left ' equalrows='false' equalcolumns='false'>
        <mtr> <mtd>
             <msub><mi>f</mi><mn>1</mn></msub><mo>(</mo><mi>x</mi><mo>)</mo><mo>=</mo><mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo><mi>,</mi>
           </mtd> </mtr>
        <mtr> <mtd>
             <msub><mi>f</mi><mn>n+1</mn></msub><mo>(</mo><mi>x</mi><mo>)</mo><mo>=</mo><mn>1</mn><mo>+</mo>
             <msubsup><mo>&Integral;</mo><mi>0</mi><mi>x</mi></msubsup>
             <msub><mi>f</mi>
                <mrow><mi>n</mi><mo>+</mo><mn>1</mn></mrow>
             </msub>
             <mo>(</mo><mi>y</mi><mo>)</mo><mo>dy</mo>
        </mtd> </mtr>
      </mtable>
  </mrow>
  </mstyle>
</math>
と定める。
<span class="large">
<math xmlns="&mathml;">
<mstyle displaystyle="true">
<munder><mo>lim</mo><mrow><mi>n &rightarrow;&infin;</mi></mrow></munder>
<msub><mi>f</mi><mi>n</mi></msub><mo>(</mo><mi>x</mi><mo>)</mo>
</mstyle>
</math>
</span>
を求めよ。<br />

<h2>行列</h2>
<div>
<math xmlns="&mathml;">
  <mstyle>
  <mo>(</mo>
  <mrow>
  <mtable>
    <mtr>
      <mtd><mn>1</mn>
      </mtd>
      <mtd><mn>1</mn>
      </mtd>
    </mtr>
    <mtr>
      <mtd><mn>1</mn>
      </mtd>
      <mtd><mn>0</mn>
      </mtd>
    </mtr>
  </mtable>
  </mrow>
  <mo>)</mo>
  </mstyle>
</math>
</div>


<h2>MathMLのサンプルページ</h2>
<a href="all-presentation.xml">all-presentation</a>
<a href="maxwell.xml">Maxwell equations</a>
<a href="simple.xml">simple</a>
<a href="mixing.xml">mixing</a>
<a href="stretchy.xml">stretch</a>
<a href="various.xml">various</a>

</body>
</html>

