Inspiration:

Github repository

Screen Recording 2022-11-01 at 2.14.55 PM.mov

Glitch Effect:

My browser frequently crashes when playing the pixelated graphs.

frog.jpg

Screen Shot 2022-11-01 at 1.18.07 PM.png

Screen Recording 2022-11-01 at 1.42.07 PM.mov

Favorite effect*

Screen Recording 2022-11-01 at 1.49.51 PM.mov

let frog;
function preload() {
  frog = loadImage("frog.jpg");
}

function setup() {
  createCanvas(frog.width, frog.height);
  noStroke();
}

function draw() {
  frog.loadPixels();

  for (let x = 0; x < frog.width; x += 8) {
    for (let y = 0; y < frog.height; y += 4) {
          let i = (y * frog.width + x) * 4;

          let r = frog.pixels[i];
          let g = frog.pixels[i + 1];
          let b = frog.pixels[i + 2];
          let col = color(random(r), random(g), random(b));
          //main diff: randomizing r, g, b

          fill(col);
          rect(x, y, width, height);
  
        }
      }
  frog.updatePixels();
}

Screen Recording 2022-11-01 at 1.57.35 PM.mov

let frog;

function preload() {
  frog = loadImage("frog.jpg");
}

function setup() {
  createCanvas(frog.width, frog.height);
  noStroke();
}

function draw() {
  frog.loadPixels();

  for (let x = 0; x < frog.width; x += 8) {
    for (let y = 0; y < frog.height; y += 4) {
          let i = (y * frog.width + x) * 4;

          let r = frog.pixels[i];
          let g = frog.pixels[i + 1];
          let b = frog.pixels[i + 2];
          let col = color(random(r, 180), random(g, 20), random(b, 130));
          
          fill(col);
          rect(random(x), random(y), width, height);
  //main difference: randomizing x, y
        }
      }

  frog.updatePixels();
}

Screen Shot 2022-11-01 at 1.58.01 PM.png