const fieldSize = 3

​

const h = 70

const w = 50

​

const color1 = '#FF0633'

const color2 = '#FF7E06'

​

let pg = null

​

let img;

function preload() {

  img = loadImage('img.jpg');

}

​

​

function setup() {

  createCanvas(w*pixelSize, h*pixelSize);

  pg = createGraphics(w, h);

  noSmooth()

  noLoop()

​

  image(img, 0, 0, width, height);

  let d = pixelDensity();

  let pixelCount = 4 * (width * d) * (height * d );

  loadPixels();

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

    pixels[i + pixelCount] = pixels[i];

  }

  updatePixels();

  for ( let r = 0; r < height; r+= fieldSize*d ){

    for ( let c = 0; c < width; c+= fieldSize*d ){

      push();

      translate( fieldSize*d * r, fieldSize*d * c )

      rect( 0,0, fieldSize*d* pixelSize, fieldSize*d * pixelSize)

      pop();

    }

  }

​

}

​

/*

function draw() {

  background(220);

  pg.background(color1)

  pg.loadPixels();

​

  console.log( pg.pixels.length )

  for ( let r = 0; r < h*4; r += fieldSize ){

    for ( let k = 0; k < w*4; k += fieldSize ){

      for ( let f = 0; f < fieldSize; f++ ){

        if( r >= h*4/2 ){

          let newColor = hexToRgb(color2)

​

          let i = ( r * w + k ) * 4

​

          pg.pixels[i] = newColor.r // r

          pg.pixels[i+1] = newColor.g // g

          pg.pixels[i+2] = newColor.b // b

          pg.pixels[i+3] = 255 // alpha

        }

​

      }

    }

  }

  // console.log(pg.pixels.length)

  pg.updatePixels();

​

  image(pg, 0, 0, width, height);

}

*/

​

function hexToRgb(hex) {

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

  return result ? {

    r: parseInt(result[1], 16),

    g: parseInt(result[2], 16),

    b: parseInt(result[3], 16)

  } : null;

}