Color Addition and Subtraction, Tutorial 20 - https://www.shadertoy.com/view/Md23DV

color-addition-subtraction-shadertoy.glsl

float circleLocation(vec2 r, vec2 center, float radius) {
  float aaTolerance = 0.005;
  float distanceFromCenter = length(r-center);
  float antiAliasOutsideCircle = smoothstep(radius - aaTolerance, radius + aaTolerance, distanceFromCenter);
  float insideCircle = 1.0 - antiAliasOutsideCircle;
  
  return insideCircle;
}

void main() {
  //coordinate systems
  vec2 r = vec2((gl_FragCoord.xy - 0.5*resolution.xy)/resolution.y) * 2.0; // Is [-1, 1] coordinate system
  vec2 p = vec2(gl_FragCoord.xy/resolution.xy); //[0,1] coordinate system
  
  //Set background color
  vec3 bgCol = vec3(0.0); // black
  vec3 pixel = bgCol;
  
  vec3 rAxesColor = vec3(0.537, 1.0, 0.364);
  float rAxesThickness = 0.006;
  
  vec3 pAxesColor = vec3(1.0, 0.412, 0.635);
  float pAxesThickness = 0.008;
  
  //Grid tick size
  const float tickWidth = 0.1;
  const float tickLineThickness = 0.002;
  vec3 gridColor = vec3(0.5);   
  

  
  // --------------------------------------
  // --------------------------------------
  // -------- Start Fancy Code ------------
  
  vec3 black = vec3(0.0);
  vec3 white = vec3(1.0);
  vec3 gray = vec3(0.3);
  vec3 col1 = vec3(0.216, 0.471, 0.698); // blue
  vec3 col2 = vec3(1.00, 0.329, 0.298); // red
  vec3 col3 = vec3(0.867, 0.910, 0.247); // yellow
  
  vec3 ret;
  float d;
  
  if(r.x < -1.5/3.0){
  	//opaque layers on top of each other
    ret = gray;//assign a gray value to the pixel first
    d = circleLocation(r, vec2(-1.1, 0.3), 0.4);
    
    // mix the previous color value with
    // the new color value according to
    // the shape area function
    // at this line, previous color is gray;
    ret = mix(ret, col1, d);
    
    d = circleLocation(r, vec2(-1.3, 0.0), 0.4);
    ret = mix(ret, col2, d);
    
    d = circleLocation(r, vec2(-1.05, -0.3), 0.4);
    ret = mix(ret, col3, d);
  }
  else if(r.x < 1.5/3.0) {
  	// Color addition
    // This is how lights of different colors add up
    // http://en.wikipedia.org/wiki/Additive_color
    ret = black; // ADDITIVE color STARTS with BLACK
    ret += circleLocation(r, vec2(0.1, 0.3), 0.4)*col1; //add the new color to the previous color
    ret += circleLocation(r, vec2(-0.1, 0.0), 0.4)*col2;
    ret += circleLocation(r, vec2(0.15, -0.3), 0.4)*col3;
  }
  else {
  	// Color subtraction
    // This is how dyes, inks, and paint pigments of different colors add up
    // http://en.wikipedia.org/wiki/Subtractive_color
    ret = white; // SUBTRACTED color STARTS with WHITE
    ret -= circleLocation(r, vec2(1.0, 0.3), 0.4)*col1;
    ret -= circleLocation(r, vec2(0.95, 0.0), 0.4)*col2;
    ret -= circleLocation(r, vec2(1.0, -0.25), 0.4)*col3;
    // when all components of "ret" becomes equals or smaller than 0.0 it becomes black.
  }
  
 pixel = ret;
  // -------- End Fancy Code---------------
  // --------------------------------------
  // --------------------------------------
  
    //Draw r grid lines
  for(float i = -1.0; i < 1.0; i +=tickWidth) {
  	//i is the line coordinate;
    if(abs(r.x - i)< tickLineThickness) pixel = gridColor;
    if(abs(r.y - i)< tickLineThickness) pixel = gridColor;
  }
  
  //Draw p grid lines
  // for(float i = -1.0; i < 1.0; i +=tickWidth) {
  // 	//i is the line coordinate;
  //   if(abs(p.x - i)< tickLineThickness) pixel = gridColor;
  //   if(abs(p.y - i)< tickLineThickness) pixel = gridColor;
  // }
  
  // //[0,1] coordinat system axes
  // if(abs(p.x) < pAxesThickness) pixel = pAxesColor;
  // if(abs(p.y) < pAxesThickness) pixel = pAxesColor;
  
  //[-1,1] coordinat system axes
  if(abs(r.x) < rAxesThickness) pixel = rAxesColor;
  if(abs(r.y) < rAxesThickness) pixel = rAxesColor;
  
  //Final output
  gl_FragColor = vec4(pixel, 1.0);
}