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

p5.j​​s中的spotLight()函數用於創建具有給定顏色，位置，光的方向，角度和濃度的 spotlight 。一個場景一次最多可以有5個 spotlight 處於活動狀態。可以根據below-given圖設置 spotlight 的坐標。

用法:根據語法，此方法可以與多個參數一起使用。

spotLight(v1, v2, v3, x, y, z, rx, ry, rz, [angle], [conc])
spotLight(color, position, direction, [angle], [conc])
spotLight(v1, v2, v3, position, direction, [angle], [conc])
spotLight(color, x, y, z, direction, [angle], [conc])
spotLight(color, position, rx, ry, rz, [angle], [conc])
spotLight(v1, v2, v3, x, y, z, direction, [angle], [conc])
spotLight(v1, v2, v3, position, rx, ry, rz, [angle], [conc])
spotLight(color, x, y, z, rx, ry, rz, [angle], [conc])

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

• v1:它是一個數字，用於確定相對於當前色彩模式的紅色或色調值。
• v2:它是一個數字，用於確定相對於當前顏色模式的綠色或飽和度值。
• v3:它是一個數字，用於確定相對於當前模式的藍色或亮度值。
• x:它是光源在x軸上的位置。
• y:它是光源在y軸上的位置。
• z:它是光在z軸上的位置。
• rx:它是x軸上的光的方向。
• ry:它是y軸上的光的方向。
• rz:它是光在z軸上的方向。
• angle:它為光線提供了角度。默認值為PI /3。
• conc:它指定光的濃度值。默認值為100。
• color:它指定了燈光的顏色。它可以是顏色數組，CSS顏色字符串或p5.Color值。
• position:它是一個p5.Vector，它指定了光源的位置。
• direction:它是一個p5.Vector，它指定了光線的方向。

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

範例1：此示例顯示了一個特定位置的 spotlight 。

function setup() { 
    
  // Creating canvas with width 
  // and height of 100 
  createCanvas(100, 100, WEBGL); 
} 
  
function draw() { 
  
  // Setting backgroud colour 
  // to black 
  background(0); 
    
  // Setting the spotlight 
  spotLight(0, 250, 0, 20, 20, 
            100, 0, 0, -1, Math.PI ); 
  noStroke(); 
    
  // Drawing a sphere to show 
  // the spotlight 
  sphere(40); 
}

輸出：

範例2：本示例說明了如何根據鼠標移動來更改 spotlight 位置。

function setup() { 
    
  // Creating canvas with width 
  // and height to 100 
  createCanvas(100, 100, WEBGL); 
} 
  
function draw() { 
  // Setting backgroud colour 
  // to black 
  background(0); 
    
  // Getting position based 
  // on mouse movement 
  let locX = mouseX - width / 2; 
  let locY = mouseY - height / 2; 
    
  // Setting the spotlight 
  spotLight(0, 250, 0, locX, locY, 
            100, 0, 0, -1, Math.PI ); 
  noStroke(); 
    
  // Drawing a sphere to show  
  // the spotlight 
  sphere(40); 
}

輸出：

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