p5.js specularColor() Function

The specularColor() function in p5.js is used to set the color of the specular highlight when it is used with the specular material and highlight.

This method is usually used with the specularMaterial() and shininess() functions to define the specular highlights. There would be no effect of this function without the specularMaterial() function. The default specular highlight color is white, if this function is not used.

Syntax:

specularColor( v1, v2, v3 )

OR

specularColor( value )

OR

specularColor( gray )

OR

specularColor( values )

OR

specularColor( color )

Parameters: This function accepts seven parameters as mentioned above and described below:

• v1: It is a number which determines the red or hue value relative to the current color range.
• v2: It is a number which determines the green or saturation value relative to the current color range.
• v3: It is a number which determines the blue or brightness value relative to the current color range.
• value: It is a string which defines the specular highlight color.
• gray: It is a number which defines the gray value of the specular highlight.
• values: It is an array of numbers which define the red, green, blue and alpha components of the specular highlight color.
• color: It is a p5.Color which defines the color of the specular highlight.

Below example illustrates the specularColor() function in p5.js:

Example:

let newFont;

function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}

function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 18);

  redColorSlider = createSlider(0, 255, 128, 1);
  redColorSlider.position(20, 50);

  blueColorSlider = createSlider(0, 255, 128, 1);
  blueColorSlider.position(20, 80);
}

function draw() {
  background('green');
  text("Move the sliders to change the red and"
    + " blue specular highlights", -285, -125);
  noStroke();
  shininess(15);

  redSpecularIntensity = redColorSlider.value();
  blueSpecularIntensity = blueColorSlider.value();

  specularColor(redSpecularIntensity, 0, 0);
  pointLight(255, 0, 0, -width / 2, -height / 2, 250);
  specularColor(0, 0, blueSpecularIntensity);
  pointLight(0, 0, 255, width / 2, height / 2, 250);

  specularMaterial(250);
  sphere(100);
}

Output:

Online editor: https://editor.p5js.org/

Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/amp/

Reference: https://p5js.org/reference/#/p5/specularColor