Blend

Blends textures together based on a mix factor and blending type.

Parameters

texture1 Texture: The first texture to be blended. Default: undefined
texture2 Texture: The second texture to be blended. Default: undefined
uTextureSize Vec2: The size of the texture used for sampling neighboring pixels. Default: (0.0, 0.0)
mixFactor Float: How much weight to give each picture in the blending. A value of 0.0 only outputs texture1, 1.0 only outputs texture2. Default: 0.0
blendingMode Int: Which blending mode to use. Below is a table of the values and their respective blend modes. Default: 0.0

blendingMode Blend Mode
1 Additive Blending
2 Subtract Blending
3 Multiplicative Blending
4 Screen Blending
5 Overlay Blending
6 Darken Blending
7 Lighten Blending
8 Difference Blending
9 Exclusion Blending
10 Behind Blending
11 Dissolve Blending
12 Hue Blending
13 Normal Blending
Default Linear Interpolation

Example

let layer,
  bird,
  ireland,
  blend;

function preload() {
    blend = createShader(fip.defaultVert, fip.blend); // Load the shader
    bird = loadImage("bird.jpg");
    ireland = loadImage("ireland.jpg");
}

function setup() {
    createCanvas(600, 600, WEBGL); // Use WEBGL mode to use the shader
    layer1 = createFramebuffer(); // Create framebuffers to draw the image onto
    layer2 = createFramebuffer(); 
}

function draw() {
    background(0);

    // Create a framebuffer for blending
    layer1.begin();
    clear();
    lights();
    scale(1, -1);
    image(images[0], -width / 2, -height / 2, width, height);
    layer1.end();

    // Create a second framebuffer for blending
    layer2.begin();
    clear();
    lights();
    scale(1, -1);
    image(images[1], -width / 2, -height / 2, width, height);
    layer2.end();

    // Apply the shader
    shader(blend);

    // Set the shader uniforms
    blend.setUniform("texture1", layer1.color); // First texture
    blend.setUniform("texture2", layer2.color); // Second texture
    blend.setUniform('uTextureSize', [width, height]); // Set the size of the texture used
    blend.setUniform('mixFactor', 0.5);
    blend.setUniform('blendingMode', 0);

    rect(0, 0, width, height); // Draw a rectangle to apply the shader to
    resetShader(); 
}
Images to be blended
Blended image