[ 前へ | 目次 | 次へ ]
Now Loading...
ダウンロード
PC (※スマートフォンでは動きません) でダウンロードし、ZIPファイルを右クリックメニューから展開して、できたフォルダ内の「 VCSSL.bat(バッチファイル) 」または「 VCSSL.jar 」をダブルクリックなどで実行すると、プログラムが起動します。
» 詳しい使用方法や、エラーで展開できない際の対応方法などはこちら

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

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

使用方法

ダウンロードと展開(解凍)

まず、PC(スマホは未対応)で上の画面の「 ダウンロード 」ボタンを押してください。 するとZIP形式で圧縮されたファイルがダウンロードされるので、そのZIPファイルを右クリックして「すべて展開」や「ここに展開」などで展開(解凍)してください。 展開が成功すると、ZIPファイルと同じ名前のフォルダができ、その中にZIPファイルの中身が入っています。

» 展開がエラーで止まってしまう場合は…

なお、Linux® 等をご使用で、右クリックメニューから展開するとファイル名が文字化けしてしまう場合は、 コマンドライン端末でZIPファイルのある場所まで cd した上で「 unzip -O cp932 ZIPファイル名 」で展開してみてください。

プログラムの起動

Microsoft® Windows® をご使用の場合

上記の通りにZIPファイルを展開したフォルダ内にある、 「 VCSSL.bat(種類はバッチファイル) 」をダブルクリック実行してください。 もしプログラムの内容を書き変えながら使いたい場合は、代わりに「 VCSSL_Editor.bat 」を実行してください。

実行すると、最初にメモリー使用量や、(必要な場合のみ)Java®実行環境を自動で入手するか 等を尋ねられるので、適時答えると、プログラムが起動します。2回目以降はすぐに起動します。

※ ここで入手したJava®実行環境は、ZIPファイルを展開した中の「 jre 」フォルダ内にダウンロードされ、このプログラムの実行のみに使用されます。PC全体に影響する形でインストールされる事はありません。

Linux® 等やその他のOSをご使用の場合

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

java -jar VCSSL.jar
(プログラムの内容を書き変えながら使いたい場合は、代わりに VCSSL_Editor.jar を実行)

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

起動後

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

- file.csv -
-0.5,-0.5,0.71314
-0.495,-0.5,0.86855
-0.49,-0.5,0.83197
-0.485,-0.5,0.60763
-0.48,-0.5,0.2459

0.49,-0.5,-0.17524
0.495,-0.5,0.19631
0.5,-0.5,0.53528

-0.5,-0.495,0.85978
-0.495,-0.495,0.84293
-0.49,-0.495,0.63213

0.495,-0.495,-0.22203
0.5,-0.495,0.15287





-0.5,0.5,-0.53528
-0.495,0.5,-0.19631
-0.49,0.5,0.17524

0.495,0.5,-0.86855
0.5,0.5,-0.71314

これはカンマ記号「 , 」区切りで、 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のプログラミングガイド(無料)はこちらへ!

上記のコードはプログラミング言語VCSSLで記述されており、VCSSLのプログラミングガイドは下記で無料公開しています。 上記のコードを改造したい方や、新しいコードを書いてみたい方はぜひご活用ください!

ブラウザで読めるWeb版だけでなく、PDF版も無料で配布しています!

スタートアップガイド( プログラミングがはじめての方向け )
プログラミングの入門書に相当する内容です。プログラミングが初めての方はこちらがおすすめです。
即席ガイド( C系言語ユーザー向け )
C言語や C++ などのC系の言語を扱われている方が、即席でVCSSLを扱うための簡易ガイドです。
文法ガイド
VCSSLの文法や基本的な機能を淡々とまとめた、リファレンスマニュアル的な位置づけのガイドです。
GUI開発ガイド
ボタンや入力項目などのGUI部品が並ぶ、画面を備えたVCSSLプログラムを開発するためのガイドです。
2DCG開発ガイド
画面上や画像ファイルなどに、2次元的な描画を行うVCSSLプログラムを開発するためのガイドです。
3DCG開発ガイド
画面上や画像ファイルなどに、3次元的な描画を行うVCSSLプログラムを開発するためのガイドです。
標準ライブラリ 仕様書
コード内で呼び出される関数は、大半が標準ライブラリのものです。その詳細仕様を掲載しています。

ライセンス

このVCSSLコード( 拡張子が「.vcssl」のファイル )は実質的な著作権フリー(パブリックドメイン) である CC0 の状態で公開しています。 そのままでのご利用はもちろん、言語の種類を問わず、改造や流用などもご自由に行ってください。

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

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

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


スポンサーリンク



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

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、魔法陣のような3次元曲面のグラフを描画します。
[公式ガイドサンプル] CSVファイルにデータを書き出し&読み込んで、複雑な3次元曲面のグラフを描く(花形)

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、花の形の3次元曲面のグラフを描画します。
[公式ガイドサンプル] CSVファイルにデータを書き出し、読み込んで3次元のメッシュグラフを描く

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、3次元のメッシュグラフを描画します。
[公式ガイドサンプル] CSVファイルにデータを書き出し、読み込んで3次元の線グラフを描く

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、3次元の線グラフを描画します。
[公式ガイドサンプル] CSVファイルに書かれた数値データを、配列として読み込んで表示する

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルに記載された数値データを、読み込んで配列に格納してから、内容を画面に表示します
[公式ガイドサンプル] CSVファイルにデータを丸めて書き出し、読み込んで2次元グラフを描く

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを、丸め処理を行った上で書き出し、さらにそれを読み込んで、2次元グラフを描画します。
[公式ガイドサンプル] CSVファイルにデータを書き出し、読み込んで2次元グラフを描く

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、2次元グラフを描画します。
[公式ガイドサンプル] CSVファイルを読み込んで2次元グラフを描く

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルに記載されたデータを読み込み、2次元グラフを描画します。
スポンサーリンク

この階層の目次
[ 前へ | 目次 | 次へ ]
お知らせ

リニアンプロセッサー nano の先行開発版やソースコードリポジトリを公開
2019年04月16日 - オープンソースで開発中の小型プログラム関数電卓ソフト、「 リニアンプロセッサー nano 」の先行開発版やソースコードリポジトリを公開しました。概要と使用方法、ビルド方法などについて解説します。

各ソフトウェアの最新版を一括でリリース、OpenJDKのJava実行環境(JRE)に対応
2019年03月06日 - RINEARNでは3月6日に、主要なソフトウェアの最新版を一括でリリースしました。今回のアップデートには、以前お知らせした、OpenJDKで生成したJREへの対応が含まれています。その概要等をお知らせします。

次回のVCSSL 3.4.10において、関数1個の挙動に非互換な修正が適用されます
2019年02月12日 - VCSSLの次回の正式リリース版3.4.10において、これまでドキュメントと実際の挙動が異なっていた描画系の関数1個に、非互換な修正が適用されます。その詳細と、使用コードでの対応方法について解説します。

新着
[公式ガイドサンプル] 立体モデルを生成して3D空間に配置する

「VCSSL 3DCG開発ガイド」内のサンプルコードです。立体モデルを生成し、3D空間に配置します。
2019年05月21日
[公式ガイドサンプル] ポリゴンを生成して3D空間に配置する

「VCSSL 3DCG開発ガイド」内のサンプルコードです。立体の基本的な構成要素となるポリゴンを生成し、3D空間に配置します。
2019年05月20日
[公式ガイドサンプル] CSVファイルにデータを書き出し&読み込んで、複雑な3次元曲面のグラフを描く(魔法陣形)

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、魔法陣のような3次元曲面のグラフを描画します。
2019年05月17日
[公式ガイドサンプル] CSVファイルにデータを書き出し&読み込んで、複雑な3次元曲面のグラフを描く(花形)

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、花の形の3次元曲面のグラフを描画します。
2019年05月16日
[公式ガイドサンプル] CSVファイルにデータを書き出し、読み込んで3次元のメッシュグラフを描く

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、3次元のメッシュグラフを描画します。
2019年05月16日
開発元Twitterアカウント

スポンサーリンク