Now Loading...

PC （※スマートフォンでは動きません） でダウンロードし、ZIPファイルを右クリックメニューから展開して、できたフォルダ内の「 VCSSL.bat（バッチファイル） 」をダブルクリックすると起動します。 Linux等では「 VCSSL.jar 」をコマンド実行してください。
» 詳しい使用方法や、エラーで展開できない際の対応方法などはこちら

[公式ガイドサンプル] CSVファイルにデータを書き出し&読み込んで、複雑な3次元曲面のグラフを描く（魔法陣形）

このプログラムは、 「 VCSSLスタートアップガイド 」 の 「 CSVファイルとグラフの描画 」 の回に登場するサンプルコードです。 ここでは、そのサンプルコードを実行環境ごとダウンロードして、実際に実行してみる事ができます。 プログラミングガイド的な詳しい解説については、上記ページをご参照ください。

スポンサーリンク

使用方法

ダウンロードと展開（解凍）

まず、PC（スマホは未対応）で上の画面の「 ダウンロード 」ボタンを押してください。 するとZIP形式で圧縮されたファイルがダウンロードされます。

その後、ZIPファイルを右クリックして「すべて展開」や「ここに展開」などで展開（解凍）してください。 展開が成功すると、ZIPファイルと同じ名前のフォルダができ、その中にZIPファイルの中身が入っています。

» 展開がエラーで止まってしまう場合や、ファイル名が文字化けしてしまう場合は…

プログラムの起動

Windows をご使用の場合

上記でZIPファイルを展開したフォルダ内にある、以下のバッチファイルをダブルクリック実行してください：

もしプログラムを書き変えながら使いたい場合は、代わりに「 VCSSL_Editor__プログラム編集はこちら.bat 」を実行してください。

正常に起動できると、初回のみ、Java実行環境を入手するか等を尋ねられるので、適時答えて済ませると、プログラムが起動します。 2回目以降はすぐに起動します。

» うまく起動できずにエラーになってしまう場合は…

Linux 等をご使用の場合

ZIPファイルを展開したフォルダ内へコマンドライン端末で cd して、以下の通り入力して実行してください：

» javaコマンドが使用できない等のエラーが表示される場合は…

起動後

起動すると、まず同じフォルダ内に「 file.csv 」という名前のCSVファイルが作成され、 その中に以下の内容が書き出されます（メモ帳などのテキストエディタで開いてみてください）：

これはカンマ記号「 , 」区切りで、 3列（※列は縦の並び）のデータが記載されているものです。

曲面グラフを描くためのファイルの形式は、メッシュグラフを描く場合と同じで、 1行（※行は横の並び）がメッシュの格子点の1点に対応していて、左列の値がX座標、中央の列の値がY座標、右列の値がZ座標とみなされます。 そして各格子点（各行）は、以下の図の順序で辿って書き出されています：

このあたりの説明は、このサンプルコードの掲載元である 「 VCSSLスタートアップガイド 」 の 「 CSVファイルとグラフの描画 」 の回をご参照ください。

上記のファイルが書き出された直後に、自動でグラフソフトが起動し、下図の3次元グラフが描画されます：

実行結果のグラフ

ファイルへのデータの書き出しが完了すると、グラフ画面が立ち上がり、3次元グラフが描画されます。

これは、上で書き出されたCSVファイル「 file.csv 」の中に記載されたデータが、3次元グラフとしてプロットされたものです。 ただ、今回のグラフはかなり形が込み入っているのですが、標準ではそれが上の通りZ方向にだいぶ引き延ばされて、意味不明になってしまっています。 なので、画面左に並ぶバーをスライドさせて、Z軸の長さを短くしましょう。すると、グラフが平べったくなります。

また、グラフ画面上部のメニューバーから、「編集」>「目盛りの設定」メニューを選ぶと開かれる設定ウィンドウで、 不要な位置の目盛りを消したり、書式を調整する事ができます。 さらに、「オプション」>「テッセレーション（曲面高画質化）」を有効にすると、粗かった曲面が綺麗になります（半面、描画は重くなります）。

上記のように色々と細かい設定を調整した結果が下図です：

実行結果のグラフ

形を見やすくなるように、設定を調整した結果です。

魔法陣のような、細かく複雑なグラフの形が、ちゃんと見やすくなりましたね。 設定は、「ファイル」>「設定の保存」メニューで保存する事もできます。 設定ファイルは、デフォルトの場所に保存すると次回から自動で読み込まれますが、 恐らく適切な設定はプログラムごとに違うので、別の場所に保存しておいて、プログラム内から setGraph3DConfigurationFile 関数で指定して読み込む事も可能です。

スポンサーリンク

コード解説

このプログラムのコードはVCSSLで記述されています。

内容を書き変えて改造したい場合には、 プログラムのコード「 Graph3DMagicCircle.vcssl 」をテキストエディタで開いて改造してください。 スクリプト言語なので、コンパイラなどの別ソフトは不要で、コードを書き換えるだけでOKです。 VCSSLはC系の単純な文法の言語なので、C言語などに触れた事のある方なら簡単に読めると思います。

コード全体は以下の通りです。

以上です。70行程度のコードですね。 長さ自体はそう長くはないですが、中で行っている事の意味は少しややこしいかもしれません。

ただ、今回のコードは、実は前回のサンプルコード 「 CSVファイルにデータを書き出し&読み込んで、複雑な3次元曲面のグラフを描く 」 をベースに、ほんの一部だけ書きかえたものになっています。なので、全体的な説明は、前回の記事をご参照ください。 以下では、前回と違う箇所と、それがどう寄与しているかについて、クローズアップして見ていきます。

さて、前回と変わっているのは、 メッシュの刻みを細かくしたのを除けば、z の値を求める行だけです。その行は、前回のコードでは以下の内容でした：

それが今回は、以下のようになっています：

つまり、最初の sin 関数の引数の中に入っていた「 10r 」の項が、「 10 sin( 14r ) 」になっただけです。 それだけで、前回からこんなに一気に形が変化するのは、結構な驚きではないですか？ 以下では、そうなる理由を、直感的なイメージ程度で軽く追いかけてみましょう。

といっても、話の大部分は前回と同じなので、まずは 前回のコード解説 の説明をご参照ください。それで、途中から分岐します。 どこかというと、 z = sin( 5θ ) のグラフの所からです。このグラフは：

z = sin( 5θ ) のグラフ

のように、放射状に山と谷が伸びる形になっています。 この山と谷は、 sin 関数が、例えば sin(a) なら a の増加に対して山と谷がくり返す形をしている事に起因しています。 そして z = θ のグラフの形は、原点を中心として、回る（偏角が増加する）ごとに登っていく、滑らかな螺旋階段のような形をしています （前回参照）。 従って、それを sin 関数の引数に入れると、 「sin 関数の引数が原点を回り込むように螺旋階段を登っていく」ので、結果として 「原点を回り込むように山と谷がくり返す」形になるわけです。

一方、原点から放射方向にはθの値は一定なので、それを引数とする sin 関数でもやはり同様で、放射方向には高さが一定になっています。 なので、山と谷が、放射方向に山脈のようにまっすぐ伸びているわけです。

これに「ひねり」の効果を入れるためのステップとして、 前回は放射方向に変化する寄与として、単純に r に係数をかけただけの項を、sin 関数の引数に加えました。 具体的には、z = sin( 5θ + 10 r ) としました。 結果、グラフは下図のようになるのでした：

z = sin( 5θ + 10r ) のグラフ

このように、sin 関数の引数に、放射方向に変化する値を入れる事によって、グラフに「ひねり」が加わりました。 いま加えた「 10 r 」の項は、原点からの距離に比例する、つまり原点からの距離に対して「一定のペースで増加する」項になっています。 その結果、グラフも、原点からの距離に対して「一定のペースでひねられる」形になっています。

それなら、sin 関数の引数に、原点からの距離に対して「一定じゃないペースで変化する」項を入れたら、 グラフも「一定じゃないペースでひねられる」ような気がしませんか？

これは実際にその通りで、それこそが今回の変更点の狙いです。つまり、sin 関数の引数内で、 放射方向の変化を司る量を、「 10r 」から「 10 sin( 14 r ) 」にする事で、 原点からの距離に関して振動するようにしたわけです。

実際に z = sin( 5θ + 10 sin(14r) ) のグラフを描いてみると：

z = sin( 5θ + 10 sin(14r) ) のグラフ

このように、原点から離れるごとに、「ひねり」量が右巻きになったり左巻きになったりと、振動するようになります。

あとは前回のラスト同様、不連続な原点を抑え込みたいので、原点で 0 になる sin(6r) を全体にかけると：

z = sin( 5θ + 10 sin(14r) ) sin(6r) のグラフ

と、これで今回のグラフの完成です。最後にかけた sin(6r) は、原点以外でも値が 0 になる領域がリング状に存在するため、 そのリング付近でグラフの振幅も小さく抑えられて（緑色になって）います。その結果、赤と青が円形領域に収まって、 より魔法陣っぽく見えませんか？

ちなみに、グラフ画面上部のメニューバーから、「オプション」>「平面化」を有効にすると、 下図のようにグラフを平面にする事ができます：

z = sin( 5θ + 10 sin(14r) ) sin(6r) のグラフ（平面化）

いっそう魔法陣っぽいですね！ 何かを召喚できそうです。

コード内容は以上です。前回に引き続き、あれこれ考えながら関数をひねっていく過程を面白そうだと感じた方は、いろいろと改造して、ぜひ遊んでみてくださいね！

ライセンス

このVCSSL/Vnanoコード（ 拡張子が「.vcssl」や「.vnano」のファイル ）は実質的な著作権フリー（パブリックドメイン) である CC0 の状態で公開しています※。 記事中にC言語/C++/Java言語などでのサンプルコードが掲載されいてる場合は、それらについても同様です。 そのままでのご利用はもちろん、改造や流用などもご自由に行ってください。

※ ただし、このコードの配布フォルダ内には、ダウンロード後すぐに実行できるように、 VCSSLの実行環境も同梱されており、そのライセンス文書は「 License 」フォルダ内に同梱されています （要約すると、商用・非商用問わず自由に使用できますが、使用の結果に対して開発元は一切の責任を負いません、といった具合の内容です）。 配布フォルダ内の各構成物の一覧やライセンスについては「 ReadMe_使用方法_必ずお読みください.txt 」をご参照ください。

※ Vnano の実行環境については、別途スクリプトエンジンのソースコードも一般公開しており、 何らかのソフトウェア内に組み込んでご利用いただく事も可能です。詳細はこちらをご参照ください。

この記事中の商標などについて

• OracleとJavaは、Oracle Corporation 及びその子会社、関連会社の米国及びその他の国における登録商標です。文中の社名、商品名等は各社の商標または登録商標である場合があります。
• Windows は、米国 Microsoft Corporation の米国およびその他の国における登録商標です。この記事は独立著作物であり、Microsoft Corporation と関連のある、もしくはスポンサーを受けるものではありません。
• Linux は、Linus Torvalds 氏の米国およびその他の国における商標または登録商標です。
• その他、文中に使用されている商標は、その商標を保持する各社の各国における商標または登録商標です。