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

p5.js中的ambientMaterial()函數用於為具有給定顏色的幾何圖形創建環境材料。環境材料用於定義對象在任何光線下反射的顏色。如果將環境材料設置為僅反射紅色，並且光僅反射藍色，則對象將不反射任何光。

用法:

ambientMaterial( v1, [v2], [v3] )

ambientMaterial( color )

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

v1:它是一個數字，用於確定相對於當前顏色範圍的灰度值或紅色或色調值。
v2:它是一個數字，用於確定相對於當前顏色範圍的綠色或飽和度值。它是一個可選參數。
v3:它是一個數字，用於確定相對於當前顏色範圍的藍色或亮度值。它是一個可選參數。
color:它是一個p5.Color或顏色字符串，用於定義環境材料的顏色。

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

範例1：

let newFont; 
let currentLightColor = "red"; 
let currentAmbientColor = "red"; 
  
function preload() { 
  newFont = loadFont('fonts/Montserrat.otf'); 
} 
  
function setup() { 
  createCanvas(600, 300, WEBGL); 
  textFont(newFont, 16); 
  
  // Create a selector for selecting 
  // the ambient material color 
  materialColorSel = createSelect(); 
  materialColorSel.position(30, 70); 
  materialColorSel.option('red'); 
  materialColorSel.option('green'); 
  materialColorSel.option('blue'); 
  materialColorSel.changed(() => { 
    currentLightColor = materialColorSel.value(); 
  }); 
  
  // Create a selector for selecting 
  // the directional light color 
  lightColorSel = createSelect(); 
  lightColorSel.position(30, 120); 
  lightColorSel.option('red'); 
  lightColorSel.option('green'); 
  lightColorSel.option('blue'); 
  lightColorSel.changed(() => { 
    currentAmbientColor = lightColorSel.value(); 
  }); 
} 
  
function draw() { 
  background('white'); 
  fill('black'); 
  
  text("Select an option below to set the light "
        + "and ambient material color", -285, -125); 
  text("Select directional light color", -285, -100); 
  text("Select ambient material color", -285, -50); 
  shininess(10); 
  noStroke(); 
  
  // Set the ambient material to the selected color 
  ambientMaterial(currentAmbientColor); 
  
  // Set the directional to the selected color 
  directionalLight(color(currentLightColor),  
               height / 2, width / 2, -250); 
  
  // Draw the sphere 
  translate(100, 0, 0); 
  sphere(100); 
  translate(-100, 0, 0); 
}

輸出：
ambient-single-color

範例2：

let newFont; 
let currentLightColor = "yellow"; 
let hasRed = false; 
let hasGreen = false; 
let hasBlue = false; 
  
function preload() { 
  newFont = loadFont('fonts/Montserrat.otf'); 
} 
  
function setup() { 
  createCanvas(600, 300, WEBGL); 
  textFont(newFont, 16); 
  
  // Create 3 checkboxes for mixing 3 colors 
  redCheckbox = createCheckbox('Red', false); 
  redCheckbox.position(30, 70); 
  redCheckbox.changed(() => hasRed = !hasRed); 
  
  greenCheckbox = createCheckbox('Green', false); 
  greenCheckbox.position(90, 70); 
  greenCheckbox.changed(() => hasGreen = !hasGreen); 
  
  blueCheckbox = createCheckbox('Blue', false); 
  blueCheckbox.position(170, 70); 
  blueCheckbox.changed(() => hasBlue = !hasBlue); 
  
  // Create a selector for selecting 
  // the directional light color 
  lightColorSel = createSelect(); 
  lightColorSel.position(30, 120); 
  lightColorSel.option('yellow'); 
  lightColorSel.option('magenta'); 
  lightColorSel.option('cyan'); 
  lightColorSel.changed(() => { 
    currentLightColor = lightColorSel.value(); 
  }); 
} 
  
function draw() { 
  background('white'); 
  fill('black'); 
  
  text("Select an option below to set the light "
      + "and ambient material color", -285, -125); 
  text("Select directional light color", -285, -100); 
  text("Select ambient material color", -285, -50); 
  shininess(10); 
  noStroke(); 
  
  // Define the color based on the checkboxes 
  let currentAmbientColor = color(hasRed ? 255:0, 
            hasGreen ? 255:0, hasBlue ? 255:0); 
  
  // Set the ambient material to the defined color 
  ambientMaterial(currentAmbientColor); 
  
  // Set the directional to the selected color 
  directionalLight(color(currentLightColor), 
              height / 2, width / 2, -250); 
  
  // Draw the sphere 
  translate(100, 0, 0); 
  sphere(100); 
  translate(-100, 0, 0); 
}

輸出：
ambient-mixed-color

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

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

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

相關用法

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