textureWrap()

形状のuv座標がテクスチャの範囲を超えたときのテクスチャの動作を変更します。

texture()が機能するためには、形状の表面上の点を 画像のピクセルにマッピングする方法が必要です。rect()や box()などの組み込み形状には、すでに頂点に基づいた テクスチャマッピングがあります。vertex()で作成された カスタム形状には、uvコーディネートとして渡されるテクスチャマッピングが必要です。

vertex()の各呼び出しには、 vertex(x, y, z, u, v)のように5つの引数が必要です。これは座標 (x, y, z)の頂点を画像内の座標(u, v)のピクセルにマッピングします。 例えば、長方形の画像の角は、デフォルトで長方形の角にマッピングされます：

// 画像をテクスチャとして適用する texture(img);
// 長方形を描画する rect(0, 0, 30, 50); 

上のコードスニペットの画像のサイズが300 x 500ピクセルの場合、 同じ結果を次のように達成できます：

// 画像をテクスチャとして適用する texture(img);
// 長方形を描画する beginShape();
// 左上 // u: 0, v: 0 vertex(0, 0, 0, 0, 0);
// 右上 // u: 300, v: 0 vertex(30, 0, 0, 300, 0);
// 右下 // u: 300, v: 500 vertex(30, 50, 0, 300, 500);
// 左下 // u: 0, v: 500 vertex(0, 50, 0, 0, 500);
endShape(); 

textureWrap()は、テクスチャのuvがテクスチャを超えたときの動作を制御します。 これにより、タイリングなどの興味深い視覚効果を生み出すことができます。 例えば、上記のカスタム形状のu座標を画像の幅よりも大きくすることができます：

// 画像をテクスチャとして適用する texture(img);
// 長方形を描画する beginShape(); vertex(0, 0, 0, 0, 0);
// 右上 // u: 600 vertex(30, 0, 0, 600, 0);
// 右下 // u: 600 vertex(30, 50, 0, 600, 500);
vertex(0, 50, 0, 0, 500); endShape(); 

u座標の600は、テクスチャ画像の幅300よりも大きくなっています。 これにより興味深い可能性が生まれます。

最初のパラメータwrapXは、3つの定数のいずれかを受け入れます。 CLAMPが渡された場合（textureWrap(CLAMP)のように）、 テクスチャの端のピクセルが形状の端まで拡張されます。REPEATが渡された場合 （textureWrap(REPEAT)のように）、テクスチャは形状の端に達するまで 繰り返しタイル状に配置されます。MIRRORが渡された場合 （textureWrap(MIRROR)のように）、テクスチャは形状の端に達するまで 繰り返しタイル状に配置されますが、タイル間で向きが反転します。デフォルトでは、 テクスチャはCLAMPします。

2番目のパラメータwrapYはオプションです。これも同じ3つの定数 CLAMP、REPEAT、MIRRORを受け入れます。 これらの定数の1つが渡された場合（textureWRAP(MIRROR, REPEAT)のように）、 テクスチャは水平方向にMIRRORし、垂直方向にREPEATします。 デフォルトでは、wrapYはwrapXと同じ値に設定されます。

注意：textureWrap()はWebGLモードでのみ使用できます。