let pixelImg, lastCoordinate={x:0,y:0}

let minDistance=2,

    maxDistance=6,

    maxDots = 150000

​

function preload() {

  picture = loadImage('CMYK-TEST1.png');

}

​

function setup() {

  createCanvas(1800, 1800);

  pixelDensity(1);

  frameRate(4)

  picture.loadPixels()

  processCMYK()

}

​

​

function processCMYK() {

  initImages()

  imageCMYK()

}

​

function initImages() {

  pixelImg = createImage(picture.width, picture.height);

  pixelImg.loadPixels()

}

​

function imageCMYK() {

  console.log(`w:${picture.width} h: ${picture.height} p:${picture.pixels.length}`)

  for(let i=0; i<maxDots;i++){

    let rx = random(minDistance,maxDistance)

    let ry = random(minDistance,maxDistance)

    let {x,y} = lastCoordinate

    let pixel = picture.get(x, y);

    let pixelColor = color(pixel)

    pixelImg.set(x,y,pixelColor)

    lastCoordinate.x += rx

    lastCoordinate.y += ry

  }

  // UpdatePixels of the images

  pixelImg.updatePixels();

}

​

​

function draw() {

  background(255)

  if (picture) image(picture, 0, 0, imgSize * 2, imgSize * 2)

  if (pixelImg) image(pixelImg, imgSize * 2, imgSize * 2, imgSize * 6, imgSize *6)

}