TexelColor+p5 Dead Simple

// @mattdesl's Texel/Color in p5.js

// See: https://github.com/texel-org/color 

// Example color conversion with Texel/color:

// output = Colors.convert(coords, fromSpace, toSpace, output = [0, 0, 0])

​

//--------------------

// Don't touch this, it loads the Texel/Color library as a module.  

let myTexel;

async function preload() {

  myTexel = await import('https://unpkg.com/@texel/color@1.0.6/src/index.js');

}

//--------------------

​

function setup() {

  createCanvas(400, 200);

}

​

function draw() {

  background(0);

  noStroke(); 

  if (myTexel){ // Make sure it has been loaded

    // Start with an HSL color, (0-360,0-1,0-1)

    let srcH = map(noise(123 + millis()/3000.0), 0,1, 0,360);

    let srcS = 0.9;

    let srcL = noise(234 + millis()/3000.0);

​

    // Convert it to RGB for display

    let srcHSL = [srcH,srcS,srcL];

    let srcRGB = [0,0,0]; // yet to be calculated

    myTexel.convert(srcHSL, myTexel.OKHSL, myTexel.sRGB, srcRGB);

​

    // Display the RGB color

    let srcR = 255 * srcRGB[0];

    let srcG = 255 * srcRGB[1];

    let srcB = 255 * srcRGB[2];

    fill(srcR,srcG,srcB); 

    rect(0,0, 200,200); 

​

    // Compute a complementary color, 180° away and with inverse luminance

    let dstH = (360 + srcH + 180)%360; 

    let dstS = srcS; 

    let dstL = 1.0 - srcL; 

    let dstHSL = [dstH,dstS,dstL];

    let dstRGB = [0,0,0]; // yet to be calculated

    myTexel.convert(dstHSL, myTexel.OKHSL, myTexel.sRGB, dstRGB);

​

    // Display the complementary RGB color

    let dstR = 255 * dstRGB[0];

    let dstG = 255 * dstRGB[1];

    let dstB = 255 * dstRGB[2];

    fill(dstR,dstG,dstB); 

    rect(200,0, 200,200); 

  }

}