----- Coding Tutorial by Patt Vira ----- 

Name: Image Manipulation - Pixelated Techniques

Video Tutorial: https://youtu.be/FIvHnnOJ-7o

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

let img; let originalImg; let canvasW = 400; canvasH = 500;

let pix = []; let cols, rows; let size = 10;

let rectX, rectY, rectW, rectH;

let velocityX, velocityY;

let updateInterval = 10; let speed = 3;

​

function preload() {

  originalImg = loadImage("images/monalisa.jpg");

}

​

function setup() {

  createCanvas(canvasW, canvasH);

  originalImg.resize(canvasW, 0); 

  img = createImage(canvasW, canvasH);

  img.copy(originalImg, 0, 0, canvasW, canvasH, 0, 0, canvasW, canvasH);

  img.filter(GRAY);

  rectX = random(0, 10);

  rectY = random(0, 10);

  velocityX = random(-speed, speed);

  velocityY = random(-speed, speed);

  fetchPixels();

}

​

function draw() {

  background(220);

  image(img, 0, 0);

  /* // Uncomment for a bouncing rectangle

  rectX += velocityX;

  rectY += velocityY;

  if (rectX <= 0 || rectX + rectW * size >= width) {

    velocityX *= -1;

    rectX = constrain(rectX, 0, width - rectW * size);

  }

  if (rectY <= 0 || rectY + rectH * size >= height) {

    velocityY *= -1;

    rectY = constrain(rectY, 0, height - rectH * size);

  }

  if (frameCount % updateInterval == 0) {

    fetchPixels();

  }

  */

  noStroke();

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

    for (let j=0; j<rectH; j++) {

      let x = rectX + i*size;

      let y = rectY + j*size;

      fill(pix[i][j]);

      rect(x, y, size, size);

    }

  } 

}

​

 // Uncomment for mouse interaction

function mouseDragged() {

  rectX = mouseX; 

  rectY = mouseY;

  if (frameCount % updateInterval == 0) {

    fetchPixels(mouseX, mouseY);

  }

}

​

​

function fetchPixels() {

  rectW = floor(random(20, 30));

  rectH = floor(random(10, 20));

  // Completely reset pix to avoid old data lingering

  pix = new Array(rectW).fill().map(() => new Array(rectH));

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

    pix[i] = [];

    for (let j=0; j<rectH; j++) {

      let x = rectX + i*size;

      let y = rectY + j*size;

      pix[i][j] = originalImg.get(x, y);

    }

  }

}

​

​

​

​

​

​