html5 で MathML

HTMLに数式を書いていくのは、とても不便だと感じていましたが、HTML5 から MathML がつかえるようになっていましたね。このブログでも {math}...{/math} と HTML5 の MathML であることを明記して記述することにします。

色々なサイトに例のある2次方程式の解の公式を記載しておきます。
{math} $x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$ {/math}


各ブラウザによる対応は、

• chrome では、「 Math Anywhere 」という拡張機能を使うと表示されるようになります。
• Firefox では、おそらくそのままで表示されると思います。
• IEでは、MathPlayer という外部ツールをインストールすると表示できるそうです。(私の環境ではうまくできていません。)
• Safari では、対応はされているようですが、期待どおりには表示されず、です。

スマホでは、いくつか試しましたが、今のところ表示できている環境が見つけられていません。


そのほかの例：
{math} $\frac{ab}{c}=a\times b÷c$ {/math}
{math} $\sum _{i=1}^{20}{k}_i$ {/math}
{math} ${}_{n}P_r$ {/math}
{math} ${}_{5}C_2$ {/math}
{math} $\overrightarrow{v}$ {/math}
{math} ${\log }_{e}x+e^x$ {/math}
{math} $\left(\begin{array}{cc}x& 3\\ -1& y\end{array}\right)$ {/math}
{math} $\frac{dy}{dx}$ {/math}
{math} ${\int }_1^{\infty }\frac{dx}{x^2}$ {/math}
{math} $\left|-a\right|$ {/math}
{math} $x\pm y\mp 3$ {/math}
{math} $\underset{x\to 0}{\lim }\sin x$ {/math}
{math} $\frac{\partial z}{\partial x}$ {/math}

Examples - Basics - Control

[Conditionals1 / Conditionals2 ]

[EmbeddedIteration / Iteration]

[LogicalOperators]

Examples - Basics - Color

[Brightness]

* Hue, Saturation の記載

[ColorWheel]

[Creating]

[LineGradient]

[RadialGradient / RadialGradient2]

[Reading]

[Relativity]

[WaveGradient]

Examples - Basics - Arrays

しばらくは、Processing 1.5.1 の Examples でお勉強しましょう。
先ずは一番上から試してみましょう。

次の画像がサンプルを実行した出力結果です。左が Array 、右が Array2D の結果となります。

それではこの結果のもとになるソースコードを解析してみましょう。

[Array]
map() 関数が他の言語にはないと思いますので、本家の reference で調べてみます。 map(value, low1, high1, low2, high2) は、 low1 ～ high1 の間の value の値が、 low2 ～ high2 の中でどの位置にあるかを返す関数です。


amount に 0 ～ width までを 0 ～ π で置き換えて設定して、|cos(x)| を計算しておきます。
|cos(x)| は、π/2 で 0 になって、0, π の両端で 1 になる関数。

つぎに、for 文で i を横の座標として動かしていき、３つのパターンを生成します。
1つめのパターンは、「 stroke(coswave[i]*255); 」で色を決めて、
「 line(i, 0, i, height/3); 」で上から 1/3 のところまで、その指定色で縦の線を引いています。
真ん中が黒色で両端が白色の画像になります。
見ようによっては、２つの円柱をくっつけてその間を見ているように見えるかもしれません。

* ここで使われている　stroke() 関数ですが、これはラインや図形の境界線の色を指定する関数です。指定される色のモードは、現在の colorMode() によってRGBかHSBになります。デフォルトのカラースペースはRGBであり，各色の範囲は0から255です。引数が１つの stroke(gray) はグレィスケールで明暗を指定します。

2つめのパターンは、「 stroke(coswave[i]*255 / 4); 」で色を決めて、
「 line(i, height/3, i, height/3*2); 」で上から 1/3 ～ 2/3 のところまで、その指定色で縦の線を引いています。
上段のパターンと比較すると、|cos(x)|/4 ですから、第1のパターンの真ん中の部分 1/4 のところだけを横に伸ばしたような色合いになっているはずです。

最後に3つめのパターンは、「 stroke(255 - coswave[i]*255); 」で色を決めて、
「 line(i, height/3*2, i, height);　」で上から 2/3 のところから画像の一番下まで、その指定色で縦の線を引いています。
第1のパターンの白黒反転した図になります。
なんとなく１つの円柱を正面から見ているように見えなくもないですが、円柱を正面から見たときには、単に sin(x) のように思います。
そんなときにも、 Processing の簡単さが威力を発揮します。少し書き換えて f(x) = 1 - |cos(x)| (図の上 1/3)と f(x) = sin(x) (図の下 1/3)が比較できるような図を描いてみました。

コードは以下ですが、なんとなく sin(x) の方は、立体感に欠けますね。ちなみに、真ん中の gray の帯のところの真ん中あたりが薄く黒っぽく見えると思いますが、これは恐らく目の錯覚です。
sin(x) に奥行を感じたいところですから、f(x) = {sin(x)}^2 と sin の２乗で試してみましょう。
前のコードに、次を追加して、真ん中の gray の帯だったところを、 sin の２乗の式に変更してみます。

を足してみました。私には真ん中が円柱を正面から眺めたように見えますが、皆さんはいかがでしょう。

Processing のバージョン

Processing の 2012/4/20 現時点でのバージョンですが、Stable Release が 1.5.1 ( 2011.05.15 ) 版です。Pre-Release として、2.0a5 ( 2012.03.23 ) 版があります。

どちらも、Androidアプリへの出力に対応しているのですが、Pre-Release 版が最新の Android SDK (r18) にも対応しております。

Stable Release では出力された project の update をするように促されてしまい、「 Run in Emulator 」や「 Run on Device 」で直接実行することができませんでした。

Android との連携を便利と感じるのであれば、最新版を追いかけましょう。ただし、未だ Pre-Release であるので、何かと問題があるようです。64bit Windows7 で利用しはじめましたが、最新版ですと、OpenGL のところが動作しません。

2.0a5 の Processing を立ち上げて、[File] > [Examples...] > Select Libraries::opengl::Animation::Yellowtail from "Standard Examples" として、読み込んだサンプルを実行 してみると、次のようなエラーで実行できません。
対処方法を探しているところです。

線を引いてみる

早速、 Procesing を使ってみます。
  と、sketch に記述して、Run(Ctrl+R) します。

という画面が表示されました。
１行書いただけです。なんと簡単なんでしょう。また、line といえば、昔のN60-Basicを思い出します。懐かしい。

Processing

今更ながら Processing に触れて、久しぶりに心を射抜かれました。
ふと思い立ってブログに書いてみようと思い、こちらも今更ながらですが、
blogger にてブログを立ち上げてみました。