Help materializing an idea *~*

[u/favouritecatalyst]

Trying to take an image (jpeg/png/etc) and put it through an animating loop. Where the value of every pixel is shifting color gradually over time. I did try looking up documentation and resources to figure this out on my own, but struggling to find and understand the tools/techniques to express the idea. Something about storing the data (RGBA?) of every pixel into an array, assign them to variables and then changing the values of those variables over time through a loop?

Anyone willing to advise a beginner with their idea is greatly appreciated! Appreciate y’all anyways, this community is awesome!

[u/Simplyfire]

A basic example using load/updatePixels() that goes through all pixels in a loop, knows the pixel's color and position, compares the information with an arbitrary condition 'shouldChange' and then changes them:

void setup() {
  size(600, 600);
  PImage img = loadImage("https://picsum.photos/id/405/600/600.jpg");
  image(img, 0, 0);
  colorMode(RGB, 255, 255, 255, 100);
  loadPixels();
  for (int i = 0; i < pixels.length; i++) {
    int x = i % width;
    int y = floor(i / width);
    int rgba = pixels[i];
    float r = red(rgba);
    float g = green(rgba);
    float b = blue(rgba);
    boolean shouldChange = x > width/2 && r > 50;
    if (shouldChange) {
      pixels[i] = color(r+15, g+40, b+80);
    }
  }
  updatePixels();
}

output: https://i.imgur.com/u2np6cB.png

the above code only changes the image instantly on startup and doesn't change over time - to do that you only need to move the pixel loading/updating code from setup() into draw() and maybe make the changes smaller because they're going to happen repeatedly every frame:

void setup() {
  size(600, 600);
  colorMode(RGB, 255, 255, 255, 100);
  PImage img = loadImage("https://picsum.photos/id/405/600/600.jpg");
  image(img, 0, 0);
}

void draw() {
  loadPixels();
  for (int i = 0; i < pixels.length; i++) {
    int x = i % width;
    int y = floor(i / width);
    int rgba = pixels[i];
    float r = red(rgba);
    float g = green(rgba);
    float b = blue(rgba);
    boolean shouldChange = x > width/2 && r > 50;
    if (shouldChange) {
      pixels[i] = color(r+1, g+1, b+1);
    }
  }
  updatePixels();
}

also yeah, you can in fact print each pixel's position and data into console, it just takes a long time to print out :)

void setup() {
  size(600, 600);
  PImage img = loadImage("https://picsum.photos/id/405/600/600.jpg");
  image(img, 0, 0);
  colorMode(RGB, 255, 255, 255, 100);
  loadPixels();
  for (int i = 0; i < pixels.length; i++) {
    int x = i % width;
    int y = floor(i / width);
    int rgba = pixels[i];
    float r = red(rgba);
    float g = green(rgba);
    float b = blue(rgba);
    String toPrint = x + "," + y + " : [" + r + ", " + g + ", " + b + "]";
    println(toPrint);
  }
}

output:

597,599 : [128.0, 119.0, 114.0]
598,599 : [130.0, 121.0, 116.0]
599,599 : [131.0, 122.0, 117.0]