### Install PyMixbox

Source: https://github.com/scrtwpns/mixbox/blob/master/python/README.md

Install the PyMixbox library using pip. This is the first step before using any of the library's functionalities.

```bash
pip install pymixbox
```

--------------------------------

### Install Mixbox for Node.js

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/README.md

Install the Mixbox library using npm for use in Node.js environments.

```bash
npm install mixbox
```

--------------------------------

### Install Mixbox Package

Source: https://github.com/scrtwpns/mixbox/blob/master/unity/Documentation~/README.md

Install the Mixbox package using the Package Manager by adding the Git URL.

```bash
https://github.com/scrtwpns/mixbox.git#upm
```

--------------------------------

### WebGL Setup and Shader Compilation

Source: https://github.com/scrtwpns/mixbox/blob/master/webgl/example.html

Initializes WebGL context, defines vertex and fragment shaders, and compiles them. Includes a helper function for shader compilation.

```javascript
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var vertexShader = 	` attribute vec2 position;
void main(void) {
  gl_Position = vec4(position, 0.0, 1.0);
}`
;
var fragmentShader = 	` precision highp float;
uniform sampler2D mixbox_lut;
#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 = gl_FragCoord.x / 512.0; // mixing ratio
  vec3 rgb = mixbox_lerp(rgb1, rgb2, t);
  gl_FragColor = vec4(rgb, 1.0);
}`
;
fragmentShader = fragmentShader.replace('#include "mixbox.glsl"', mixbox.glsl());
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, compileShader(gl, gl.VERTEX_SHADER, vertexShader));
gl.attachShader(shaderProgram, compileShader(gl, gl.FRAGMENT_SHADER, fragmentShader));
gl.linkProgram(shaderProgram);

function compileShader(gl, type, source) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}
```

--------------------------------

### Mixbox GLSL Shader Example

Source: https://github.com/scrtwpns/mixbox/blob/master/webgl/README.md

Example GLSL fragment shader using Mixbox for color interpolation. Ensure mixbox.glsl is included and mixbox_lut is bound.

```javascript
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());
```

--------------------------------

### Basic Color Mixing with Mixbox

Source: https://github.com/scrtwpns/mixbox/blob/master/csharp/README.md

Demonstrates how to mix two colors using linear interpolation. Ensure the Mixbox NuGet package is installed.

```csharp
using System.Drawing;
using Scrtwpns.Mixbox;

public class HelloMixbox
{
    public static void Main(string[] args)
    {
        Color color1 = Color.FromArgb(0, 33, 133);  // blue
        Color color2 = Color.FromArgb(252, 211, 0); // yellow
        float t = 0.5f;                             // mixing ratio

        Color colorMix = Color.FromArgb(Mixbox.Lerp(color1.ToArgb(), color2.ToArgb(), t));

        System.Console.WriteLine(colorMix);
    }
}
```

--------------------------------

### Three.js Scene Setup and Cube Creation

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/examples/threejs.html

Initializes a Three.js scene, camera, and renderer. Creates seven cubes with interpolated colors using mixbox.lerp and adds them to the scene.

```javascript
var scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
scene.background = new THREE.Color(0xffffff);
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry();
var cubes = [];
var color1 = new THREE.Color(0x002185); // blue
var color2 = new THREE.Color(0xfcd300); // yellow

for(var i = 0; i < 7; i++) {
  var colorMix = mixbox.lerp(color1, color2, i / 6.0).toString();
  const material = new THREE.MeshBasicMaterial( { color: colorMix } );
  const cube = new THREE.Mesh( geometry, material );
  cube.position.x = ((i / 6.0) * 2.0 - 1.0) * 4.5;
  cube.rotation.x = i / 3.0;
  scene.add(cube);
  cubes.push(cube);
}
```

--------------------------------

### Import Mixbox in Node.js

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/README.md

Import the Mixbox library after installing it via npm for Node.js projects.

```javascript
import mixbox from 'mixbox';
```

--------------------------------

### Standard Shader with Mixbox Lerp

Source: https://github.com/scrtwpns/mixbox/blob/master/unity/Documentation~/README.md

A ShaderLab example for a standard Unity shader that uses MixboxLerp to blend two colors based on UV coordinates. Requires MixboxLUT texture.

```shaderlab
Shader "MixboxHelloShader"
{
    Properties
    {
        [NoScaleOffset] _MixboxLUT ("Mixbox LUT", 2D) = "white" {} // assign "Packages/Mixbox/Textures/MixboxLUT.png"

        _Color1 ("Color 1", Color) = (0, 0.129, 0.522, 1) // blue
        _Color2 ("Color 2", Color) = (0.988, 0.827, 0, 1) // yellow
    }
    SubShader
    {
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            sampler2D _MixboxLUT;
            #include "Packages/com.scrtwpns.mixbox/ShaderLibrary/Mixbox.cginc"

            fixed4 _Color1;
            fixed4 _Color2;

            struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; };
            struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; };

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                return MixboxLerp(_Color1, _Color2, i.uv.x);
            }
            ENDCG
        }
    }
}
```

--------------------------------

### Basic Box Styling

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/examples/hello.html

Provides basic CSS styling for box elements used in the color mixing example. It sets dimensions, padding, margin, and text properties.

```css
.box{width: 200px; height: 200px; padding: 10px; margin: 10px; color: white; font-weight: bold;}
```

--------------------------------

### Mixbox GLSL Shader Integration

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/README.md

Integrate Mixbox color mixing functions into WebGL shaders. This example shows how to include the mixbox.glsl functions and use them in a fragment shader.

```javascript
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());
```

--------------------------------

### Python Color Blending Example

Source: https://github.com/scrtwpns/mixbox/blob/master/README.md

Demonstrates color blending with the Mixbox Python package. The lerp function accepts two RGB tuples and a mixing ratio, returning the mixed RGB tuple.

```python
import mixbox

rgb1 = (0, 33, 133)  # blue
rgb2 = (252, 211, 0) # yellow
t = 0.5              # mixing ratio

rgb_mix = mixbox.lerp(rgb1, rgb2, t)

print(rgb_mix)
```

--------------------------------

### URP Shader with Mixbox Lerp

Source: https://github.com/scrtwpns/mixbox/blob/master/unity/Documentation~/README.md

A ShaderLab example for a Universal Render Pipeline (URP) shader that uses MixboxLerp. Includes necessary URP includes and HLSL code.

```shaderlab
Shader "Mixbox/Mixbox URP Sample Shader"
{
    Properties
    {
        [NoScaleOffset] _MixboxLUT ("Mixbox LUT", 2D) = "white" {} // assign "Packages/Mixbox/Textures/MixboxLUT.png"

        _Color1 ("Color 1", Color) = (0, 0.129, 0.522, 1) // blue
        _Color2 ("Color 2", Color) = (0.988, 0.827, 0, 1) // yellow
    }

    SubShader
    {
        Tags { "RenderType" = "Opaque" "RenderPipeline" = "UniversalRenderPipeline" }

        Pass
        {
            HLSLPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"

            TEXTURE2D(_MixboxLUT);
            SAMPLER(sampler_MixboxLUT);

            #include "Packages/com.scrtwpns.mixbox/ShaderLibrary/Mixbox.hlsl"

            struct Attributes { float4 positionOS : POSITION; float2 uv : TEXCOORD0; };
            struct Varyings { float4 positionHCS : SV_POSITION; float2 uv : TEXCOORD0; };

            CBUFFER_START(UnityPerMaterial)
                half4 _Color1;
                half4 _Color2;
            CBUFFER_END

            Varyings vert(Attributes IN)
            {
                Varyings OUT;
                OUT.positionHCS = TransformObjectToHClip(IN.positionOS.xyz);
                OUT.uv = IN.uv;
                return OUT;
            }

            half4 frag(Varyings IN) : SV_Target
            {
                return MixboxLerp(_Color1, _Color2, IN.uv.x);
            }
            ENDHLSL
        }
    }
}
```

--------------------------------

### Android Color Interpolation

Source: https://github.com/scrtwpns/mixbox/blob/master/java/README.md

Shows how to use Mixbox for color interpolation within an Android Activity. This example sets the background color of a View based on the mixed color.

```java
package com.example.mixboxhelloworld;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.graphics.Color;

import com.scrtwpns.Mixbox;

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        int color1 = Color.rgb(0, 33, 133);  // blue
        int color2 = Color.rgb(252, 211, 0); // yellow
        float t = 0.5f;                      // mixing ratio

        int colorMix = Mixbox.lerp(color1, color2, t);

        View view = new View(this);
        view.setBackgroundColor(colorMix);
        setContentView(view);
    }
}
```

--------------------------------

### Mix Multiple Colors with GLSL

Source: https://github.com/scrtwpns/mixbox/blob/master/godot/README.md

Mix multiple colors within a GLSL shader by converting them to a latent space, performing a weighted average, and converting back to RGB. This example assumes color variables (color1, color2, color3) are defined.

```glsl
mat3 z1 = mixbox_rgb_to_latent(color1.rgb);
mat3 z2 = mixbox_rgb_to_latent(color2.rgb);
mat3 z3 = mixbox_rgb_to_latent(color3.rgb);

// mix together 30% of color1, 60% of color2, and 10% of color3
mat3 z_mix = 0.3*z1 + 0.6*z2 + 0.1*z3;

vec3 rgb_mix = mixbox_latent_to_rgb(z_mix);
```

--------------------------------

### WebGL Rendering and Animation Loop

Source: https://github.com/scrtwpns/mixbox/blob/master/webgl/example.html

Sets up vertex attributes, buffers, and initiates the animation loop to render the scene with the mixbox texture.

```javascript
var vertexPosition = gl.getAttribLocation(shaderProgram, "position");
var positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

function render(now) {
  gl.useProgram(shaderProgram);
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, mixbox.lutTexture(gl));
  gl.uniform1i(gl.getUniformLocation(shaderProgram, "mixbox_lut"), 0);
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.vertexAttribPointer(vertexPosition, 2, gl.FLOAT, false, 0, 0)
  gl.enableVertexAttribArray(vertexPosition);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  requestAnimationFrame(render);
}

requestAnimationFrame(render);
```

--------------------------------

### Mix Three Colors in C# Script

Source: https://github.com/scrtwpns/mixbox/blob/master/unity/Documentation~/README.md

Shows how to mix three colors with specific weights using Mixbox.RGBToLatent and Mixbox.LatentToRGB in C#.

```csharp
Color MixThree(Color color1, Color color2, Color color3)
{
    MixboxLatent z1 = Mixbox.RGBToLatent(color1);
    MixboxLatent z2 = Mixbox.RGBToLatent(color2);
    MixboxLatent z3 = Mixbox.RGBToLatent(color3);

    // mix 30% of color1, 60% of color2, and 10% of color3
    MixboxLatent zMix = 0.3f*z1 + 0.6f*z2 + 0.1f*z3;

    Color colorMix = Mixbox.LatentToRGB(zMix);

    return colorMix;
}
```

--------------------------------

### WebGL Rendering with Mixbox Shader

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/examples/webgl.html

This snippet initializes WebGL, compiles shaders, links a program, and sets up buffers for rendering. It then uses `requestAnimationFrame` to continuously render a scene with a fragment shader that interpolates between two colors based on fragment position, using a mixbox lookup texture.

```javascript
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var vertexShader = 
` attribute vec2 position;
 void main(void) {
  gl_Position = vec4(position, 0.0, 1.0);
 }
`;
var fragmentShader = 
` precision highp float;
 uniform sampler2D mixbox_lut;
 #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 = gl_FragCoord.x / 512.0; // mixing ratio
  vec3 rgb = mixbox_lerp(rgb1, rgb2, t);
  gl_FragColor = vec4(rgb, 1.0);
 }
`;
fragmentShader = fragmentShader.replace('#include "mixbox.glsl"', mixbox.glsl());
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, compileShader(gl, gl.VERTEX_SHADER, vertexShader));
gl.attachShader(shaderProgram, compileShader(gl, gl.FRAGMENT_SHADER, fragmentShader));
gl.linkProgram(shaderProgram);
var vertexPosition = gl.getAttribLocation(shaderProgram, "position");
var positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

function render(now) {
 gl.useProgram(shaderProgram);
 gl.activeTexture(gl.TEXTURE0);
 gl.bindTexture(gl.TEXTURE_2D, mixbox.lutTexture(gl));
 gl.uniform1i(gl.getUniformLocation(shaderProgram, "mixbox_lut"), 0);
 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 gl.vertexAttribPointer(vertexPosition, 2, gl.FLOAT, false, 0, 0)
 gl.enableVertexAttribArray(vertexPosition);
 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 requestAnimationFrame(render);
}

requestAnimationFrame(render);

function compileShader(gl, type, source) {
 var shader = gl.createShader(type);
 gl.shaderSource(shader, source);
 gl.compileShader(shader);
 return shader;
}
```

--------------------------------

### Lerp Colors in C# Script

Source: https://github.com/scrtwpns/mixbox/blob/master/unity/Documentation~/README.md

Demonstrates how to use Mixbox.Lerp to blend two colors in a Unity C# script. Requires the Scrtwpns.Mixbox namespace.

```csharp
using UnityEngine;
using Scrtwpns.Mixbox;

public class NewBehaviourScript : MonoBehaviour
{
    void Start()
    {
        Color color1 = new Color(0.0f, 0.129f, 0.522f); // blue
        Color color2 = new Color(0.988f, 0.827f, 0.0f); // yellow
        float t = 0.5f;                                 // mixing ratio

        Color colorMix = Mixbox.Lerp(color1, color2, t);

        Debug.Log(colorMix);
    }
}
```

--------------------------------

### Define and Include GLSL Shader

Source: https://github.com/scrtwpns/mixbox/blob/master/README.md

Define a GLSL shader string and dynamically include the mixbox.glsl functions.

```javascript
var shader = `
  precision highp float;

  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());
```

--------------------------------

### Splash Animation Initialization and Drawing

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/examples/splash.html

Sets up the canvas, initializes Perlin noise grid and color palette, and then generates the splash effect by calling the splash function multiple times. The animation is controlled by requestAnimationFrame.

```javascript
var width = 800; var height = 650; var numSplashes = 270; var frame = 0; var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; document.getElementById("cnvs").appendChild(canvas); var ctx = canvas.getContext("2d"); var pixels = new Uint8ClampedArray(width*height*4); var imageData = new ImageData(pixels,width,height); fillBackground(255,255,255, 240, 240, 230, 255); // grid for perlin noise var grid = []; var nodes = 128; var noiseScale = 0.007; for (let i=0; i<nodes*nodes; i++) { var unit = []; var angle = Math.random() * 2 * Math.PI; unit.push(Math.cos(angle)); unit.push(Math.sin(angle)); grid.push(unit); } // color palette var colors = [ [249,250,249], [249,250,249], [255,236,4], [126,2,46], [255,236,4], [13,27,68], [255,236,4], [249,250,249], [249,250,249]]; function update() { frame++; if (frame < numSplashes) { window.requestAnimationFrame(update); } }; function splash() { var cx = randomGauss(0.5,0.15)*width; var cy = randomGauss(0.5,0.15)*height; var radius = width/2; for(var i=0; i<4; i++){radius = random(10,radius);} numStains = randomInt(3, radius); for(var i=0; i<numStains; i++) { var angle = random(0.0, 6.28); var stain_x = cx + radius*Math.cos(angle); var stain_y = cy + radius*Math.sin(angle); var r = randomGauss(20, 15) * random(0,random(0,random(0,2))); circle(stain_x, stain_y, r); } } function circle(cx,cy,radius) { var colorIndex = Math.round((perlin(cx*noiseScale, cy*noiseScale)+1.0)*0.5*8); var clr = colors[colorIndex]; var x0 = Math.round(clamp(cx-radius, 0, width)); var x1 = Math.round(clamp(cx+radius, 0, width)); var y0 = Math.round(clamp(cy-radius, 0, height)); var y1 = Math.round(clamp(cy+radius, 0, height)); var alpha = random(0.01,0.7); for(var y=y0; y<y1; y++) for(var x=x0; x<x1; x++) { var d = dist2D(cx, cy, x, y); if( d < radius) { var r = pixels[(x+y*width)*4+0]; var g = pixels[(x+y*width)*4+1]; var b = pixels[(x+y*width)*4+2]; var bgColor = [r,g,b]; var mixedColor = mixbox.lerp(bgColor, clr, alpha * smoothStep(radius, radius*0.95, d)); pixels[(x+y*width)*4+0] = mixedColor[0]; pixels[(x+y*width)*4+1] = mixedColor[1]; pixels[(x+y*width)*4+2] = mixedColor[2]; pixels[(x+y*width)*4+3] = 255; } } ctx.putImageData(imageData,0,0); } function fillBackground(r,g,b, r2, g2, b2, a) { for(var y=0;y<height;y++) for(var x=0;x<width;x++) { pixels[(x+y*width)*4+0] = (x>40 && x<(width-40) && y>40 && y<(height-40)) ? r2 : r; pixels[(x+y*width)*4+1] = (x>40 && x<(width-40) && y>40 && y<(height-40)) ? g2 : g; pixels[(x+y*width)*4+2] = (x>40 && x<(width-40) && y>40 && y<(height-40)) ? b2 : b; pixels[(x+y*width)*4+3] = a; } ctx.putImageData(imageData,0,0); } for(var s=0; s<numSplashes; s++){splash();} //update();
```

--------------------------------

### Interpolate Colors in p5.js

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/examples/p5js.html

Demonstrates how to interpolate between two colors using mixbox.lerp in a p5.js sketch. This is useful for creating gradients or blended color effects.

```javascript
function setup() { createCanvas(400, 400); }
function draw() {
  var color1 = color(0, 33, 133); // blue
  var color2 = color(252, 211, 0); // yellow
  var colorMix = mixbox.lerp(color1, color2, 0.5);
  background(colorMix);
}
```

--------------------------------

### Java Color Interpolation

Source: https://github.com/scrtwpns/mixbox/blob/master/java/README.md

Demonstrates linear interpolation between two Java Color objects using Mixbox. Requires importing java.awt.Color and com.scrtwpns.Mixbox.

```java
import java.awt.Color;
import com.scrtwpns.Mixbox;

class HelloMixbox {
    public static void main(String[] args) {
        Color color1 = new Color(0, 33, 133);  // blue
        Color color2 = new Color(252, 211, 0); // yellow
        float t = 0.5f;                        // mixing ratio

        Color colorMix = new Color(Mixbox.lerp(color1.getRGB(), color2.getRGB(), t));

        System.out.print(colorMix);
    }
}
```

--------------------------------

### Linear Interpolation of RGB Colors

Source: https://github.com/scrtwpns/mixbox/blob/master/rust/README.md

Demonstrates how to linearly interpolate between two RGB colors using the mixbox::lerp function. This is useful for creating gradients or blending colors.

```rust
fn main() {
    let rgb1 = [0, 33, 133];  // blue
    let rgb2 = [252, 211, 0]; // yellow
    let t = 0.5;              // mixing ratio

    let [r, g, b] = mixbox::lerp(&rgb1, &rgb2, t);

    println!("{} {} {}", r, g, b);
}
```

--------------------------------

### OSL: Linear Interpolation of Colors

Source: https://github.com/scrtwpns/mixbox/blob/master/shaders/README.md

Performs a linear interpolation between two colors using the mixbox_lerp function. Requires the mixbox.osl include.

```c
#include "mixbox.osl"

shader mix(
    color rgb1 = color(0.0, 0.015, 0.235), // blue
    color rgb2 = color(0.973, 0.651, 0.0), // yellow
    float t = 0.5,                         // mixing ratio
    output color rgb_mix = 0
  )
{
    rgb_mix = mixbox_lerp(rgb1, rgb2, t);
}
```

--------------------------------

### Add Mixbox to Cargo.toml

Source: https://github.com/scrtwpns/mixbox/blob/master/rust/README.md

Add this line to your Cargo.toml file to include the Mixbox library in your Rust project.

```toml
mixbox = "2.0.0"
```

--------------------------------

### Setting up Mixbox LUT Texture in WebGL

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/README.md

Configure the Mixbox Look-Up Table (LUT) texture for use in WebGL shaders. This involves binding the texture and setting the appropriate uniform sampler.

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

--------------------------------

### Utility Functions for Splash Animation

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/examples/splash.html

Provides essential mathematical and utility functions for the splash animation, including clamping values, smooth stepping, distance calculation, Gaussian random number generation, remapping, and Perlin noise implementation.

```javascript
function clamp(x, lowerlimit, upperlimit) { if (x<lowerlimit) {return lowerlimit;} else if(x>upperlimit){return upperlimit;} else {return x;}} function smoothStep(edge0, edge1, x) { x = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); return x * x * (3 - 2 * x);} function dist2D(ax,ay,bx,by) { return Math.sqrt((ax-bx)*(ax-bx) + (ay-by)*(ay-by));} function box_muller(){ return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());} function remap(x, from1, to1, from2, to2) { return from2 + (to2 - from2) * ((x-from1)/(to1-from1));} function random(min, max) {return remap(Math.random(), 0.0, 1.0, min, max);} function randomInt(min, max) {return Math.round(random(min, max));} function randomGauss(mean, variation){return box_muller()*variation + mean;} function randomGaussInt(mean, variation){return Math.round(box_muller()*variation + mean);} function perlin(_x,_y) { var x = _x; var y = _y; var x0 = Math.floor(x); var x1 = x0+1; var y0 = Math.floor(y); var y1 = y0+1; var dot_LT = dot([x-x0,y-y0], grid[(x0&127) + (y0&127)*nodes]); var dot_RT = dot([x-x1,y-y0], grid[(x1&127) + (y0&127)*nodes]); var dot_LB = dot([x-x0,y-y1], grid[(x0&127) + (y1&127)*nodes]); var dot_RB = dot([x-x1,y-y1], grid[(x1&127) + (y1&127)*nodes]); var top = lerp_smooth(dot_LT, dot_RT, x-x0); var bottom = lerp_smooth(dot_LB, dot_RB, x-x0); var intensity = lerp_smooth (top, bottom, y-y0); return intensity; } function dot(a,b) {return a[0] * b[0] + a[1] * b[1];} function lerp_smooth(a,b,t){var t_smooth = 6*t**5 - 15*t**4 + 10*t**3; return a*(1-t_smooth) + b*t_smooth;}
```

--------------------------------

### Linear Interpolation Between Two Colors

Source: https://github.com/scrtwpns/mixbox/blob/master/cpp/README.md

Use `mixbox_lerp` to linearly interpolate between two RGB colors based on a mixing ratio 't'. The result is stored in the provided output pointers.

```c++
#include <stdio.h>
#include "mixbox.h"

int main() {
  unsigned char r1 =   0, g1 = 33,  b1 = 133; // blue
  unsigned char r2 = 252, g2 = 211, b2 = 0;   // yellow
  float t = 0.5;
  unsigned char r, g, b;

  mixbox_lerp(r1, g1, b1,  // first color
              r2, g2, b2,  // second color
              t,           // mixing ratio
              &r, &g, &b); // result

  printf("%d %d %d\n", r, g, b);
}
```

--------------------------------

### Metal: Linear Interpolation of Colors

Source: https://github.com/scrtwpns/mixbox/blob/master/shaders/README.md

Performs a linear interpolation between two colors using the mixbox_lerp function. Requires the mixbox_lut texture and the mixbox.metal include.

```metal
#include <metal_stdlib>
using namespace metal;

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

#include "mixbox.metal"

fragment float4 // load "mixbox_lut.png" into texture 0
fragment_main(texture2d<float> mixbox_lut [[texture(0)]])
{
    float3 rgb1 = float3(0, 0.129, 0.522); // blue
    float3 rgb2 = float3(0.988, 0.827, 0); // yellow

    float t = 0.5; // mixing ratio

    float3 rgb_mix = mixbox_lerp(mixbox_lut, rgb1, rgb2, t);

    return float4(rgb_mix, 1.0);
}
```

--------------------------------

### Mixing Multiple Colors with Latent Representation

Source: https://github.com/scrtwpns/mixbox/blob/master/csharp/README.md

Shows how to mix three colors by converting them to a latent space, performing weighted averaging, and converting back to RGB. This method is useful for more complex color blending.

```csharp
Color MixThree(Color color1, Color color2, Color color3)
{
    MixboxLatent z1 = Mixbox.RGBToLatent(color1.ToArgb());
    MixboxLatent z2 = Mixbox.RGBToLatent(color2.ToArgb());
    MixboxLatent z3 = Mixbox.RGBToLatent(color3.ToArgb());

    // mix 30% of color1, 60% of color2, and 10% of color3
    MixboxLatent zMix = 0.3f*z1 + 0.6f*z2 + 0.1f*z3;

    return Color.FromArgb(Mixbox.LatentToRGB(zMix));
}
```

--------------------------------

### Mixbox - Mixing Multiple Colors

Source: https://github.com/scrtwpns/mixbox/blob/master/java/README.md

A utility function to mix three colors by converting them to a latent space, performing a weighted average, and converting back to RGB. This method requires the Mixbox library.

```java
int mixThree(int color1, int color2, int color3) {
    float[] z1 = Mixbox.rgbToLatent(color1);
    float[] z2 = Mixbox.rgbToLatent(color2);
    float[] z3 = Mixbox.rgbToLatent(color3);

    float[] zMix = new float[Mixbox.LATENT_SIZE];

    for(int i = 0; i < zMix.length; i++) {
      // mix 30% of color1, 60% of color2, and 10% of color3
      zMix[i] = 0.3f*z1[i] + 0.6f*z2[i] + 0.1f*z3[i];
    }

    return Mixbox.latentToRgb(zMix);
}
```

--------------------------------

### Node.js Color Interpolation

Source: https://github.com/scrtwpns/mixbox/blob/master/README.md

Import and use the Mixbox library in a Node.js environment to interpolate between two RGB color strings.

```javascript
import mixbox from 'mixbox';

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

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

console.log(mixed);
```

--------------------------------

### OSL: Mix Three Colors

Source: https://github.com/scrtwpns/mixbox/blob/master/shaders/README.md

Blends three colors by converting them to a latent space, mixing, and converting back. Requires mixbox_rgb_to_latent and mixbox_latent_to_rgb functions.

```c
color mix_three(color rgb1, color rgb2, color rgb3)
{
    mixbox_latent z1 = mixbox_rgb_to_latent(rgb1);
    mixbox_latent z2 = mixbox_rgb_to_latent(rgb2);
    mixbox_latent z3 = mixbox_rgb_to_latent(rgb3);

    // mix together 30% of rgb1, 60% of rgb2, and 10% of rgb3
    mixbox_latent z_mix = 0.3*z1 + 0.6*z2 + 0.1*z3;

    color rgb_mix = mixbox_latent_to_rgb(z_mix);

    return rgb_mix;
}
```

--------------------------------

### Include Mixbox via Script Tag

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/README.md

Include the Mixbox library in your HTML using a script tag for direct browser usage.

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

--------------------------------

### Mixing Multiple Colors in Latent Space

Source: https://github.com/scrtwpns/mixbox/blob/master/rust/README.md

Shows how to convert RGB colors to a latent space, mix them using weighted averages, and convert the result back to RGB. This method allows for more complex color blending.

```rust
let z1 = mixbox::rgb_to_latent(&rgb1);
let z2 = mixbox::rgb_to_latent(&rgb2);
let z3 = mixbox::rgb_to_latent(&rgb3);

let mut z_mix = [0.0; mixbox::LATENT_SIZE];

for i in 0..z_mix.len() {     // mix together:
    z_mix[i] = 0.3*z1[i] +    // 30% of rgb1
               0.6*z2[i] +    // 60% of rgb2
               0.1*z3[i];     // 10% of rgb3
}

let rgb_mix = mixbox::latent_to_rgb(&z_mix);
```

--------------------------------

### Mix Multiple Colors with GDScript

Source: https://github.com/scrtwpns/mixbox/blob/master/godot/README.md

Mix multiple colors by converting them to a latent space, performing a weighted average, and converting back to RGB. Ensure the Mixbox addon is loaded.

```gdscript
var z1 = Mixbox.rgb_to_latent(color1)
var z2 = Mixbox.rgb_to_latent(color2)
var z3 = Mixbox.rgb_to_latent(color3)

var z_mix = []
z_mix.resize(Mixbox.LATENT_SIZE)

for i in z_mix.size():          # mix together:
    z_mix[i] = (0.3*z1[i] +     # 30% of color1
                0.6*z2[i] +     # 60% of color2
                0.1*z3[i])      # 10% of color3

var color_mix = Mixbox.latent_to_rgb(z_mix)
```

--------------------------------

### HLSL: Linear Interpolation of Colors

Source: https://github.com/scrtwpns/mixbox/blob/master/shaders/README.md

Performs a linear interpolation between two colors using the MixboxLerp function. Requires the MixboxLUT texture and sampler, and mixbox.hlsl include.

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

Texture2D MixboxLUT; // bind the "mixbox_lut.png" texture here
SamplerState MixboxSampler; // FILTER_MIN_MAG_LINEAR_MIP_POINT

#define MIXBOX_LUT(UV) MixboxLUT.SampleLevel(MixboxSampler, UV, 0)

#include "mixbox.hlsl"

float4 PSMain() : SV_Target
{
    float3 rgb1 = float3(0, 0.129, 0.522); // blue
    float3 rgb2 = float3(0.988, 0.827, 0); // yellow
    float t = 0.5;                         // mixing ratio

    float3 rgb_mix = MixboxLerp(rgb1, rgb2, t);

    return float4(rgb_mix, 1.0);
}
```

--------------------------------

### Metal: Mix Three Colors

Source: https://github.com/scrtwpns/mixbox/blob/master/shaders/README.md

Blends three colors by converting them to a latent space, mixing, and converting back. Requires mixbox_rgb_to_latent and mixbox_latent_to_rgb functions.

```metal
float3 mix_three(texture2d<float> mixbox_lut,
                 float3 rgb1, float3 rgb2, float3 rgb3)
{
    mixbox_latent z1 = mixbox_rgb_to_latent(mixbox_lut, rgb1);
    mixbox_latent z2 = mixbox_rgb_to_latent(mixbox_lut, rgb2);
    mixbox_latent z3 = mixbox_rgb_to_latent(mixbox_lut, rgb3);

    // mix together 30% of rgb1, 60% of rgb2, and 10% of rgb3
    mixbox_latent z_mix = 0.3*z1 + 0.6*z2 + 0.1*z3;

    float3 rgb_mix = mixbox_latent_to_rgb(z_mix);

    return rgb_mix;
}
```

--------------------------------

### GLSL: Linear Interpolation of Colors

Source: https://github.com/scrtwpns/mixbox/blob/master/shaders/README.md

Performs a linear interpolation between two colors using the mixbox_lerp function. Ensure the mixbox_lut texture is bound and mixbox.glsl is included.

```glsl
#ifdef GL_ES
precision highp float;
#endif

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

uniform sampler2D mixbox_lut; // bind the "mixbox_lut.png" texture here

#include "mixbox.glsl" // paste the contents of mixbox.glsl here

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

--------------------------------

### Mixing Multiple Colors Using Latent Representation

Source: https://github.com/scrtwpns/mixbox/blob/master/cpp/README.md

Convert RGB colors to a latent representation using `mixbox_rgb_to_latent`, perform weighted mixing in the latent space, and convert back to RGB using `mixbox_latent_to_rgb`. This method allows for mixing more than two colors with specific weights.

```c++
mixbox_latent z1, z2, z3, z_mix;

mixbox_rgb_to_latent(r1, g1, b1, z1);
mixbox_rgb_to_latent(r2, g2, b2, z2);
mixbox_rgb_to_latent(r3, g3, b3, z3);

for (int i = 0; i < MIXBOX_LATENT_SIZE; i++) {
  // mix 30% of rgb1, 60% of rgb2, and 10% of rgb3
  z_mix[i] = 0.3f*z1[i] + 0.6f*z2[i] + 0.1f*z3[i];
}

mixbox_latent_to_rgb(z_mix, &r, &g, &b);
```

--------------------------------

### Linear Interpolation Between Two Colors

Source: https://github.com/scrtwpns/mixbox/blob/master/python/README.md

Use the `mixbox.lerp` function to linearly interpolate between two RGB colors. This is useful for creating gradients or blending colors.

```python
import mixbox

rgb1 = (0, 33, 133)  # blue
rgb2 = (252, 211, 0) # yellow
t = 0.5              # mixing ratio

rgb_mix = mixbox.lerp(rgb1,rgb2,t)

print(rgb_mix)
```

--------------------------------

### Import Mixbox ES6 Module

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/README.md

Import the Mixbox library as an ES6 module for use in modern Javascript projects.

```javascript
import mixbox from 'https://scrtwpns.com/mixbox.esm.js';
```

--------------------------------

### GLSL: Mix Three Colors

Source: https://github.com/scrtwpns/mixbox/blob/master/shaders/README.md

Blends three colors by converting them to a latent space, mixing, and converting back. Requires mixbox_rgb_to_latent and mixbox_latent_to_rgb functions.

```glsl
vec3 mix_three(vec3 rgb1, vec3 rgb2, vec3 rgb3)
{
    mixbox_latent z1 = mixbox_rgb_to_latent(rgb1);
    mixbox_latent z2 = mixbox_rgb_to_latent(rgb2);
    mixbox_latent z3 = mixbox_rgb_to_latent(rgb3);

    // mix together 30% of rgb1, 60% of rgb2, and 10% of rgb3
    mixbox_latent z_mix = 0.3*z1 + 0.6*z2 + 0.1*z3;

    vec3 rgb_mix = mixbox_latent_to_rgb(z_mix);

    return rgb_mix;
}
```

--------------------------------

### Mixbox Gradle Dependency (Groovy)

Source: https://github.com/scrtwpns/mixbox/blob/master/java/README.md

Include the Mixbox library in your Gradle project using Groovy syntax.

```groovy
implementation 'com.scrtwpns:mixbox:2.0.0' // Groovy
```

--------------------------------

### Unity Shader Color Interpolation

Source: https://github.com/scrtwpns/mixbox/blob/master/README.md

A Unity Shader that uses Mixbox to interpolate between two colors based on UV coordinates. Requires Mixbox LUT texture and shader include.

```shaderlab
Shader "MixboxHelloShader"
{
    Properties
    {
        _MixboxLUT ("Mixbox LUT", 2D) = "white" {} // assign "Packages/Mixbox/Textures/MixboxLUT.png"

        _Color1 ("Color 1", Color) = (0, 0.129, 0.522, 1) // blue
        _Color2 ("Color 2", Color) = (0.988, 0.827, 0, 1) // yellow
    }
    SubShader
    {
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            sampler2D _MixboxLUT;
            #include "Packages/com.scrtwpns.mixbox/ShaderLibrary/Mixbox.cginc"

            fixed4 _Color1;
            fixed4 _Color2;

            struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; };
            struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; };

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 mixedColor = MixboxLerp(_Color1, _Color2, i.uv.x);
                return mixedColor;
            }
            ENDCG
        }
    }
}
```

--------------------------------

### Create Canvas Gradient

Source: https://github.com/scrtwpns/mixbox/blob/master/javascript/examples/canvas.html

Applies a linear color gradient to an HTML canvas. Requires an HTML element with id 'canvas' and the mixbox library.

```javascript
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var color1 = "rgb(0, 33, 133)"; // blue
var color2 = "rgb(252, 211, 0)"; // yellow
var n = canvas.width;
for (var i = 0; i < n; i++) {
    context.fillStyle = mixbox.lerp(color1, color2, i / (n - 1));
    context.fillRect(i, 0, 1, canvas.height);
}
```

--------------------------------

### Browser JavaScript Color Interpolation

Source: https://github.com/scrtwpns/mixbox/blob/master/README.md

Use this snippet in an HTML file to mix two RGB colors using the Mixbox library. Ensure the mixbox.js script is included.

```html
<html>
  <body>
    <script src="https://scrtwpns.com/mixbox.js"></script>
    <script>
      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);

      document.body.style.background = mixed;
    </script>
  </body>
</html>
```