<?xml version="1.0" encoding="UTF-8"?>
<X3D>
<Scene>
<Viewpoint/>
<NavigationInfo
type='"EXAMINE"'
/>
<!-- 箱 -->
<Group>
<Shape>
<Appearance>
<PixelTexture DEF='PT'/>
<Material diffuseColor='1 1 1'/>
</Appearance>
<Box size='5 5 5'/>
</Shape>
<TouchSensor DEF='ThS'/>
</Group>
<!-- 線描画スクリプト -->
<Script DEF='Sc'>
<field accessType='inputOnly' type='SFVec2f' name='set_hitTexCoord'/>
<field accessType='inputOnly' type='SFBool' name='penUpDowned'/>
<field accessType='outputOnly' type='SFImage' name='image'/>
<field accessType='initializeOnly' type='SFInt32' name='dt' value='128'/>
<field accessType='initializeOnly' type='MFInt32' name='ary'/>
<field accessType='initializeOnly' type='SFVec2f' name='hitPoint' value='0 0'/>
<field accessType='initializeOnly' type='SFVec2f' name='startPoint' value='0 0'/>
<field accessType='initializeOnly' type='SFInt32' name='penColor' value='16776960'/>
<field accessType='initializeOnly' type='SFInt32' name='bgColor' value='255'/>
<field accessType='initializeOnly' type='SFBool' name='penDownd' value='FALSE'/>
<field accessType='initializeOnly' type='SFFloat' name='segmentLength' value='0.02'/>
<![CDATA[ecmascript:
// SFVec2fオブジェクトで示されたテクスチャー座標に penColor を適応させる関数。
function pset(v) {
var tv = v.multiply ( dt );
var s = Math.floor( tv.x );
var t = Math.floor( tv.y );
s = Math.max ( 0, Math.min( dt - 1, s ));
t = Math.max ( 0, Math.min( dt - 1, t ));
ary[ s + t * dt ] = penColor;
}
// SFVec2fオブジェクトで示された2点 v0 と v1 との間に線を描くための関数。
// テクスチャーの縦横のピクセル数は同じである必要がある。
function lineset(v0,v1) {
// v0 から v1 へのベクトルを v01 とする。
var v01 = v1.subtract( v0 );
// v0 と v1 との距離を v01len とする。
var v01len = v01.length();
if ( v01len == 0 ) {
// v0 と v1 との距離が 0 なら、v0 に点を描く。
pset( v0 );
}
else {
// v0 と v1 との距離が 0 ではないなら、v0 から v1 まで1ピクセル間隔で点を打つ。
// v01 と同じ向きで、長さが1ピクセル分のベクトルを dv とする。
var dv = v01.normalize().divide( dt );
// v0 のコピーである v2 を新規生成する。
var v2 = new SFVec2f ( v0.x, v0.y );
// v0 と v1 との距離を dv の長さで割ることにより、描く点の個数 n を求める。
var n = v01len / dv.length();
// v2 の場所に点を描き、v2 をdv（1ピクセルの距離）だけ移動させる。
// それを n 回繰り返すことにより、v0 と v1 とを繋ぐ線を描く。
for ( var i = 0; i <= n; i++ ) {
pset ( v2 );
v2 = v2.add ( dv );
}
}
}
function initialize () {
var px = dt * dt;
// テクスチャー全体を bgColor で塗りつぶして、ary を初期化する。
for ( var i = 0; i < px; i++ ) ary[i] = bgColor;
image = new SFImage ( dt, dt, 3, ary );
}
function set_hitTexCoord (v) {
// キャンバス上のポインタが触れている座標を hitPoint にセットする。
hitPoint = v;
// キャンバス上でポインタのボタンが押されており、尚かつ始点からのカーソルの移動距離が
// segmentLength よりも長いならば、線分を描く。
if ( penDownd && v.subtract(startPoint).length() >= segmentLength ) {
lineset( startPoint, v );
image = new SFImage ( dt, dt, 3, ary );
// 新しい線分の始点として現在のポインタ座標をセットする。
startPoint = v;
}
}
function penUpDowned (active) {
// キャンバス上でポインタのボタンが押されたならば penDownd を true、
// 離されたたなら penDownd を false にセットする。
penDownd = active;
if (active) {
// キャンバス上でポインタのボタンが押されたときの処理。
// キャンバス上の押された座標を線分の始点とする。
startPoint = hitPoint;
}
else {
// キャンバス上でポインタのボタンが離されたときの処理。
// 始点からキャンバス上の離された座標までの線分を描く。
lineset( startPoint, hitPoint );
image = new SFImage ( dt, dt, 3, ary );
}
}
]]>
</Script>
<ROUTE fromNode='Sc' fromField='image' toNode='PT' toField='image'/>
<ROUTE fromNode='ThS' fromField='hitTexCoord_changed' toNode='Sc' toField='set_hitTexCoord'/>
<ROUTE fromNode='ThS' fromField='isActive' toNode='Sc' toField='penUpDowned'/>
</Scene>
</X3D>