let cmykFilter = null;

​

const stepSize = 10;

​

function setup() {

  createCanvas(400, 400);

  cmykFilter = createGraphics(width, height);

  cmykFilter.pixelDensity(1);

  capture = createCapture(VIDEO);

  capture.size(width, height);

  capture.hide();

  frameRate(12);

}

​

function draw() {

  background(255);

  capture.loadPixels();

  noStroke();

  fill(0);

  blendMode(MULTIPLY);

  for(let y = 0; y < height; y+=stepSize){

    for(let x = 0; x < width; x+=stepSize){

      let index = (x + y * width)*4;

      // capture.pixels[index+3] = 200;

      let newColor = rgb2cmyk(capture.pixels[index],capture.pixels[index+1],capture.pixels[index+2]);

      let radC = stepSize * newColor['c']/100;

      fill('#00FFFF');

      ellipse(x,y,radC);

      let radM = stepSize * newColor['m']/100;

      fill('#FF00FF');

      ellipse(x+stepSize/4,y+stepSize/4,radM);

      let radY = stepSize * newColor['y']/100;

      fill('#FFFF00');

      ellipse(x-stepSize/2,y-stepSize/2,radY);

      /*

      let radK = (stepSize-stepSize/8) * newColor['k']/100;

      fill(50,200);

      ellipse(x-stepSize/4,y-stepSize/4,radK);

      */

    }

  }

​

  blendMode(BLEND); 

}

​

​

// https://www.standardabweichung.de/code/javascript/rgb-cmyk-conversion-javascript

function rgb2cmyk(r, g, b, normalized){

    var c = 1 - (r / 255);

    var m = 1 - (g / 255);

    var y = 1 - (b / 255);

    var k = Math.min(c, Math.min(m, y));

  /*

    c = (c - k) / (1 - k);

    m = (m - k) / (1 - k);

    y = (y - k) / (1 - k);

    */

    if(!normalized){

        c = Math.round(c * 10000) / 100;

        m = Math.round(m * 10000) / 100;

        y = Math.round(y * 10000) / 100;

        k = Math.round(k * 10000) / 100;

    }

    c = isNaN(c) ? 0 : c;

    m = isNaN(m) ? 0 : m;

    y = isNaN(y) ? 0 : y;

    k = isNaN(k) ? 0 : k;

    return {

        c: c,

        m: m,

        y: y,

        k: k

    }

}