PImage pixel manipulating.

edited March 2018 in Programming Questions

HI.

I'm trying to manipulate inividual pixels within the pixel array obtained from a PImage. I followed the lecture of Dan Shiffman (here) where I got the code below from. When the image() is out commented however, the image is not displayed on the screen like in the video. I tried it on my pc in Java mode. (Adroid mode gives an error complaining that it can't start the main activity, but within the APDE it reacts the same as in Java mode). I also tried different images. If you want to try you can download a picture (here).

Whats wrong?

PImage img;

void setup() {
  size(100, 100);
  img = loadImage("laDefense.png");
}

void draw() {
//image(img,0,0);
  loadPixels();
  img.loadPixels();
  for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++) {
      int loc = x + y * width;
      pixels[loc] = img.pixels[loc];
    }
  }
  img.updatePixels();
}

Answers

  • Answer ✓

    Missing

    updatePixels();

    at the end?

  • Answer ✓

    Delete the img. in line 18 I guess

  • Of course, that's it. I thought it was necessary because you need to use, and loadPixels and ing.loadPixels, in order to make it work, and I wonder why? Also I've read somewhere that the pixels array made by createGraphics is the same as one created by PImage, but has some stuff added to be able to draw on it. What would be that stuff?

    Also,, is there an alpha element in each color value within the array when loading it with Pimage? Hope you can clarify some of the inner working of this.

    Thanks.

  • edited March 2018 Answer ✓

    You can specify if you want an alpha channel when you initialize the PImage. You don't need a plain loadPixels, unless you're loading the pixels array for the draw() function, which you're doing by just calling pixels. Because you loaded the pixels of draw, you also need to update the pixels of draw when you're finished. This function appears to just copy the pixels from the image into the draw function. You can do the same with just the image(img,0,0); method. Or you can simplify that code with:

    for ( int x = 0; x < img.pixels.width; x++) {pixels[x] = img.pixels[x]}

    For images with equal or fewer pixels than the canvas.

  • @BGADII === OK with colorMode you mean, but for instance a gif image can have an alpha channel for a fully tansparent or fully opaque, element. Can this be copied with PImage?

  • edited March 2018 Answer ✓

    I believe so, if you initialize a PImage from a source image it will create the image PImage with the same bitdepth etc. Processing can deal with multiple image types automatically so the alpha information will get copied over as well. You can load a transparent .PNG and don't need to change anything. If you modify the pixel information of the transparent PNG you just use a forth option in color() or shift by >> 24. If you create your own PImage through createImage(width,height, ARGB); you can specify if you want it to have an alpha channel or not. You could for example create a new PImage with an alpha channel and copy the RGB values of a non transparent image into the RGB positions of the new PImage and add alpha values as well. If you check out my smoke simulation I initialized a new ARGB pimage and then wrote the alpha channel based on an underlying particle simulation.

    https://gfycat.com/ForsakenAnimatedEasternnewt

    https://forum.processing.org/two/discussion/26658/smoke-simulation

  • @BGADII=== Thanks for clarifying that. Now for the other question about " that the pixels array made by createGraphics is the same as one created by PImage, but has some stuff added to be able to draw on it. What would be that stuff?" I am asking this because I want to interact between pixels arrays created by PImage and PGraphics, and it is giving me conflicts.

  • edited March 2018 Answer ✓

    Basically you can specify objects to render to PGraphics elements but not pimages. For example Pgraphics.rect(0,0,50,50); Will add the pixel information for the rect to the pgraphics element instead of the main draw() function. The draw() function is basically a pgraphics element which gets drawn every frame. You can copy the pixel data from a pgraphics image to a pimage using get(), you can draw a pimage to a pgraphics element by placing it inside a pgraphics element and specifying pgraphicsname.image(pimage,0,0);

  • edited March 2018

    @BGADII=== Thanks, I'll test this all.

  • edited March 2018

    All glory to Dan Shiffman, praise be his name. Long live the coding train.

Sign In or Register to comment.