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

p5.js中的ambientLight()函數用於創建具有指定顏色的環境光。環境光沒有任何特定的光源。它來自畫布中的所有位置，均勻地照亮對象。

用法:

ambientLight( v1, v2, v3, [alpha] )

ambientLight( value )

ambientLight( gray, [alpha] )

ambientLight( values )

ambientLight( color )

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

v1:它是一個數字，用於確定相對於當前顏色範圍的紅色或色調值。
v2:它是一個數字，用於確定相對於當前顏色範圍的綠色或飽和度值。
v3:它是一個數字，用於確定相對於當前顏色範圍的藍色或亮度值。
alpha:它是一個數字，用於確定顏色的Alpha值。
value:它是定義環境光顏色的字符串。
gray:它是一個數字，用於定義環境光的灰度值。
values:它是一組數字，用於定義環境光顏色的紅色，綠色，藍色和alpha分量。
color:它是一個p5.Color，它定義了環境光的顏色。

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

範例1：

let newFont; 
let pointLightEnable = false; 
  
function preload() { 
  newFont = loadFont('fonts/Montserrat.otf'); 
} 
  
function setup() { 
  createCanvas(600, 300, WEBGL); 
  textFont(newFont, 18); 
  
  graySlider = createSlider(0, 128, 64, 1); 
  graySlider.position(20, 50); 
  
  pointLightCheck = createCheckbox( 
       "Enable Point Light", false); 
  
  pointLightCheck.position(20, 80); 
  
  // Toggle point light 
  pointLightCheck.changed(() => { 
    pointLightEnable = !pointLightEnable; 
  }); 
} 
  
function draw() { 
  background("green"); 
  text("Move the slider to change the ambient"
        + " light's red value.", -285, -125); 
  noStroke(); 
  shininess(15); 
  if (pointLightEnable) { 
    pointLight(0, 0, 255, -width / 2, 
                    -height / 2, 250); 
  } 
  
  grayValue = graySlider.value(); 
  ambientLight(grayValue, 0, 0); 
  specularMaterial(250); 
  sphere(100); 
}

輸出：
red-value

範例2：

let newFont; 
let pointLightEnable = false; 
  
function preload() { 
  newFont = loadFont('fonts/Montserrat.otf'); 
} 
  
function setup() { 
  createCanvas(600, 300, WEBGL); 
  textFont(newFont, 18); 
  
  graySlider = createSlider(0, 128, 64, 1); 
  graySlider.position(20, 50); 
  
  pointLightCheck = createCheckbox( 
        "Enable Point Light", false); 
  
  pointLightCheck.position(20, 80); 
  
  // Toggle point light 
  pointLightCheck.changed(() => { 
    pointLightEnable = !pointLightEnable; 
  }); 
} 
  
function draw() { 
  background("green"); 
  text("Move the slider to change the ambient"
      + " light's gray value.", -285, -125); 
  noStroke(); 
  shininess(15); 
  if (pointLightEnable) { 
    pointLight(255, 0, 0, -width / 2, 
                    -height / 2, 250); 
  } 
  
  grayValue = graySlider.value(); 
  ambientLight(grayValue); 
  specularMaterial(250); 
  sphere(100); 
}

輸出：
gray-value

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

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

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

相關用法

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