P5.js 日本語リファレンス(textureMode)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の textureMode関数を説明します。

textureMode()

説明文

テクスチャマッピングの座標空間を設定します。デフォルトのモードは IMAGE で画像の実際の座標を参照します。 NORMAL は 0 〜 1 の範囲の値の正規化された空間を指します。この関数は WEBGLモードでのみ機能します。
IMAGE では画像が 100 x 200 ピクセルの場合、画像を四角形の全体のサイズにマッピングするにはポイント (0,0)(100, 0)(100,200)(0,200) になります。 NORMAL での同じマッピングは(0,0)(1,0)(1,1)(0,1) になります。

構文

textureMode(mode)

パラメタ

• mode
  定数：IMAGE または NORMAL

例1

let img;

function preload() {
  //画像
  img = loadImage('image.png');
}

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  // 画像空間を(0, 0)-(1, 1) で指定する
  texture(img);
  textureMode(NORMAL);
  beginShape() ;
  vertex(-150, -200, 0, 0);
  vertex( 150, -200, 1, 0);
  vertex( 150,    0, 1, 1);
  vertex(-150,    0, 0, 1);
  endShape() ;

  // 画像空間を(0, 0)-(300, 200) で指定する
  texture(img);
  textureMode(IMAGE);
  beginShape() ;
  vertex(-150,   0,   0,   0);
  vertex( 150,   0, 300,   0);
  vertex( 150, 200, 300, 200);
  vertex(-150, 200,   0, 200);
  endShape() ;
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。