elk

3D CG, 画像処理などに興味があったりします。

Works

GLSLで遊ぶためのSandBoxツールを作るテスト(Ver 0.8)

## GLSLで遊ぶためのSandBoxツールを作るテスト(Ver 0.8) テキストエディタ(Codemirror)に入力したGLSLコードを実行します.今回はfragmentコードの編集機能に加えて Vertexコード編集機能を追加しています. ### 初期Uniform変数 下記のUniform変数をプリセットで用意しています. uniform float time; // 時間 uniform vec2 mouse; // マウス座標(エディタをOffしてください) uniform vec2 resolution; //解像度 [ShaderToy](https://www.shadertoy.com)などのコードを流用する場合は上記変数名に変更してください. 以下はShaderToyの場合 * iResulution -> resolution * iGlobalTime -> time * iMouse -> mouse ### 操作 テキストエディタにGLSLコードを入力してください。入力が終わったら`Rendering`ボタンを押下でレンダリング結果がその下に表示されます. `fullscreen`で作業したほうがレンダリング結果が見やすいです. コントローラでエディタ部分の透過度と表示On/Offができるようにしています. ユーザ定義のUniform変数を使えるようにしています.ただし`float`型のみで、値はUIから変更可能. 以下例. * 事前入力コードに`uniform float time_f;`を`uniform vec2 resolution;`の次に定義する. * コードで14行を次に変更. ``` float time = 10.0 * time_f * time * .1 + ((.25+.05*sin(time*.1))/(length(uv.xy)+.07))* 2.2; ``` * `Rendering`ボタン押下して,UI上で0.0〜1.0の範囲で変更すると、指定値でGLSLへ値が渡される. * `Fragment`ボタン押下で`Vertex`コードになり、編集できます. ####ギャラリー機能 編集したGLSLとそのレンダリング結果をサムネイルで表示できます. サムネイルのクリックでその時のGLSLコードをエディタに反映することができます.サムネイルのタイトルをinlineエディタで修正が可能. `Enter`キーで修正を確定. * ボタン説明 `Gallery` : レンダリング結果のサムネイルとGLSLコードを画面下部に表示. `Gallery Download`: `Gallery`で保存したサムネイル(レンダリング結果,GLSLコード)をJSON形式でダウンロード `Upload`: ファイル選択ボタン押下でダウンロードしておいたJSONファイルをアップロードし、Galleryに表示. `X`: サムネイルの削除(`Gallery`からも削除されます). ### 参考 デフォルトのGLSLは以下からコピペです. http://glsl.heroku.com/e#17890.0 ### 今後の予定(すぐにはできないかも...) * コードの整理 ### Known Issues * GLSLコンパイルエラー内容の行番号がずれている.内部で展開されたコードの行番号となっている. ### Three.js Tips * `.toDataURL`を使うには、Three.jsで`{preserveDrawingBuffer:true}`のオプションを使う. ### Change log * Ver 0.7(2014/7/25) Vertexコードを編集可能とした. * Ver 0.7(2014/7/7) サムネイルにタイトル表示追加.文字数が多い場合はtext-overflowを使って'…'を表示. サムネイルタイトルを編集可能に変更.詳細は[Simple inline editorを試してみるテスト](http://jsdo.it/elk/ksFP)参照. サムネイルの削除対応. サムネイルイメージの縮小.これにより`Gallery`のダウンロードサイズが縮小. * Ver 0.6(2014/7/3) ギャラリー機能追加 * Ver 0.5(2014/7/1) リサイズ時にUniform変数resolutionが反映されない問題を修正 WebGLのGLSLコンパイルエラー内容を表示できるようにした. * Ver 0.4(2014/6/30) マウスイベントに対応し、`uniform vec2 mouse`をGLSL中で使えるようにした. GLSL文法エラーなどでコンパイラでエラーが発生した場合は`WebGL Shader Result`に`Error`と表示. * Ver 0.3(2014/6/30) ユーザ定義のUniform変数を定義して、three.jsの`THREE.ShaderMaterial`APIのUniformsへの反映と dat.GUI上での変更ができるように変更.現在は`float`のみで、UI上は`0.0`〜`1.0`の範囲で変更可能. * Ver 0.2(2014/6/29) [背景をCanvasにする](http://qiita.com/mohayonao/items/e96e68aedc04a37f0c6d)を参考にエディタの背景を透かして表示できるように変更. [dat.GUI](https://code.google.com/p/dat-gui/)を使ってエディタのOn/Offと背景の透過度を変更できるようにした.

  • 1154
  • 0

JS正規表現による検索を試してみるツールをつくるテスト

##JS正規表現による検索を試してみるツールをつくるテスト 昔から、正規表現にハマる体質のため、正規表現が正しいか確認するツールが欲しいため、作ってみた. ###操作方法 * `正規表現式`入力欄に正規表現式(例:`d(b+)d`)を入力. * `フラグ`で正規表現のフラグを選択します.デフォルトは`なし` * `検索対象文字列`にテストしたい文字列を入力. * `検索`ボタンを押下で検索. ヒットした文字列は選択状態(背景が薄い灰色)となります.またヒットした行は行番号部分にアイコン(![](http://jsrun.it/assets/u/l/Q/I/ulQIl.png "Icon"))を表示. 現在は各行毎にマッチングを実行しています. ###プログラムの解説 * CodeMirror(ver 4.3) CodeMirrorを1行入力用にするには以下を参照。 http://stackoverflow.com/questions/13026285/codemirror-for-just-one-line-textfield addon/display/placeholder.jsによるプレースホルダを使っています.プレースホルダは、入力欄に関する何らかの情報を示すためのもので、 入力欄に入力されていない状態で表示される薄い色の文字列です. Gutter部にマークのアイコンを表示しています.`addSelection`と`makeMarker関数`で実現しています.

  • 1297
  • 0

HTML文書はどうなっているんだツールのテスト(Ver 0.1)

## HTML文書はどうなっているんだツールのテスト(Ver 0.1) 参考にしたいHTMLの構造把握とDOMの勉強がてら作成しました.DOMも`D3.js`も使い方がまだまだですが、少しずつ改善する予定. ### 操作 * テキストフィールドにHTMLソースを入力. * `可視化`ボタンを押下でTree Diagramが表示されます. ### プログラム補足 * Tree Diagramは`D3.js`を使用している.プログラム自体は下記参考のコードほぼ流用. * Text入力は`CodeMirror`を使用している. ### Known issues * ``があるとDOM解析できない. * 深い階層に対応していない. * ``などの空要素に未対応. ### 今後の予定 Known issuesへの対応. ### 使用スクリプトについて 使用スクリプトはGoogleの[ClosureCompiler](http://closure-compiler.appspot.com/home)を使用している. ### 参考 * [D3.js Tips and Tricks: Tree diagrams in d3.js]([http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html) * [D3.js チュートリアル: レイアウト – d3.tree.layoutでツリーを作る。](http://dataisfun.org/2014/05/28/?p=393) ### CodeMirror覚書 * サイズ指定は`setSize(width, height)`を使う.単位はpixel.

  • 1169
  • 0

DataStream.js 習作/Wiresharkデータの読み取り(Ver 0.2)

## DataStream.js 習作/Wiresharkデータの読み取り(Ver 0.2) DataStream.jsの習作としてWiresharkデータの読み取りを行います.現在は[Wiki/SampleCaptures](http://wiki.wireshark.org/SampleCaptures)のhttpデータを使用. ### TODO/Not Supported * IP.flagsの文字列変換 * IP.optionsの読み込み * TCP.optionsの読み込み * Payloadの読み込み ### 今後の予定 * パケット Arp * UIサポート CodemirrorによるWiresharkもどきUI ### JS Sequence Diagrams Tips 依存しているunderscore.jsとraphael.jsのバージョン依存があるため,デモサイトにあるバージョンで動かす必要がある. ### DataStream.js Tips * 構造体 読み取りは`readStruct`を使う.bit fieldには対応していないので、一旦メンバー として読み込んだものをコールバック関数(dataStream, struct)で読み込んで処理. ``` readRecordPacketTCP = this.ds.readStruct([ '_f1', 'uint16be', 'offset', function(ds, s) {return (((s._f1 & 0xf000) >>> 12) * 4);}, ]); ``` * エンディアン インスタンス生成時などで、`DataStream.BIG_ENDIAN`,`DataStream.LITTLE_ENDIAN`を指定する. ### Change logs * Ver 0.2 (2014/07/15) [JS Sequence Diagrams](http://bramp.github.io/js-sequence-diagrams/)を使ったシーケンスダイアグラム * Ver 0.1 (2014/07/13)

  • 2617
  • 0

DOMはどうなっているんだツールのテスト

## MutationObserverによるDOM操作監視 [HTML文書はどうなっているんだツールのテスト](http://jsdo.it/elk/4jEf)の第2弾です. JavaScriptからDOM操作することで,見栄えなどの変更をする方法が多く、__素人__としては ソースからだけでは理解ができない場合がある.そこでMutationObserverを使い、コードから 変更されたDOM内容を表示することで、どのタイミングでどうDOMを操作していることがわかる. ### 操作 テキストエディタにスクリプトを含むHTMLを入力します.ここでは、 [@IT>スキル創造研究室>DOMの基本を学ぼう(5):タグの属性値を操る (1/2)](http://www.atmarkit.co.jp/ait/articles/0806/05/news133.html)記載のサンプルを 予め入力しています.次に監視オプションをチェックボックスから入力してください. 予め入力したサンプルでは、`childList`,`attributes`,`subtree`をチェックします. 各チェックボックスの意味は[変更オブザーバー(msdn)](http://msdn.microsoft.com/ja-jp/library/ie/dn265034(v=vs.85).aspx) に記載があります.最後に`Preview/Observe`ボタンを押下します.右側のプレビューには 入力したHTMLのプレビューが表示されており、サンプルではボタン押下でClass属性を変更します. この状態でMutationObserverからコールバックが呼び出されて、変更内容を下部のエディタ 上に表示します. ### OSS * [CodeMirror](http://codemirror.net/) ### 関連リンク * 変更オブザーバー(msdn): http://msdn.microsoft.com/ja-jp/library/ie/dn265034(v=vs.85).aspx * [JavaScriptの動かないコード (中級編) iframe内にDOMアクセスできないエラー](http://d.hatena.ne.jp/language_and_engineering/20090207/p1) * [@IT>スキル創造研究室>DOMの基本を学ぼう(5):タグの属性値を操る (1/2)](http://www.atmarkit.co.jp/ait/articles/0806/05/news133.html)

  • 2206
  • 0

超簡易ダッシュボートを試すテスト(Ver 0.2)

## 超簡易ダッシュボートを試すテスト(Ver 0.2) [ハッシュ(BLAKE2s)とカスタムデータ属性](http://jsdo.it/elk/qdWW)の カスタムデータ属性に関連付けしたオブジェクトへアクセスする方法を使い、 簡単なダッシュボードを試す. 今回はWidgetぽい実装を追加しています. ### 操作 ボタン説明: `Add Widget(Simple Text)`:コンテンツに文字列だけ. `Add Widget(Rickshaw Sample)`:Rickshawのサンプル ダッシュボードボタン説明: `x`:ウィンドウの削除 ### 制約 * タイトル部分のアイコンは`x`(削除)のみ有効. ### 今後の予定 * D3.jsなどのコンテンツを格納できるようにする. ### Change log * Ver 0.2(2014/07/27) アイコンの追加、Rickshaw(Graph) Widget追加、

  • 882
  • 0

Skills

  • C
  • C++

Hot tags

Categories

HTML / CSS / JavaScript