p5.js js textureWrap()用法及代碼示例

p5.js中的textureWrap()函數用於設置全局紋理環繞模式。當紋理超出其正常範圍時，可用於設置紋理的行為。它具有三種模式：

CLAMP模式使紋理邊的像素擴展到其極限。這是默認行為。
REPEAT(重複)模式使紋理平鋪重複直到達到極限。
MIRROR模式的工作方式與REPEAT類似，但它會反轉每個新圖塊上的紋理。

僅當紋理大小為2的冪時，REPEAT和MIRROR才起作用。更改將生效，直到對函數的下一次調用為止。

用法:

textureWrap(wrapX, [wrapY])

參數：該函數接受上述和以下所述的兩個參數：

wrapX:這是一個常數，它設置x方向上紋理環繞的模式。它可以具有值CLAMP，REPEAT或MIRROR。默認為CLAMP模式。
wrapY:這是一個常數，用於設置y方向上紋理環繞的模式。它可以具有值CLAMP，REPEAT或MIRROR。它是一個可選參數。

以下示例說明了p5.js中的textureWrap()函數：

範例1：使用CLAMP模式進行紋理環繞。

Javascript

let img; 
  
function preload() { 
  img = loadImage('images/gfg.jpg'); 
} 
  
function setup() { 
  createCanvas(300, 300, WEBGL); 
    
  // Set the texture wrapping mode 
  // to CLAMP 
  textureWrap(CLAMP); 
} 
  
function draw() { 
  background(0); 
  
  let dX = mouseX; 
  let dY = mouseY; 
  
  let u = lerp(1.0, 2.0, dX); 
  let v = lerp(1.0, 2.0, dY); 
  
  scale(width / 2); 
  
  texture(img); 
  
  beginShape(); 
  vertex(-1, -1, 0, 0, 0); 
  vertex(1, -1, 0, u, 0); 
  vertex(1, 1, 0, u, v); 
  
  vertex(1, 1, 0, u, v); 
  vertex(-1, 1, 0, 0, v); 
  vertex(-1, -1, 0, 0, 0); 
    
  endShape(); 
}

輸出：

範例2：使用MIRROR模式進行紋理環繞。

Javascript

let img; 
function preload() { 
  img = loadImage('images/gfg.jpg'); 
} 
  
function setup() { 
  createCanvas(300, 300, WEBGL); 
    
  // Set the texture wrapping mode 
  // to MIRROR 
  textureWrap(MIRROR); 
} 
  
function draw() { 
  background(0); 
  
  let dX = mouseX; 
  let dY = mouseY; 
  
  let u = lerp(1.0, 2.0, dX); 
  let v = lerp(1.0, 2.0, dY); 
  
  scale(width / 2); 
  
  texture(img); 
  
  beginShape(); 
  vertex(-1, -1, 0, 0, 0); 
  vertex(1, -1, 0, u, 0); 
  vertex(1, 1, 0, u, v); 
  
  vertex(1, 1, 0, u, v); 
  vertex(-1, 1, 0, 0, v); 
  vertex(-1, -1, 0, 0, 0); 
    
  endShape(); 
}

輸出：

範例3：使用REPEAT模式進行紋理環繞。

Javascript

let img; 
function preload() { 
  img = loadImage('images/gfg.jpg'); 
} 
  
function setup() { 
  createCanvas(300, 300, WEBGL); 
    
  // Set the texture wrapping mode 
  // to REPEAT 
  textureWrap(REPEAT); 
} 
  
function draw() { 
  background(0); 
  
  let dX = mouseX; 
  let dY = mouseY; 
  
  let u = lerp(1.0, 2.0, dX); 
  let v = lerp(1.0, 2.0, dY); 
  
  scale(width / 2); 
  
  texture(img); 
  
  beginShape(); 
  vertex(-1, -1, 0, 0, 0); 
  vertex(1, -1, 0, u, 0); 
  vertex(1, 1, 0, u, v); 
  
  vertex(1, 1, 0, u, v); 
  vertex(-1, 1, 0, 0, v); 
  vertex(-1, -1, 0, 0, 0); 
    
  endShape(); 
}

輸出：

參考：https://p5js.org/reference/#/p5/textureWrap

相關用法

注：本文由純淨天空篩選整理自_sh_pallavi大神的英文原創作品 p5.js textureWrap() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。