Sketch オブジェクト
jsui の全てのインスタンスは、変数 "sketch" にバインドされた Sketch オブジェクトのインスタンスを持っています。多くの場合、使う必要がある Sketch のインスタンスはこれだけです。しかし、スプライトのレンダリングを行なったり、画像の複数のレイヤを使ったり、画像のアルファチャンネルを作るための描画コマンドを使ったりしようとする場合、これらの処理のために追加のインスタンスを作ることができます。デフォルトでは、jsui オブジェクトのいずれかの関数が呼び出された時点で、既にコンテキストには変数 "sketch"にバインドされた Sketch オブジェクトのインスタンスががセットされています。
Sketch コンストラクタ
// デフォルトの幅と高さで、Sketch の新しいインスタンスを生成します。
var mysketch = new Sketch();
// 指定された幅と高さで、Sketch の新しいインスタンスを生成します。
var mysketch = new Sketch(width,height);
Sketch プロパティ
size (Array[2], get/set)
size[0] が幅、size[1] が高さになります。
fsaa (Boolean, get/set)
シーン全体のアンチエイリアシングのオン／オフを切り替えます。
Sketch メソッド
単純な線とポリゴンを描画するメソッド
move (delta_x, delta_y, delta_z)
描画位置を、現在の描画位置に delta_x、delta_y、delta_z アーギュメントの値を加算した位置に移動させます。
moveto (x, y, z)
描画位置を x、y、z アーギュメントによって指定された位置に移動させます。
point (x, y, z)
x、y、z アーギュメントによって指定された位置に点を描画します。このメソッドが呼び出された後、描画位置は x、y、z アーギュメントによって指定された位置に更新されます。
line (delta_x, delta_y, delta_z)
現在の描画位置から、現在の描画位置に delta_x、delta_y、delta_z アーギュメントの値を加算した位置まで直線を描画します。このメソッドが呼び出された後、描画位置は、現在の描画位置に delta_x、delta_y、delta_z アーギュメントの値を加算した位置に更新されます。
lineto (x, y, z)
現在の描画位置から、x、y、z アーギュメントによって指定された位置まで直線を描画します。このメソッドが呼び出された後、描画位置は x、y、z アーギュメントによって指定された位置に更新されます。
linesegment (x1, y1, z1, x2, y2, z2)
x1、y1、z1 アーギュメントによって指定された位置から、x2、y2、z2 アーギュメントによって指定された位置まで直線を描画します。このメソッドが呼び出された後、描画位置は x2、y2、z2 アーギュメントによって指定された位置に更新されます。
tri (x1, y1, z1, x2, y2, z2, x3, y3, z3)
x1、y1、z1 、 x2、y2、z2、 x3、y3、z3 アーギュメントで指定された３つの点によって、塗りつぶされた三角形を描画します。このメソッドが呼び出された後、描画位置は x3、y3、z3 アーギュメントによって指定された位置に更新されます。
frametri (x1, y1, z1, x2, y2, z2, x3, y3, z3)
x1、y1、z1 、 x2、y2、z2、 x3、y3、z3 アーギュメントで指定された３つの点によって、三角形の輪郭を描画します。このメソッドが呼び出された後、描画位置は x3、y3、z3 アーギュメントによって指定された位置に更新されます。
quad (x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
x1、y1、z1 、 x2、y2、z2、 x3、y3、z3、x4、y4、z4 アーギュメントによって指定された４つの点によって、塗りつぶされた四辺形を描画します。このメソッドが呼び出された後、描画位置は x4、y4、z4 アーギュメントによって指定された位置に更新されます。
framequad (x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
x1、y1、z1 、 x2、y2、z2、 x3、y3、z3、x4、y4、z4 アーギュメントによって指定された４つの点によって、四辺形の輪郭を描画します。このメソッドが呼び出された後、描画位置は x4、y4、z4 アーギュメントによって指定された位置に更新されます。
シェイプメソッド
circle (radius, theta_start, theta_end)
radius アーギュメントによって指定された半径で塗りつぶされた円を描きます。theta_start および theta_end アーギュメントが指定されている場合、全円の代わりに円弧（扇形）が描画されます。theta_start および theta_end アーギュメントは 度数(0 - 360)によって表されます。描画時の shapeorient、shapeslice、shapeprim の値が描画に影響を及ぼします。
cube (scale_x, scale_y, scale_z)
現在の描画位置を中心として、幅 2 * scale_x、高さ 2 * scale_y、奥行き 2 * scale_z の直方体を描画します。scale_y および scale_z アーギュメントが指定されない場合、scale_x と同じ値であると見なされます。描画時の shapeorient、shapeslice、shapeprim の値が描画に影響を及ぼします。
cylinder (radius1, radius2, mag, theta_start, theta_end)
現在の描画位置を中心としてシリンダを描画します。上端の半径はradius1 アーギュメント、下端の半径は radius2 アーギュメント、長さは、mag アーギュメントによって指定されます。theta_start および theta_end アーギュメントが指定されている場合、シリンダ全体の代わりにその一部分が描画されます。theta_start および theta_end アーギュメントは 度数(0 - 360)によって表されます。描画時の shapeorient、shapeslice、shapeprim の値が描画に影響を及ぼします。
ellipse (radius1, radius2, theta_start, theta_end)
radius1 と radius2 アーギュメントで指定された２つの半径によって、塗りつぶされた楕円を描画します。theta_start および theta_end アーギュメントが指定されている場合、全楕円の代わりに弧（扇形）が描画されます。theta_start および theta_end アーギュメントは 度数(0 - 360)によって表されます。描画時の shapeorient、shapeslice、shapeprim の値が描画に影響を及ぼします。
framecircle (radius, theta_start, theta_end)
radius アーギュメントによって指定された半径で円の輪郭を描きます。theta_start および theta_end アーギュメントが指定されている場合、全円の代わりに円弧が描画されます。 theta_start および theta_end アーギュメントは 度数(0 - 360)によって表されます。描画時の shapeorient、shapeslice、shapeprim の値が描画に影響を及ぼします。
frameellipse (radius1, radius2, theta_start, theta_end)
radius1 と radius2 アーギュメントで指定された２つの半径によって、楕円の輪郭を描画します。theta_start および theta_end アーギュメントが指定されている場合、全楕円の代わりに弧が描画されます。theta_start および theta_end アーギュメントは 度数(0 - 360)によって表されます。描画時の shapeorient、shapeslice、shapeprim の値が描画に影響を及ぼします。
plane (scale_x1, scale_y1, scale_x2, scale_y2)
現在の描画位置を中心として、上辺の幅 2 * scale_x1 左の高さ 2 * scale_y1 下辺の幅 2 * scale_x2、右側の高さ 2 * scale_y2 の平面を描画します。scale_y1 が指定されない場合、 scale_x1 と同じ値であると見なされます。scale_x2 と scale_y2 が指定されない場合、それぞれ scale_x1、scale_y1 と同じであると見なされます。描画時の shapeorient、shapeslice、shapeprim の値が描画に影響を及ぼします。
roundedplane (round_amount, scale_x, scale_y)
現在の描画位置を中心として、幅 2 * scale_x、高さ 2 * scale_y の 角が丸くなった平面を描画します。平面の丸められた部分のサイズは round_amount アーギュメントによって決定されます。scale_y が指定されない場合、scale_x と同じ値であると見なされます。描画時の shapeorient、shapeslice、shapeprim の値が描画に影響を及ぼします。
sphere (radius, theta1_start, theta1_end, theta2_start, theta2_end)
現在の描画位置を中心として、radius アーギュメントによって指定された半径によって球を描画します。theta1_start、theta1_end 、theta2_start、theta2_end アーギュメントが指定されている場合、全球の代わりに球の一部分が描画されます。theta1_start、theta1_end 、theta2_start、theta2_end アーギュメントは 度数(0 - 360)によって表されます。描画時の shapeorient、shapeslice、shapeprim の値が描画に影響を及ぼします。
torus (radius1, radius2, theta1_start, theta1_end, theta2_start, theta2_end)
現在の描画位置を中心として、radius1 アーギュメントで指定された大半径、radius2 アーギュメントで指定された小半径によってトーラスを描画します。theta1_start、theta1_end 、theta2_start、theta2_end アーギュメントが指定されている場合、トーラス全体の代わりにその一部分が描画されます。theta1_start、theta1_end 、theta2_start、theta2_end アーギュメントは 度数(0 - 360)によって表されます。描画時の shapeorient、shapeslice、shapeprim の値が描画に影響を及ぼします。
Sketch シェイプアトリビュートメソッド
shapeorient (rotation_x, rotation_y, rotation_z)
「シェイプ」の描画を行なうメソッドに対して、内部的に描画の回転を設定します。回転は、
x_rot、
y_rot､
rotation_x、
rotation_y、
rotation_z というアーギュメントで指定します。これは、torus(0.1) というようなシェイプメソッドに対して内部的に使用されますが、基本的に次のような OpenGL 呼び出しのセットと等しいものです。
with (sketch) {
glmatrixmode("modelview");
glpushmatrix();
glrotate(rotation_x,1.,0.,0.);
glrotate(rotation_y,1.,1.,0.);
glrotate(rotation_z,0.,0.,1.);
torus(0.5,0.2);
glpopmatrix();
}
shapeslice (slice_a, slice_b)
任意の「シェイプ」描画メソッドのレンダリングを行なう場合に使用するスライス数を設定します。slice_a と slice_b が大きな値になるほど、レンダリングされたシェイプのクオリティが向上し、小さな値になるほどパフォーマンスが改善されます。
shapeprim (draw_prim)
任意の「シェイプ」描画メソッドに対して、使用する OpenGL描画プリミティブを設定します。draw_prim アーギュメントとして取りうる値は、文字列 lines、line_loop、line_strip、points、polygon、quads、quad_grid、quad_strip、triangles、tri_grid、tri_fan、tri_strip。です。
Sketchテキストメソッド
font (fontname)
カレントのフォントを、fontname アーギュメントによって指定された名前のフォントに設定します。
fontsize (points)
フォントサイズを、points アーギュメントで指定されたサイズに設定します。サイズは、相対サイズではなく、絶対サイズの値で指定します。
gettextinfo (string)
カレントのフォントとフォントサイズを考慮し、与えられた文字列の高さと幅のスクリーン上の絶対座標値を格納した配列を返します。
text (string)
string アーギュメントで指定された文字列を、カレントのフォント、フォントサイズ、テキスト配置で、カレントの描画位置に描画します。テキストは厳密に言えば 2D であり、ワールド座標の変形は考慮しません。text メソッドを呼び出した後、x 軸のテキスト配置が「左」に設定されている場合は、文字列の終端位置のワールド座標を反映してカレントの描画位置が更新されます。x 軸のテキスト配置が「右」に設定されている場合は、文字列の終端位置のワールド座標を反映してカレントの描画位置が更新されます。x 軸のテキスト配置が「中央」に設定されている場合には、カレントの描画位置は変更されません。
textalign (align_x, align_y)
カレントの描画位置に描画されるテキストの配置を設定します。x 軸の配置として取り得る値は、"left"、"right"、"center" 、y 軸の配置として取りうる値は、"bottom"、"top"、"center" です。デフォルトの配置は、"left"、"bottom" です。
Sketch ピクセルメソッド
copypixels (source_object, destination_x, destination_y, source_x, source_y, width, height)
destination_x、destination_y アーギュメントで指定された位置に、ソースオブジェクトからピクセルをコピーします。ソースの x、y オフセットの初期値とコピーする矩形領域のサイズは、source_x、source_y、width、height アーギュメントで指定します。これらのアーギュメントがない場合には、x と y のオフセット値は 0、幅（width）と高さ（height）はソースイメージのサイズと同じであるとみなされます。ピクセルのスケーリング（拡大／縮小）はサポートされていません。Image または Sketch のインスタンスがソースオブジェクトとして使用できます。デスティネーション（コピー先）の sketch オブジェクトのブレンディングが使用可になっている場合、アルファブレンディングが実行され、カレントのアルファ色が全体に適用されます。copypixels メソッドは、glbindtexture() を使って平面にテクスチャリングを行なうことによって同じ結果を得る場合に比べて非常に速く、スケーリングや回転を必要としないイメージの描画手段として推奨される方法です。
depthatpixel (x, y)
与えられたスクリーンの絶対座標で、現在レンダリングされているピクセルの深度の値を返します。
freepeer ()
ネイティブな c ピアからイメージデータを開放します。これは、Javascript のガベージコレクタによって考慮されず、js が割り当てたメモリに基づいてガベージコレクタがガベージコレクションの実行を決定するまでの間に、多くのメモリを消費してします可能性があるものです。これを呼び出すと、この Sketch オブジェクトの他への利用ができなくなります。
getpixel (x, y)
指定された位置のピクセル値を格納した配列を返します。この配列では、値は RGBA の順になっています。すなわち、配列のインデックス 0 が赤、1 が 緑、2 が青、3 がアルファになります。色の値は 0. 〜 1. の浮動小数点数です。
setpixel (x, y, red, green, blue, alpha)
指定された位置のピクセルに値を設定します。色の値は 0. 〜 1. の浮動小数点数です。
screentoworld (x, y)
与えられたスクリーン上のピクセルの x, y, z ワールド座標値を格納した配列を返します。指定されるピクセル座標は、カメラから同じ depth（奥行き）を持った平面上の位置として表されます。このカメラの位置は 0.0.0.です。3つめの depth アーギュメント（奥行き）をオプションとして指定することができます。これは、ヒット検出や他のアプリケーションにとって有用です役に立つかもしれません。depth の値は通常 0.〜 1. の範囲で指定され、0 が手前のクリッピング平面、1 が奥のクリッピング平面を表します。与えられたワールド座標にもとづいてカメラからの depth（奥行き）を判定する場合には、worldtoscreen メソッドを使用することができます。また、与えられたスクリーン上の絶対座標で現在レンダリングされているピクセルの距離を判定する場合には、depthatpixel メソッドを使用することができます。
worldtoscreen (x, y, z)
与えられたワールド座標から算出した、スクリーン座標の x、y、depth（距離）を格納した配列を返します。depth（距離）の値は通常 0. 〜 1. の範囲で指定され、0 が手前のクリッピング平面、1 が奥のクリッピング平面を表します。
Sketch ストロークメソッド
beginstroke (stroke_style)
stroke_style アーギュメントによって指定されたスタイルによるストロークパスの定義を開始します。現在サポートされているストロークスタイルは、"basic2d" と "line"です。
endstroke ()
ストロークパスの定義を終了し、パスをレンダリング（描画）します。
strokeparam (parameter_name, parameter_values, ...)
parameter_name アーギュメントで指定されたパラメータのカレントの値を、parameter_values アーギュメント（複数の場合もあります）で指定された値に設定します。ストロークパス定義全体でグローバルに働クパラメータや、それぞれのポイントごとに異なるものがあります。
strokepoint (x, y, z)
x, y, z アーギュメントで指定された位置にアンカーポイントを定義します。
基本的な 2D ストロークスタイルのパラメータ
alpha
ポイント間で変化させることができます。値はアルファ値で指定されます。パス全体を通してアルファチャンネルだけが変化する場合に役に立ちます。
color
ポイント間で変化させることができます。値は赤、緑、青、アルファの値で指定されます。
order
グローバル。値は補間の次数で指定されます。デフォルトの次数は 3 で、バイキュービック法による補間を行ないます。
outline
グローバル。値はオン／オフ（0/1）で指定されます。デフォルトは 1 です。
outcolor
ポイント間で変化させることができます。値は赤、緑、青、アルファの値で指定されます。outcolor が指定されない場合、カレントの色を使用するとみなされます。
scale
ポイント間で変化させることができます。値は幅（width）として指定されます。この値はストロークパスの広がりの幅をコントロールします。
slices
グローバル。値は、曲線部分ごとのスライス数として指定されます。デフォルトは 20 です。
ラインストロークスタイルのパラメータ
alpha
ポイント間で変化させることができます。値はアルファ値で指定されます。パス全体を通してアルファチャンネルだけが変化する場合に役に立ちます。
color
ポイント間で変化させることができます。値は赤、緑、青、アルファの値で指定されます。
order
グローバル。値は補間の次数で指定されます。デフォルトの次数は 3 で、バイキュービック法による補間を行ないます。
slices
グローバル。値は、曲線部分ごとのスライス数として指定されます。デフォルトは 20 です。
Sketch セットアップメソッド
default2d ()
default2d() メソッドによって、グラフィックス環境（グラフィックス・ステート）のプロパティを、2D グラフィックスに適したデフォルトの状態に簡単に設定することができます。
default3d()より後に
default2d() が呼び出されていた場合、
jsui オブジェクトのサイズ変更が行なわれるたびに、これが毎回呼び出されます。このメソッドは、基本的に次の呼び出しのセットと同じものです。
with (sketch) {
glpolygonmode("front_and_back","fill");
glpointsize(1.);
gllinewidth(1.);
gldisable("depth_test");
gldisable("fog");
glcolor(0.,0.,0.,1.);
glshademodel("smooth");
gldisable("lighting");
gldisable("normalize");
gldisable("texture");
glmatrixmode("projection");
glloadidentity();
glortho(-aspect, aspect, -1, 1, -1,100.);
glmatrixmode("modelview");
glloadidentity();
glulookat(0.,0.,2.,0.,0.,0.,0.,0.,1.);
glclearcolor(1., 1., 1., 1.);
glclear();
glenable("blend");
glblendfunc("src_alpha","one_minus_src_alpha");
}
default3d ()
default3d() メソッドによって、グラフィックス環境（グラフィックス・ステート）のプロパティを、3D グラフィックスに適したデフォルトの状態に簡単に設定することができます。
default2d() より後に
default3d() が呼び出されていた場合、
jsui オブジェクトのサイズ変更が行なわれるたびに、これが毎回呼び出されます。このメソッドは、基本的に次の呼び出しのセットと同じものです。
with (sketch) {
glpolygonmode("front_and_back","fill");
glpointsize(1.);
gllinewidth(1.);
glenable("depth_test");
glenable("fog");
glcolor(0.,0.,0.,1.);
glshademodel("smooth");
gllightmodel("two_side", "true");
glenable("lighting");
glenable("light0");
glenable("normalize");
gldisable("texture");
glmatrixmode("projection");
glloadidentity();
gluperspective(default_lens_angle, aspect, 0.1, 100.);
glmatrixmode("modelview");
glloadidentity();
glulookat(0.,0.,2.,0.,0.,0.,0.,0.,1.);
glclearcolor(1., 1., 1., 1.);
glclear();
glenable("blend");
glblendfunc("src_alpha","one_minus_src_alpha");
}
ortho3d ()
ortho3d()メソッドによって、グラフィックス環境（グラフィックス・ステート）のプロパティを、正投影（すなわち、カメラからの距離によってオブジェクトの大きさが影響を受けない投影）を用いた3D グラフィックスに適したデフォルトの状態に簡単に設定することができます。
default2d()や
default3d()より後に
ortho3d()が呼び出されていた場合、jsui オブジェクトのサイズ変更が行なわれるたびに、これが毎回呼び出されます。このメソッドは、基本的に次の呼び出しのセットと同じものです。
with (sketch) {
glpolygonmode("front_and_back","fill");
glpointsize(1.);
gllinewidth(1.);
glenable("depth_test");
glenable("fog");
glcolor(0.,0.,0.,1.);
glshademodel("smooth");
gllightmodel("two_side", "true");
glenable("lighting");
glenable("light0");
glenable("normalize");
gldisable("texture");
glmatrixmode("projection");
glloadidentity();
glortho(-aspect, aspect, -1, 1, -1,100.);
glmatrixmode("modelview");
glloadidentity();
glulookat(0.,0.,2.,0.,0.,0.,0.,0.,1.);
glclearcolor(1., 1., 1., 1.);
glclear();
glenable("blend");
glblendfunc("src_alpha","one_minus_src_alpha");
}
Sketch OpenGLメソッド
訳注：この章の以降の部分は原書でもメソッド名とアーギュメント（引数名）のみとなっています。
glbegin (draw_prim)
glbindtexture (image_object) 注: このメソッドでは glenable(texture) も呼び出します
glblendfunc (src_function, dst_function)
glclear ()
glclearcolor (red, green, blue, alpha)
glcleardepth (depth)
glclipplane (plane, coeff1, coeff2, coeff3, coeff4)
glcolor (red, green, blue, alpha)
glcolormask (red, green, blue, alpha)
glcolormaterial (face, mode)
glcullface (face)
gldepthmask (on)
gldepthrange (near, far)
gldisable (capability)
gldrawpixels (image)
gledgeflag (on)
glenable (capability)
glend ()
glfinish ()
glflush ()
glfog (parameter_name, value)
glfrustum (left, right, bottom, top, near, far)
glhint (target, mode)
gllight (light, parameter_name, value)
gllightmodel (parameter_name, value)
gllinestipple (factor, bit-pattern)
gllinewidth (width)
glloadidentity ()
glloadmatrix (matrix_array)
gllogicop (opcode)
glmaterial
glmatrixmode (mode)
glmultmatrix (matrix_array)
glnormal (x, y, z)
glortho (left, right, bottom, top, near, far)
glpointsize (size)
glpolygonmode (face, mode)
glpolygonoffset (factor, units)
glpopattrib ()
glpopmatrix ()
glpushattrib ()
glpushmatrix ()
glrect (x1, y1, x2, y2)
glrotate (angle, x, y, z)
glscale (x_scale, y_scale, z_scale)
glscissor (x, y, width, height)
glshademodel (mode)
gltexcoord (s, t)
gltexenv (parameter_name, val1, val2, val3, val4)
gltexgen (coord, parameter_name, val1, val2, val3, val4)
gltexparameter (parameter_name, val1, val2, val3, val4)
gltranslate (delta_x, delta_y, delta_z)
glulookat (eye_x, eye_y, eye_z, center_x, center_y, center_z, up_x, up_y, up_z)
gluortho2d (left, right, bottom, top)
gluperspective (fovy, aspect, near, far)
glvertex (x, y, z)
glviewport (x, y, width, height)