Skip to content
Related Articles

Related Articles

p5.js | specularColor() Function

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Apr, 2020
View Discussion
Improve Article
Save Article

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:
slider-colors

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

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

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!