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

filter()函數用於將濾鏡應用於畫布。 p5.js具有幾個預設，可以使用不同強度的預設以獲得所需的效果。

用法:

filter( filterType, filterParam)

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

filterType:它是常數，它定義要用作過濾器的預設。它可以具有以下值：
- THRESHOLD:此模式用於根據可選的level參數中定義的閾值將圖像轉換為黑白圖像。級別值為0.0表示圖像將完全為黑色，而值1.0表示圖像將為白色。如果未指定任何值，則使用0.5。
- GRAY:此模式將圖像中的所有顏色轉換為等效的灰度。可選參數不用於此預設。
- OPAQUE:此模式將圖像的Alpha通道設置為完全不透明。可選參數不用於此預設。
- INVERT:此模式反轉圖像中的每個像素。該預設不使用可選參數。
- POSTERIZE:此模式將圖像的每個通道限製為值中指定的顏色數量。可選參數可以設置在2到255的範圍內，在較低的顏色範圍內效果最明顯。
- BLUR:此模式將高斯模糊應用於圖像。可選參數用於指定模糊的強度。如果未指定任何參數，則將應用半徑為1米的高斯模糊。
- ERODE:此模式會減少亮區。該預設不使用可選參數。
- DILATE:此模式會增加亮區。該預設不使用可選參數。
filterParam:它是每個過濾器唯一的數字，並影響過濾器的函數。它是一個可選參數。

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

範例1：

function preload() { 
  img = loadImage("sample-image.png"); 
} 
  
function setup() { 
  filterModes = [ 
    GRAY, 
    OPAQUE, 
    INVERT, 
    POSTERIZE, 
    BLUR, 
    ERODE, 
    DILATE, 
    BLUR, 
    THRESHOLD 
  ]; 
  
  index = 0; 
  currFilterMode = filterModes[index]; 
  
  createCanvas(500, 300); 
  textSize(20); 
  
  btn = createButton("Change filter"); 
  btn.position(30, 200); 
  btn.mousePressed(changeFilter); 
} 
  
function draw() { 
  clear(); 
  
  text('Click on the button to change the filter mode', 20, 20); 
  text("Current filter:" + currFilterMode, 20, 50); 
  
  image(img, 20, 80); 
  
  // Set the filter 
  filter(currFilterMode); 
} 
  
function changeFilter() { 
  if (index < filterModes.length - 1) 
    index++; 
  else
    index = 0; 
  currFilterMode = filterModes[index]; 
  
  console.log("Current filter:" + currFilterMode); 
}

輸出：
change-filter

範例2：

let level = 0; 
  
function preload() { 
  img = loadImage("sample-image.png"); 
} 
  
function setup() { 
  createCanvas(500, 300); 
  textSize(20); 
  
  valueSlider = createSlider(0, 3, 0, 0.1); 
  valueSlider.position(30, 200); 
  valueSlider.input(changeLevel); 
} 
  
function draw() { 
  clear(); 
  
  text('Move the slider to change the blur radius', 20, 20); 
  text("Current radius:" + level + "m", 20, 50); 
  
  image(img, 20, 80); 
  
  // Set the filter 
  filter(BLUR, level); 
} 
  
function changeLevel() { 
  level = valueSlider.value(); 
}

輸出：
slider-blur

在線編輯： https://editor.p5js.org/

環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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

相關用法

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