Mixbox for Javascript

<script src="https://scrtwpns.com/mixbox.js"></script>

import mixbox from 'https://scrtwpns.com/mixbox.esm.js'; // for ES6 module use this instead

Node

npm install mixbox

import mixbox from 'mixbox';

Usage

var rgb1 = "rgb(0, 33, 133)";  // blue
var rgb2 = "rgb(252, 211, 0)"; // yellow
var t = 0.5;                   // mixing ratio

var mixed  = mixbox.lerp(rgb1, rgb2, t);

console.log(mixed);

Mixing Multiple Colors

var z1 = mixbox.rgbToLatent(rgb1);
var z2 = mixbox.rgbToLatent(rgb2);
var z3 = mixbox.rgbToLatent(rgb3);

var zMix = new Array(mixbox.LATENT_SIZE);

for (var i = 0; i < zMix.length; i++) { // mix:
    zMix[i] = (0.3*z1[i] +       // 30% of rgb1
               0.6*z2[i] +       // 60% of rgb2
               0.1*z3[i]);       // 10% of rgb3
}

var rgbMix = mixbox.latentToRgb(zMix);

Pigment Colors

Pigment	RGB	Float RGB	Linear RGB
Cadmium Yellow	254, 236, 0	0.996, 0.925, 0.0	0.991, 0.839, 0.0
Hansa Yellow	252, 211, 0	0.988, 0.827, 0.0	0.973, 0.651, 0.0
Cadmium Orange	255, 105, 0	1.0, 0.412, 0.0	1.0, 0.141, 0.0
Cadmium Red	255, 39, 2	1.0, 0.153, 0.008	1.0, 0.02, 0.001
Quinacridone Magenta	128, 2, 46	0.502, 0.008, 0.18	0.216, 0.001, 0.027
Cobalt Violet	78, 0, 66	0.306, 0.0, 0.259	0.076, 0.0, 0.054
Ultramarine Blue	25, 0, 89	0.098, 0.0, 0.349	0.01, 0.0, 0.1
Cobalt Blue	0, 33, 133	0.0, 0.129, 0.522	0.0, 0.015, 0.235
Phthalo Blue	13, 27, 68	0.051, 0.106, 0.267	0.004, 0.011, 0.058
Phthalo Green	0, 60, 50	0.0, 0.235, 0.196	0.0, 0.045, 0.032
Permanent Green	7, 109, 22	0.027, 0.427, 0.086	0.002, 0.153, 0.008
Sap Green	107, 148, 4	0.42, 0.58, 0.016	0.147, 0.296, 0.001
Burnt Sienna	123, 72, 0	0.482, 0.282, 0.0	0.198, 0.065, 0.0

Mixbox in WebGL

var shader = `
  precision highp float;

  // uncomment the following line if you work in linear space
  // #define MIXBOX_COLORSPACE_LINEAR

  uniform sampler2D mixbox_lut; // bind mixbox.lutTexture(gl) here

  #include "mixbox.glsl"

  void main(void) {
    vec3 rgb1 = vec3(0, 0.129, 0.522); // blue
    vec3 rgb2 = vec3(0.988, 0.827, 0); // yellow
    float t = 0.5;                     // mixing ratio

    vec3 rgb = mixbox_lerp(rgb1, rgb2, t);

    gl_FragColor = vec4(rgb, 1.0);
  }
`;

shader = shader.replace('#include "mixbox.glsl"', mixbox.glsl());

gl.useProgram(shaderProgram);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, mixbox.lutTexture(gl));
gl.uniform1i(gl.getUniformLocation(shaderProgram, "mixbox_lut"), 0);

Examples

Gradients	Mountains	Palette Snakes

source code	source code	source code

Splash Art	Paint Mixer	Pigment Fluids

source code	source code	source code

License

Copyright (c) 2022, Secret Weapons. All rights reserved.
Mixbox is provided under the CC BY-NC 4.0 license for non-commercial use only.
If you want to obtain commercial license, please contact: mixbox@scrtwpns.com