Función p5.js colorMode()

La función colorMode() es una función incorporada en p5.js que se utiliza para permitir que el usuario elija entre las opciones de color RGB o HSB. El modo de color RGB es el predeterminado. Por lo tanto, los parámetros que el usuario le pasa corresponden a los valores rojo, verde y azul . El usuario crea varios colores pasando números (parámetros que oscilan entre 0 y 255) para estos valores, por lo tanto, el color resultante es una mezcla de rojo, verde y azul. Hay otro modo de color llamado HSB que utiliza valores de tono, saturación y brillo para definir el color.

Sintaxis: 

colorMode(mode, [value])
colorMode(mode, value1, value2, value3, [valueA])

Parámetros: 

• modo: Es el modo del color que se tiene que apostar fijado. Esto se puede configurar en RGB o HSB. Es el equivalente a Rojo/Verde/Azul o Tono/Saturación/Brillo.
• valor: Es un número que denota el rango de todos los valores entre 0 y 255. Es un valor opcional.
• value1: es un número que denota el rango para el valor de rojo o matiz.
• value2: Es un número que denota el rango para el verde o el valor de saturación dependiendo del modo de color actual.
• value3: es un número que denota el rango para el rango para los valores de azul o brillo/luminosidad dependiendo del modo de color actual
• valueA: Es un número que denota el rango para el valor alfa, está entre 0 y 255. Es un valor opcional.

Los siguientes programas ilustran la función colorMode() en p5.js: 

Ejemplo 1:

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);
    }
}

Producción:

Ejemplo 2:

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);
    }
}

Producción:

Referencia: https://p5js.org/reference/#/p5/colorMode