p5.js colorMode() Function Last Updated : 31 Oct, 2021 Comments Improve Suggest changes Like Article Like Report The colorMode() function is an inbuilt function in p5.js which is used to let the user choose between RGB or HSB color options. The RGB color mode is by default. Thus, the parameters that which the user passes into it corresponds to red, green and blue values. The user creates various colors by passing in numbers (parameters which ranger between 0 to 255) for these values, therefore, the resulting color is a blend of red, green, and blue. There is another color mode called HSB that uses hue, saturation and brightness values for defining the color. Syntax: colorMode(mode, [value]) colorMode(mode, value1, value2, value3, [valueA]) Parameters: mode: It is the mode of the color that has to bet set. This can be set to RGB or HSB. It is the equivalent to Red/Green/Blue or Hue/Saturation/Brightness.value: It is a number that denotes the range for all values between 0 to 255. It is an optional value.value1: It is a number that denotes the range for the red or hue value.value2: It is a number that denotes the range for the green or saturation value depending on the current color mode.value3: It is a number that denotes the range for the range for the blue or brightness/lightness values depending on the current color modevalueA: It is a number that denotes the range for the alpha value, It is between 0 and 255. It is an optional value. Below programs illustrates the colorMode() function in p5.js: Example 1: JavaScript function setup() { createCanvas(600, 600); colorMode(HSB, 360, 100, 100); noLoop(); } function draw() { background(0, 0, 100); for (var i = 0; i < 10; i = i + 1) { var x = 50 + i * 50; var y = 300; var h = i * 20; var s = random(20, 80); fill(h, s, 100); rect (x, y, 40, 40); } } Output: Example 2: JavaScript function setup() { createCanvas(600, 400); background(0); colorMode(RGB, 78); } function draw() { fill(0, 0, 0, 10); rect(-1, -1, 1401, 901); stroke(2 * frameCount, mouseX/10, 255); translate(width/2, height/2); for (let i = 2; i < 400; i = i+20) { rotate( noise(frameCount * 0.0004) * (1000/mouseX) ); line(i, 0, ((mouseX/10) + i), 0); } } Output: Reference: https://p5js.org/reference/#/p5/colorMode Comment More info A adwityaajha16cse Follow Improve Article Tags : JavaScript Web Technologies javascript-functions JavaScript-p5.js Explore JavaScript BasicsIntroduction to JavaScript4 min readVariables and Datatypes in JavaScript6 min readJavaScript Operators5 min readControl Statements in JavaScript4 min readArray & StringJavaScript Arrays7 min readJavaScript Array Methods7 min readJavaScript Strings6 min readJavaScript String Methods9 min readFunction & ObjectFunctions in JavaScript5 min readJavaScript Function Expression3 min readFunction Overloading in JavaScript4 min readObjects in Javascript4 min readJavaScript Object Constructors4 min readOOPObject Oriented Programming in JavaScript3 min readClasses and Objects in JavaScript4 min readWhat Are Access Modifiers In JavaScript ?5 min readJavaScript Constructor Method7 min readAsynchronous JavaScriptAsynchronous JavaScript2 min readJavaScript Callbacks4 min readJavaScript Promise4 min readEvent Loop in JavaScript4 min readAsync and Await in JavaScript2 min readException HandlingJavascript Error and Exceptional Handling6 min readJavaScript Errors Throw and Try to Catch2 min readHow to create custom errors in JavaScript ?2 min readJavaScript TypeError - Invalid Array.prototype.sort argument1 min readDOMHTML DOM (Document Object Model)9 min readHow to select DOM Elements in JavaScript ?3 min readJavaScript Custom Events4 min readJavaScript addEventListener() with Examples9 min readAdvanced TopicsClosure in JavaScript4 min readJavaScript Hoisting6 min readJavascript Scope3 min readJavaScript Higher Order Functions7 min readDebugging in JavaScript4 min read Like