RGB subtraction

let program;

let c0, c1, c2;

​

function setup() {

   pixelDensity(1);

   createCanvas(windowWidth, windowHeight, WEBGL);

  rectMode(CENTER);

  noStroke();

  fill(1);

  program = createShader(vert,frag);

  randomize();

}

​

function randomize() {

  c0 = randomColor();

  c1 = randomColor();

  c2 = randomColor();

}

​

function randomColor() {

  return color(random(255), random(255), random(255));

}

​

function mousePressed() {

  console.log("press");

  randomize();

}

​

function draw() {

  shader(program);

  background(0);

  program.setUniform('res',[width,height]);

  program.setUniform('c0',[c0.levels[0]/255, c0.levels[1]/255, c0.levels[2]/255]);

  program.setUniform('c1',[c1.levels[0]/255, c1.levels[1]/255, c1.levels[2]/255]);

  program.setUniform('c2',[c2.levels[0]/255, c2.levels[1]/255, c2.levels[2]/255]);

  rect(0,0,width,height);

}

​

var vert=`

#ifdef GL_ES

precision highp float;

precision highp int;

#endif

​

#extension GL_OES_standard_derivatives : enable

attribute vec3 aPosition;

uniform mat4 uModelViewMatrix;

uniform mat4 uProjectionMatrix;

uniform mat3 uNormalMatrix;

​

void main() {

  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);

}`;

​

var frag=`

#ifdef GL_ES

precision highp float;

#endif

​

uniform vec2 res;

uniform vec3 c0, c1, c2;

​

float lev(float v) {

  float px = 1./ max(res.x, res.y);

  return 1.0 - smoothstep(0., 0.+px, v);

}

void main(void)

{

  float px = 1./ max(res.x, res.y);

  float size = 0.25;

  float rad = sqrt(1.75);

  float sqrt3 = sqrt(3.);

  vec2 crd = (gl_FragCoord.xy - res * 0.5) / min(res.x, res.y);

  float d0 = distance(vec2(0.0, sqrt3 * size/4.), crd)-size;

  float d1 = distance(vec2(size/2.0, -sqrt3 * size/4.0),crd)-size;

  float d2 = distance(vec2(-size/2.0, -sqrt3 * size/4.0),crd)-size;

  vec3 color = vec3(1.0);

  color -= c0 * lev(d0);

  color -= c1 * lev(d1);

  color -= c2 * lev(d2);

  gl_FragColor=vec4(color, 1.);

}`;

​