Loading...
Logo
Processing Forum
General Discussion Other
samuelmrowe
samuelmro..

Pixel Sorting - Curves

in General Discussion  •  Other  •  8 months ago  
Hi guys, 

So I'm relatively new to processing, and certainly new to code in general; this is all very interesting and quite hard for me. And great fun.

I've been doing simple pixel sorting processing, similar to that of Kim Asendorf (but much much simpler) and Adam Ferris.
The best example though would be this blog. The code he's using are simple enough for me to get my head around but still have very interesting results.

My question is therefore this: 

How (as I'm sure it is possible) would I use code so that the final image exhibits curves in the lines of pixels? Rather than straight horizontal or even zigzagged lines; curves of varying lengths?

I appreciate the frustration it's easy to get with someone like me who doesn't really know what they're talking about, but I wanna learn, thats what matters eh?

I hope some of you processing geniuses have an idea.

Thanks for reading my long question, 

Sam

Replies(14)

PhiLho
PhiLho

Re: Pixel Sorting - Curves

8 months ago
The code reorder pixels following a given algorithm: detect some condition in the color of a pixel, swap it with another pixel, or get the color of another pixel.
Most of the time, the result is probably random and unexpected: it is a matter of experiments.
With such algorithm, it is unlikely to get a given shape, curve or something else. Unless perhaps you try some different kind of algorithm, using a positional condition instead of one based on color.
asimes
asimes

Re: Pixel Sorting - Curves

8 months ago
Curves are not a very easy thing to describe programmatically, maybe you should try making a path that is some section of an arc of a circle first.

For example, pick some point on the screen, I'll call it A. Pick another point on the screen, I'll call it B, and B is defined as some distance from A (a radius distance). To make things easier, say that B is exactly above A so that B.x == A.x and B.y < A.y (because decreasing y values in Processing means up). I'll pick an arbitrary radius just to give it a number, say 10. Another point defined as being a distance (more or less due to pixel rounding) of 10 from A could be C. C would be the next point that is a part of the circle going clockwise (relative to B). You would have to do some math to make sure C has integer values for C.x and C.y, but basically it would be slightly to the right and / or down from B. Do whatever color comparisons you want between B and C. If the comparison returns the result that C should inherit some color from B, then you continue the process with another point D. D would also be a distance of 10 from A but further clockwise relative to B or C. You would do the test again to see if D inherits some color from C and so on.

To make it more interesting, you can randomize the radius distance so that it is not always 10. If you study curve programatic representations then you might be able to generalize this process to make curves that are not arcs, but that would be much more complicated.

Edit: Picking clockwise was also arbitrary, you could also randomly pick counter-clockwise and it would work, but then C would be to the left / down from B. Additionally, if you get this working well, B would not need to be absolutely above A, it could be anywhere on the circle some distance from A.
asimes
asimes

Re: Pixel Sorting - Curves

8 months ago
Maybe this will help...


PhiLho
PhiLho

Re: Pixel Sorting - Curves

8 months ago
Note that " pixel sorting", while commonly used, is an abuse of language.
The code I saw actually overwrites some pixels with others, duplicating pixels, loosing others.
That's not what I call "sorting", which would swap pixels but never loose one.
Of course, that's not important, as long as the result is looking good, but I find the term confusing and misleading.
samuelmrowe
samuelmro..

Re: Pixel Sorting - Curves

8 months ago
That's all useful, thanks a lot for the help. using parts of a circle is a good idea, but a bit more time than I have currently (I'm producing a book cover)

One last question though, this is the code I'm using at the mo:

Copy code
  2. int mode = 0;

  4. //Pixel Sorting - Cat Ba Color/Noise

  6. int threshold;

  8. int loops = 1;

  10. PImage img;
  11. String imgFileName = "dashboard";
  12. String fileType = "jpeg";

  14. boolean saved = false;

  16. void setup() {
  17.   img = loadImage(imgFileName+"."+fileType);
  18.   size(img.width, img.height);
  19.   frameRate(12);
  20.   image(img, 0, 0);
  21. }

  23. void draw(){
  24.   img.loadPixels();
  25.     for (int k=width; k<width*height-width; k++){
  26.       if (threshold < 200) {
  27.         if (brightness(img.pixels[k]) > threshold){
  28.           img.pixels[k-1] = color(
  29.           int(red(img.pixels[k-width])),
  30.           int(green(img.pixels[k-width])),
  31.           int(blue(img.pixels[k-width])));
  32.         } else {
  33.           img.pixels[k-width] = color(
  34.           int(red(img.pixels[k+1])),
  35.           int(green(img.pixels[k+1])),
  36.           int(blue(img.pixels[k+1])));
  37.         }
  38.         threshold = threshold+1;
  39.       } else {
  40.         threshold = 0;
  41.       }
  42.       image(img,0,0);
  43.   if(!saved && frameCount >= loops) {
  44.     saveFrame(imgFileName+"_"+mode+".png");
  45.     saved = true;
  46.     println("DONE"+frameCount);
  47.     System.exit(0);
  48.   }

  50.     }
  51.   img.updatePixels();
  52.   image(img,0,0);
  53. }
  54.   

It worked well until I added the chunk to save the image. So far it's only 'sorting' for one frame. I need a lot more than that to achieve anything visually noticeable. Any idea what I'd change?

Cheers again, 

Sam
PhiLho
PhiLho

Re: Pixel Sorting - Curves

8 months ago
Hit Ctrl+T to format correctly your code.
You will see that the saveFrame code is within the first loop, so this one will never finish.
You should put this save code at the very end of draw().
samuelmrowe
samuelmro..

Re: Pixel Sorting - Curves

8 months ago
Thanks - I didn't know the formatting trick, it makes more sense now. Although when i put it right at the very end i have trouble; it either says I'm mixing active and static modes, or that there are too many '{' when they seem to line up fine. Either an unexpected token, or it doesn't have a partner. Any ideas? Sorry for so many questions, thanks so much for your help. 
Sam
PhiLho
PhiLho

Re: Pixel Sorting - Curves

8 months ago
" at the very end of draw()", for me, means "inside draw() but after anything else inside it". Not "after draw()".
The active / static modes means you tried to put it after.
" too many '{' " -> I don't know what you did, so hard to tell. Another trick: if you click after an opening or closing brace, you can see the matching one to be highlighted.


samuelmrowe
samuelmro..

Re: Pixel Sorting - Curves

8 months ago
Ok I think I get it, still having a bit of trouble though. This is what I have:

Copy code
  2. int mode = 0;

  4. //Pixel Sorting - Cat Ba Color/Noise

  6. int threshold;

  8. int loops = 1;

  10. PImage img;
  11. String imgFileName = "dashboard";
  12. String fileType = "jpeg";

  14. boolean saved = false;

  16. void setup() {
  17.   img = loadImage(imgFileName+"."+fileType);
  18.   size(img.width, img.height);
  19.   frameRate(12);
  20.   image(img, 0, 0);
  21. }

  23. void draw() {
  24.   img.loadPixels();
  25.   for (int k=width; k<width*height-width; k++) {
  26.     if (threshold < 200) {
  27.       if (brightness(img.pixels[k]) > threshold) {
  28.         img.pixels[k-1] = color(
  29.         int(red(img.pixels[k-width])), 
  30.         int(green(img.pixels[k-width])), 
  31.         int(blue(img.pixels[k-width])));
  32.       } 
  33.       else {
  34.         img.pixels[k-width] = color(
  35.         int(red(img.pixels[k+1])), 
  36.         int(green(img.pixels[k+1])), 
  37.         int(blue(img.pixels[k+1])));
  38.       }
  39.       threshold = threshold+1;
  40.     } 
  41.     else {
  42.       threshold = 0;
  43.     }
  44.     image(img, 0, 0);
  45.     if (!saved && frameCount >= loops)
  46.     }
  47.     img.updatePixels();
  48.   image(img, 0, 0);
  49.   {
  50.     saveFrame(imgFileName+"_"+mode+".png");
  51.     saved = true;
  52.     println("DONE"+frameCount);
  53.     System.exit(0);
  54.   }
  55. }

When trying to run, the '}' at 46 is an 'unexpected token'. Deleting it results in the pairings being odd. I know these are really simple problems, but this is a pretty steep learning curve. Thanks a lot for your help.
PhiLho
PhiLho

Re: Pixel Sorting - Curves

8 months ago
I see... An exercised eye see immediately the issue, but for a beginner it is less obvious.
That's why showing code is important: we cannot guess what you did wrong.

You had the brace after the if condition in the wrong direction...
I think you don't even need a test. Something like:
Copy code
  1. int mode = 0;

  3. //Pixel Sorting - Cat Ba Color/Noise
  4. int threshold;

  6. PImage img;
  7. String imgFileName = "dashboard";
  8. String fileType = "jpeg";

  10. void setup() {
  11.   img = loadImage(imgFileName+"."+fileType);
  12.   size(img.width, img.height);
  13.   image(img, 0, 0);
  14. }

  16. void draw() {
  17.   img.loadPixels();
  18.   for (int k=width; k<width*height-width; k++) {
  19.     if (threshold < 200) {
  20.       if (brightness(img.pixels[k]) > threshold) {
  21.         img.pixels[k-1] = color(
  22.         int(red(img.pixels[k-width])),
  23.         int(green(img.pixels[k-width])),
  24.         int(blue(img.pixels[k-width])));
  25.       } else {
  26.         img.pixels[k-width] = color(
  27.         int(red(img.pixels[k+1])),
  28.         int(green(img.pixels[k+1])),
  29.         int(blue(img.pixels[k+1])));
  30.       }
  31.       threshold = threshold+1;
  32.     } else {
  33.       threshold = 0;
  34.     }
  35.   }
  36.   img.updatePixels();
  37.   image(img, 0, 0); 
  38.   saveFrame(imgFileName+"_"+mode+".png");
  39.   println("DONE"+frameCount);
  40.   System.exit(0);
  41. }
might work.
Not tested, but at least it compiles.
samuelmrowe
samuelmro..

Re: Pixel Sorting - Curves

8 months ago
Ahaa! That's worked very well. Now, just so I understand and learn a bit more...

What parameter defines how long it proceses for? Like, how extreme the effect is when finished? So I could change it to be shorter or longer... if possible.
samuelmrowe
samuelmro..

Re: Pixel Sorting - Curves

8 months ago
Or (sorry just thinking of ideas) would it be possible to code a command that saves the image as it looks at any time? So you have the code without the saving feauture (a copy of what mine was before):

Copy code
  2. //Pixel Sorting - Cat Ba Color/Noise
  3. int threshold;
  4. String url;
  5. PImage img;

  7. void setup(){
  8.   img=loadImage("Screen Shot 2013-02-17 at 13.44.29.png");
  9.   size(img.width,img.height);
  10.   frameRate(12);
  11.   threshold = 135;
  12. }

  14. void draw(){
  15.   img.loadPixels();
  16.     for (int k=width; k<width*height-width; k++){
  17.       if (threshold < 255) {
  18.         if (brightness(img.pixels[k]) > threshold){
  19.           img.pixels[k-1] = color(
  20.           int(red(img.pixels[k-width])),
  21.           int(green(img.pixels[k-width])),
  22.           int(blue(img.pixels[k-width])));
  23.         } else {
  24.           img.pixels[k-width] = color(
  25.           int(red(img.pixels[k+1])),
  26.           int(green(img.pixels[k+1])),
  27.           int(blue(img.pixels[k+1])));
  28.         }
  29.         threshold = threshold+1;
  30.       } else {
  31.         threshold = 0;
  32.       }
  33.     }
  34.   img.updatePixels();
  35.   image(img,0,0);
  36. }

Would there be a way to make it save the whole image on click for example? I'd like to be able to save the whole image at any point, even if it is bigger than the srceen (by screen capturing). Is it possible?

Thanks again for all you're help, I'm actually learning!
PhiLho
PhiLho

Re: Pixel Sorting - Curves

8 months ago
Put the lines:
Copy code
  1.   save(imgFileName+"_"+mode+".png");
  2.   println("DONE"+frameCount);
  3.   System.exit(0);
in a keyPressed() or mousePressed() function. Look at them in the Reference to understand how they work.

samuelmrowe
samuelmro..

Re: Pixel Sorting - Curves

8 months ago
Works well, thanks for all your help!
Top Reply

Statistics

  • 14 Replies
  • 1127  Views
  • 1 Followers

Actions

Related Posts