Coloring #

Problem statement #

Using shaders, we can apply color to a texture or a shape through P5JS and apply different effects to the enviroment.

In this exercise, we want to apply shaders in order to create or simulate different blending modes that are popular on regular image processing Apps.

The way we can apply the different blending modes we want to do, is through playing with the mathematical formula involving the values of the vertex and the sliders and colors we can input.

Exercises

Figure it out the js code of the sketches.
Implement other blending modes (Add, Darkest, Lightest, Difference)

Background #

We implemented the following blending modes:

-Multiply (we multiply both values of the RGB Scale and brightness)

-Add (Sum both values and multiply them by brightness)

-Darkest (Compare both materials, find the one with darkest value and multiply with brightness)

-Lightest (Compare both materials, find the lightest one and multiply with brightness)

-Difference (We subtrackt the values from both materials and multiply by brightness)

Code #

Code Coloring .js

let blendShader;
let color_picker1, color_picker2;
let color1, color2;
let brighSlider;

let select_type;
let type = 0;

function preload() {
  blendShader = readShader('/vc_page/sketches/shaders/coloring/blend.frag');
}

function setup() {
  createCanvas(350,370, WEBGL);
  
  colorMode(RGB, 1);
  
  color_picker1 = createColorPicker(color(0.8, 0.5, 0.3));
  color_picker1.position(50, 30);
  
  color_picker2 = createColorPicker(color(0.9, 0.1, 0.4));
  color_picker2.position(210, 30);
  
  brighSlider = createSlider(0, 1, 1.0, 0.01);
  brighSlider.position(140, 185);
  brighSlider.style('width', '80px');
  
  select_type = createSelect();
  select_type.position(140, 330);
  select_type.style('color', 'black');
  select_type.option('Multiply', 0);
  select_type.option('Add', 1);
  select_type.option('Darkest', 2);
  select_type.option('Lightest', 3);
  select_type.option('Difference', 4);
  select_type.changed(selectEventType);
  
  shader(blendShader);
}

function selectEventType(){
  type = select_type.value();
}

function draw() {
  background(0);
  
  color1 = color_picker1.color();
  color2 = color_picker2.color();
  
  blendShader.setUniform('uMaterial1', [red(color1), green(color1), blue(color1)]);
  blendShader.setUniform('uMaterial2', [1.0, 1.0, 1.0]);
  blendShader.setUniform('brightness', 1.0);
  blendShader.setUniform('blendType', 0);
  rect(-130, -120, 100, 100);
  
  
  blendShader.setUniform('uMaterial1', [1.0, 1.0, 1.0]);
  blendShader.setUniform('uMaterial2', [red(color2), green(color2), blue(color2)]);
  blendShader.setUniform('brightness', 1.0);
  blendShader.setUniform('blendType', 0);
  rect(30, -120, 100, 100);
  
  
  blendShader.setUniform('uMaterial1', [red(color1), green(color1), blue(color1)]);
  blendShader.setUniform('uMaterial2', [red(color2), green(color2), blue(color2)]);
  blendShader.setUniform('brightness', brighSlider.value());
  blendShader.setUniform('blendType', type); 
  rect(-50, 20, 100, 100);
}

Code Coloring .frag

precision mediump float;

uniform float brightness;
uniform vec4 uMaterial1;
uniform vec4 uMaterial2;

uniform int blendType;

vec4 multiplyMode(){
  return brightness * uMaterial1 * uMaterial2;
}

vec4 addMode(){
  return brightness * (uMaterial1 + uMaterial2);
}

vec4 darkestMode(){
  return brightness * min(uMaterial1, uMaterial2);
}

vec4 lightestMode(){
  return brightness * max(uMaterial1, uMaterial2);
}

vec4 differenceMode(){
  return brightness * (uMaterial1 - uMaterial2);
}

void main() {
  if (blendType == 0){
    gl_FragColor = multiplyMode();
  } else if (blendType == 1) {
    gl_FragColor = addMode();
  } else if (blendType == 2) {
    gl_FragColor = darkestMode();
  }else if (blendType == 3){
    gl_FragColor = lightestMode();
  }else{
    gl_FragColor = differenceMode();
  } 
}

Conclusions #

Blending colors, which is an essential part of image processing applciations, can be designed and implemented thorugh the Use of Shaders, along with the mathematical formulas
Through playing with mathematical formulas, we can achieve variable results on the combination of two colors.
Modern Image processing apps, like Photoshop, Illustrator and others use these methods and mathematical operations to apply blending modes in their apps.

References #

https://visualcomputing.github.io/docs/shaders/coloring/