エレファント・ビジュアライザー調査記録

ビジュアルプログラミングで数式の変形を表すことを考えていくブロクです。

ビジュアルプログラミング(12)

関数のグラフ(Blockly)

Blockly  |  Google Developers」のサンプル「Graph」では、「Charts  |  Google Developers」の
折れ線グラフ  |  Charts  |  Google Developers」を使ってグラフを描画しています。

Graph」は「y=~」という形しか指定できないようなので、円などの描画はできないようです。

関数のグラフ」は複数のグラフを表示することができ、「x=~・y=~」という形も指定できるようになっています。

Graph」を改造して複数のグラフを表示することができ、「x=~・y=~」という形も指定できる「関数のグラフ(Blockly)」を作成しました。

使い方

関数のグラフ(Blockly)
  • (1) グラフを表示する領域
  • (2) ブロックを選択する領域(ツールボックス)
  • (3) ブロックを表示する領域
  • (4) ブロックの領域に読み込むボタン
  • (5) サンプルを選択するリスト
  • (6) ブロックの領域をテキストにしたものを入力する領域
  • (7) ブロックの領域をテキストにしたものを表示する領域

(2)の領域からブロックを選択して(3)の領域にドラッグ&ドロップしてつなげていくと、(1)の領域にグラフを表示することができます。

(3)の領域には最初は「グラフの表示」のブロック

「グラフの表示」のブロック

が表示されています。その下に「y=~」のブロック

「y=」のブロックをつなげたところ

または「x=~・y=~」のブロック

「x=~・y=~」のブロックをつなげたところ

をつなげていってください。

「y=~」のブロックにはパラメーター x を含む式をつなげてください。x がない場合は「変数の作成」で作成してください。x は -10 から 10 の範囲を動きます。

「x=~・y=~」のブロックにはパラメーター t を含む式をつなげてください。t がない場合は「変数の作成」で作成してください。t は -180 から 180 の範囲を動きます。

(3)の領域の内容をXMLで表したテキストが(7)の領域に表示されます。これをテキストエディタなどにコピー&ペーストして保存しておくと、これを読み出して(6)の領域にコピー&ペーストの後(4)のボタンを押すと(3)の領域を復元することができます。

(5)のリストを選択すると(6)の領域にサンプルのXMLが表示されます。その後(4)のボタンを押すと(3)の領域にサンプルが表示されます。