Open In App

p5.js specularColor() Function

Last Updated : 23 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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



Previous Article
Next Article

Similar Reads

How to get the function name from within that function using JavaScript ?
Given a function and the task is to get the name of the function from inside the function using JavaScript. There are basically two methods to get the function name from within that function in JavaScript. These are: Using String substr() MethodUsing Function prototype name propertyGet the Function name using String substr() MethodThis method gets
2 min read
How to get the function name inside a function in PHP ?
To get the function name inside the PHP function we need to use Magic constants(__FUNCTION__). Magic constants: Magic constants are the predefined constants in PHP which is used on the basis of their use. These constants are starts and end with a double underscore (__). These constants are created by various extensions. Syntax: $string = __FUNCTION
1 min read
How to Check a Function is a Generator Function or not using JavaScript ?
Given an HTML document containing some JavaScript function and the task is to check whether the given function is generator function or not with the help of JavaScript. There are two examples to solve this problem which are discussed below: Example 1: In this example, we will use functionName.constructor.name property. It functionName.constructor.n
2 min read
How to implement a function that enable another function after specified time using JavaScript ?
Let us assume that we have been given a function add() which takes in two parameters a and b, and returns their sum. We are supposed to implement a function that should be able to call any function after the given delay amount of time. This can be done with the approaches as given below: Approach 1: Create a function that takes in the amount of del
2 min read
How to create a function that invokes function with partials appended to the arguments in JavaScript ?
In this article, we will learn to create a function that invokes a function with partials appended to the arguments it receives in JavaScript. Approach: We want to implement a function that invokes another function and provides the arguments it received. We can get the result by using (...) the spread/rest operator. Explanation: Let's say, we creat
3 min read
How to create a function that invokes the provided function with its arguments transformed in JavaScript ?
In programming, functions are used to reduce the effort of writing the same instance of code repeatedly. In this article let us see how we can create a function that invokes the provided function with its arguments transformed in JavaScript. In this article, the function transformer invokes the function scaling with its arguments, where the functio
2 min read
How to create a function that invokes each provided function with the arguments it receives using JavaScript ?
In this article, we will see how to create a function that invokes each provided function with the arguments it receives using JavaScript. It helps in reducing the effort of creating the same instance of code again and again. In this article let us see how to create a function that invokes each provided function with the arguments it receives and r
3 min read
How to create a function that invokes function with partials prepended arguments in JavaScript ?
In this article, we will see how to create a function that invokes functions with partials prepended to the arguments it receives in JavaScript. Before understanding the problem statement and approaching the solution for the same, let's, first of all, know what a function (also called a method) is and how a function gets executed. A function (or a
5 min read
Difference between Function.prototype.apply and Function.prototype.call
JavaScript treats everything as an object, even functions, and every object has its own properties and methods. Function objects have both apply() and call() methods on them. However, there is confusion about the two functions in JavaScript. The main difference between them is how they handle function arguments. There is no difference between these
2 min read
Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
Here we see the differences on the usage of foo between function foo() {} and var foo = function() {} types of function declarations in JavaScript. function foo() {} is a Normal Function or traditional general way of Function Declaration which every user or developer finds it simpler to declare and use it every ever required and var foo = function(
4 min read