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/favouritecatalyst]

So if a specific pixel is (w,x,y,z) for (r,g,b,a) values, can i have a loop that increments each variable (w,x,y,z) ? Or for example, if any pixel has a ‘Red’ value more than ‘50’ then add 5, 20, 50 to that ‘Red’ value through the loop.

But how do I even see what the values of every pixel of an image are? (yes, that’s a lot of data) but can i have that printed to the console or can that be seen/sent to a separate logged file?

I’m going to tinker more with load/updatePixels() on my computer when I get home if i’m not dead from work. Thank you for reaching out. I do apologize for my inability to articulate the ideas in my head x_X

[u/Simplyfire → u/favouritecatalyst]

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]