Loading...
Logo
Processing Forum

personal help needed

in General Discussion  •  Other  •  7 months ago  
Hello,

I wonder if anyone could help me through pm? I have some very simple questions on images and pixels and I really don't want to flood the forum with them. So, let me know if you are willing to help a poor sad young programmer. :D

The post will be deleted immediately after someone responds.

Replies(9)

The purpose of the forum is to help people with their questions. In my opinion the PM system is much less suitable for this. First, because if questions are simple, then many people can answer them. Just get the answer from whoevers around. Second, because simple questions are best asked with small code examples. Code examples focus both the problem and the answer plus they help you move forward more concretely than just wordy replies. The PM system is terrible at handling code. Third, on the forum you might get multiple answers with alternative or additional solutions. Fourth, using the forum helps build the Processing knowledge base, which is one of it's greatest assets. And so forth....

For some basic info on images and pixels check out: http://processing.org/learning/pixels/

If you have questions just ask. If you got some code, even better.
Generally, the helpful people don't help privately. This is a forum for all to learn from, see?
You won't be flooding the forum if you keep it to a single thread.
So... what questions do you have?
Thanks for both responses. The reason why I don't feel like asking those silly questions is that I have seen many of them already which always lead to links to references. I am not only new here, I am New New. But ok, I'll try not to make a fool out of myself...

Below is the code in Processing. What I get in SuperCollider is a Window filled with the pixels, selected in Processing with a click of a mouse. Since I finally decided to make an interface for my project in Processing, I want the same thing to be opened in Processing. Briefly speaking, I want to see that window of 'pixel' representation to be opened next to this sunflower. How do I do that?..

Copy code
  1. import oscP5.*;
  2. import netP5.*;

  3. OscP5 oscP5;
  4. NetAddress scAddr;
  5. PImage img;

  6. void setup() {
  7.   size(700, 400);
  8.   img = loadImage("sunflower.jpg");
  9.   oscP5 = new OscP5(this,5001);
  10.   scAddr = new NetAddress("127.0.0.1",57120);
  11. }

  12. void draw() {
  13.   background(0);
  14.   imageMode(CORNER);
  15.   image(img,10, 10, 200, 200);
  16. }

  17. void mousePressed() {  
  18.   OscMessage msg = new OscMessage("/processing/pixels");
  19. //  float[] reds = new float[100]; 
  20.   for (int i=-20; i <= 20; i++) {   
  21.     for (int j=-20; j <= 20; j++) {  
  22.       color col = get(mouseX+i, mouseY+j);
  23. //      reds[i*10+j] = red(col);
  24.         msg.add(red(col));
  25.         msg.add(green(col));
  26.         msg.add(blue(col));
  27.     }
  28.   }
  29. color col = get(mouseX, mouseY);
  30. println(red(col));
  31. msg.add(red(col)); 
  32. msg.add(green(col));
  33. msg.add(blue(col));
  34.   oscP5.send(msg, scAddr); 
  35. }
If I understand you correctly you want to get a kind of preview of the pixels you might be sending away with the click of a mouse. I adapted the code to show the pixel selection (40x40 area around the mouse) at the same size as the image. Is this what you mean?

(I removed the oscP5 code, because it's not relevant for this specific issue)

Adapted Code
Copy code
  1. PImage img;   
  2.  
  3. void setup() {
  4.   size(700, 400);
  5.   img = loadImage("http://25.media.tumblr.com/tumblr_m872wd37SR1rbzsl9o1_500.jpg");
  6.   imageMode(CORNER);
  7. }
  8.  
  9. void draw() {
  10.   background(0);
  11.   image(img, 10, 10, 200, 200);
  12.   PImage pix = get(mouseX-20, mouseY-20, 40, 40);
  13.   image(pix, 220, 10, 200, 200);
  14. }
  15.  
  16. void mousePressed() { 
  17.   for (int i=-20; i <= 20; i++) {  
  18.     for (int j=-20; j <= 20; j++) { 
  19.       color col = get(mouseX+i, mouseY+j);
  20.     }
  21.   }
  22.   color col = get(mouseX, mouseY);
  23. }
This works the way I wanted ! Thanks a lot ! 

The thing is, the preview is changing according to the movements of the mouse. What if I want the preview to freeze when clicked? 

Like this?

Adapted Code
Copy code
  1. PImage img, pix;
  2.  
  3. void setup() {
  4.   size(700, 400);
  5.   img = loadImage("http://25.media.tumblr.com/tumblr_m872wd37SR1rbzsl9o1_500.jpg");
  6.   imageMode(CORNER);
  7. }
  8.  
  9. void draw() {
  10.   background(0);
  11.   image(img, 10, 10, 200, 200);
  12.   if (pix!=null) image(pix, 220, 10, 200, 200);
  13. }
  14.  
  15. void mousePressed() { 
  16.   pix = get(mouseX-20, mouseY-20, 40, 40);
  17.   for (int i=-20; i <= 20; i++) {  
  18.     for (int j=-20; j <= 20; j++) { 
  19.       color col = get(mouseX+i, mouseY+j);
  20.     }
  21.   }
  22.   color col = get(mouseX, mouseY);
  23. }
Amnon's code had the preview image streching if it was near the top or right edges... I think I fixed that.
I also limited the preview to pixels on the image.
And added clicking-saved-current-preview.

Copy code
  1. PImage img, pix, saved;    

  2. void setup() {
  3.   size(700, 400);
  4.   img = loadImage("http://25.media.tumblr.com/tumblr_m872wd37SR1rbzsl9o1_500.jpg");
  5.   imageMode(CORNER);
  6. }

  7. void draw() {
  8.   background(0);
  9.   image(img, 10, 10, 200, 200);
  10.   pix = get(constrain(mouseX-20, 20, 170), constrain(mouseY-20, 20, 170), 40, 40);
  11.   pushMatrix();
  12.   translate(220, 10);
  13.   scale(5);
  14.   image(pix, 0, 0);
  15.   popMatrix();
  16.   if ( saved != null ) {
  17.     pushMatrix();
  18.     translate(430, 10);
  19.     scale(5);
  20.     image(saved, 0, 0);
  21.     popMatrix();
  22.   }
  23. }

  24. void mousePressed() {  
  25.   //  for (int i=-20; i <= 20; i++) {   
  26.   //    for (int j=-20; j <= 20; j++) {  
  27.   //      color col = get(mouseX+i, mouseY+j);
  28.   //    }
  29.   //  }
  30.   //  color col = get(mouseX, mouseY);
  31.   saved = pix.get();
  32. }
Wow, that's even better, I cannot tell you how grateful I am !

One more thing... Sorry, it might seem that I am using you, but I am. :D I would like to get an array of RGB values of the area presented. I am not exactly sure what way would be best, so I'll explain what I want to do with that data. 

Basically, when the area will freeze, the pixel data should be presented in such a way so it would be comfortable to apply If statements to them in SuperCollider. I was thinking, maybe it would work best if the list of pixel numbers would look like this: [r,g,b,r1,g1,b1, etc]. It is very possible that there is another way to achieve the result I want. 

The question is:
How do you get and arrange the pixel data so it would be ready for sending it to SC? 
A PImage object is basically a 2D array of color values.
You can pick individual pixels out of it using get():

Copy code
  1. color tempCol = saved.get(10,10);

You can work with color data very easily; to get the amounts of red, green, and blue, in a color, simply use:

Copy code
  1. float tempR = red( tempCol );
  2. float tempG = green( tempCol );
  3. float tempB = blue( tempCol );

Also, if you do:

Copy code
  1. saved.loadPixels();

Then you can have access to the pixels directly as a 1D array of colors:

Copy code
  1. color tempCol = saved.pixels[210];
Using these methods, and possibly one or two for loops, it should be a simple matter to iterate through the PImage and accumulate the data you want into an array, possibly by using append() (which you can look up in the reference yourself).