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軸の長さを短くしましょう。 また、グラフ画面上部のメニューバーから、「編集」>「目盛りの設定」メニューを選ぶと開かれる設定ウィンドウで、 不要な位置の目盛りを消したり、書式を調整する事ができます。 同様に「編集」>「範囲の設定」メニューから、X/Y/Z軸の範囲をきりのいい値など（任意）に調整できます。 さらに、「オプション」>「テッセレーション（曲面高画質化）」を有効にすると、粗かった曲面が綺麗になります（半面、描画は重くなります）。

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

実行結果のグラフ

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

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

スポンサーリンク

コード解説

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

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

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

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

ただ、今回のコードは、実は前回のサンプルコード 「 CSVファイルにデータを書き出し、読み込んで3次元のメッシュグラフを描く 」 をベースに書き加えたものになっています。z の値を求める過程を除けば、全体的な流れは同じです。 なので、全体的な説明は、前回の記事をご参照ください。

以下では、前回と大きく変わっている箇所のみを抜き出して見てみましょう。 それは、ファイルに座標点を書き出している、以下の部分です：

具体的にやっている事は、2重の for 文を使ったくり返し処理で、メッシュの格子点を辿りながら、座標値を書いていっています。 点の座標値は、writeln 関数で、ファイルに1行ずつ「x,y,z」の形で書き出しています。 メッシュの格子点を辿っていく順序は、先ほども掲載した、以下の図の通りです：

この事自体は前回と同じなのですが、 今回の内容が難しくなっているのは、z の値が、x と y だけで単純に書ける形にはなっていない事です。

具体的には、前回のコードでは、z は

のように x と y を使ってストレートに書ける形になっていましたが、今回のコードの z は

のように、θ（theta） と r を使って書き表されています。 これは、x-y 平面上での位置を示す際に、x と y の座標値の代わりに、 「その点と原点との距離」を r とし、「その点と原点を結ぶ線の角度が、X軸を 0 として、反時計回りにどれだけ回った角度か（偏角）」を θ とするものです：

高校数学で「極座標」というものを習った方は、 上のような図を見た記憶があるかもしれません。まさにあれ（の一種）です。

さっきのコード内の、z の値を求める直前にある以下のコードが、x と y の値から r とθの値を求める処理を行っています：

ところで、極座標の r や θ の値を、x-y 平面上で分布のように図示した事がある方はそう多くないかもしれません。 今回やっている事はその延長線上にあるので、まずは単純に z = r や z = θ としたグラフがどういう形をしているのかを見ておきましょう。

まずは z = r のグラフです。これはコード内で z の値を求めている所を以下のように書き換えれば OK です：

するとグラフは：

z = r のグラフ

このように、円錐を逆さにしたような形になります。r は原点からの距離なので、それを z 値つまり高さにすると、 原点から離れるほどに高くなるので、このような（逆）円錐の形になるわけですね。

続いて z = θ のグラフを見てみましょう。これはコード内で z の値を求めている所を以下のように書き換えれば OK です：

するとグラフは：

z = θ のグラフ

このように、原点を中心として、ぐるっと回る方向に少しずつ高くなっていく、滑らかな螺旋階段のような形になりましたね。 これもθの意味を考えると、イメージそのままの形です。 なお、このグラフはX軸をはさんで不連続になっているので、X軸のあたりに（緑色の）壁が立ちはだかって、見る角度によっては壁の向こうが透けていたりしていますが、 これは不連続な所にまたがって強引にメッシュを張って描画している都合なので、気にしないでください。

本題は、これらに sin などの三角関数を組み合わせたら、どのような形になるか、です。 まずは、素直にθを sin 関数で包んでみましょう。コード内で z の値を求めている所を以下のように書き換えます：

係数に 5 をかけているのは、その方がわかりやすいからです。この係数が、以下のグラフで放射状に延びる山脈の数になります。 グラフは：

z = sin( 5θ ) のグラフ

このように、放射状に山と谷が伸びるグラフになりました。 sin 関数は、例えば sin(a) なら a の増加に対して山と谷がくり返す形をしています。 z = θ のグラフの形は、先に見たような螺旋階段の形をしているので、それに sin 関数をかぶせると、 「sin 関数の引数が原点を回り込むように螺旋階段を登っていく」ので、結果として 「原点を回り込むように山と谷がくり返す」形になるわけです。

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

これに「ひねり」の効果を入れるには、放射方向に変化する値、つまり r を、sin 関数の引数に加えればOKです：

この結果のグラフは：

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

このように、放射方向にも sin 関数の引数が変化するようになった結果、山脈に「ひねり」が加わりましたね。

だいぶゴールの形に近づいてきました。 しかし気になるのは、原点付近でグラフの形が汚い事です。 実はこの関数は原点で不連続なので、格子状にメッシュを切っているいまの場合には、そこがギザギザして汚くなります （図では、関数の形を分かりやすくするためにメッシュを細かく刻んでいるので分かりづらいかもしれませんが、標準のもっと粗いメッシュではギザギザがはっきりわかります）。

という事で、できれば原点付近の振動を0に抑えて、ギザギザを見えなくしたい所です。 基本的に、どんな数でも（すごく特殊なものを除けば） 0 をかければ 0 になるので、 原点付近で 0 になるような関数を作って、先ほどのグラフの関数にかけてやればよさそうです。

で、そのような関数に何を用いるかですが、どうせなら sin を使いましょう。その引数に r を入れれば、原点 r = 0 で sin( r ) = 0 なので、 原点で 0 になります。その事自体は係数をかけても同じなので、実際には sin( 6r ) を使います。 このグラフを描くには、コード内で z の値を求めている所を以下のように書き換えれば OK です：

グラフは：

z = sin( 6r ) のグラフ

と、このように、原点付近で鋭く 0 に落ち込む形になりました。これなら先のグラフのギザギザを抑え込めそうです。

ついでに、リング状のピークを越えて、外周付近にも落ちていく形になっています。 実は係数の「 6 」は、ちょうどグラフの範囲の端でこんな感じに落ちていってくれるように微調整した結果の値です。 それによって、最終的なグラフの外周部が落ちて、花びらのような形になってくれます。

さて、最後です。この sin(6r) を、先ほどの sin(5θ+10r) にかけてやります：

最初に戻りましたね。やっと今回のコードの式に着地しました。 このグラフは既に見た通り：

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

お花のような形をしていますね。

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

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

3Dの迫力的なものは無くなってしまいますが、こちらのほうが、よりお花っぽいかもしれません。

コード内容は以上です。今回の過程が面白そうだと感じた方は、いろいろと改造して、ぜひ遊んでみてください！

追記： θを求める処理の修正と、z = θ のグラフの混乱しやすさに関する (筆者の個人的な) 注意点

2020年の10月23日に、この記事をご覧いただいた方から、θ の定義と実装が90度ずれているのでは？ というご指摘をいただき調べたところ、本当にお恥ずかしい限りで、確かにその通りでした…

そのため、コードのθ計算箇所を以下のように訂正し、図もプロットしなおしました。

ただ、この訂正作業の過程で、「 直球の『 z = θ のグラフ 』まで描いて掲載しておきながら、一体なぜその時点で気づかなかったのか？ 」 と原因を考えながらグラフを再プロットしていたところ、一つ気付いた事があります。

というのも、z = θ のグラフは不連続なので、どこかに切れ目が入るわけですが、ちょうどその切れ目の先端に座標軸ラベルの「 X 」または「 Y 」（90度間違っているかどうかで異なります）が位置します。 その様子が、グラフを手描きする際によく描く、「 座標軸を矢印で描いて、先端に X や Y などの軸名を書いたグラフ 」のように（少なくとも個人的には）誤認識しやすく、 そして誤認識すると、90度ずれたものが正しいように見えてしまうのです。

文章で書くとややこしいですが、図にすると以下の通りです：

上図の左は、z = θ のグラフを真上から見たものを平面にして表示したものです。右は、そのグラフを見た際に、頭の中での認識で起こったと思われる混乱を説明したものです。

実際に今回掲載しているコードは、実装時にノートに手描ききした θ や r の図などを見ながら作業を進めていたはずで、 その際に上のグラフの結果などを見て「 よし、 x 方向に切れ目が入っているから合っている 」などと納得してしまい、気付かなかったのだと思います。

本当にお恥ずかしい限りなのですが、もしかすると同じように誤認識しやすく混乱してしまうという方が結構居られるかもしれませんので、 実装/確認時の落とし穴として、自戒を込めて混乱の理由をここに書き留めておきます。

ライセンス

この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 氏の米国およびその他の国における商標または登録商標です。
• その他、文中に使用されている商標は、その商標を保持する各社の各国における商標または登録商標です。