HELP Want to redraw an image using lines but the graphics won't show

My concept is to load an image and scan through all its pixels. For every pixel, find another pixel in the whole image that has the biggest color difference. Once the program detects the best pair(biggest difference), it will draw a line between the two pixels’ locations.

My problem is for some reason, the lines and even the image itself won’t show up. I will appreciate if anybody can help me solve this issue. Thanks!

IMAGE:

--------------------------------------------------------------------CODE--------------------------------------------------------------

PImage flower;
color secondColor;
color firstColor;
float r1, g1, b1, r2, g2, b2;
float distanceNow = dist(r1, g1, b1, r2, g2, b2);
int bestX=0;
int bestY=0;

void setup() {
size(470, 900);
flower = loadImage(“flower.jpg”);
background(255);
}

void draw() {
image(flower, 0, 0);
flower.loadPixels()

for (int x=0; x<width; x++) {
for (int y=0; y<height; y++) {

  int loc0 = x+y*width;
  firstColor = flower.pixels[loc0];
  r1 = red(firstColor);
  g1 = green(firstColor);
  b1 = blue(firstColor);
  distanceNow = dist(r1, g1, b1, r2, g2, b2);

  for (int a=width-1; a>=0; a--) {
    for (int b=height-1; b>=0; b--) {
      int loc1 = a+b*width;
      secondColor = flower.pixels[loc1];
      r2 = red(secondColor);
      g2 = green(secondColor);
      b2 = blue(secondColor);
      float distanceNew = dist(r1, g1, b1, r2, g2, b2);

      if (loc0!=loc1) {
        if (distanceNew > distanceNow) {
          distanceNow = distanceNew;
          bestX = a;
          bestY = b;
        }
      }
    }
  }
  updatePixels();
  strokeWeight(1);
  stroke(0);
  line(x, y, bestX, bestY);
}

}
}

--------------------------------------------------------------------CODE--------------------------------------------------------------

would this part work?

@Chrisir

I tried to delete some of the codes below, and right now this shows the line and the flower image, so I feel like there’s something wrong below instead of the setup part

-----------------TEST CODE-----------------

PImage flower;
color currentColor;
float r1, g1, b1;

void setup() {
size(470, 900);
flower = loadImage(“flower.jpg”);
background(200);
}

void draw() {

image(flower, 0, 0);
flower.loadPixels();

strokeWeight(1);
stroke(5, 20, 54);
line(34, 35, mouseX, mouseY);

for (int x=0; x<width; x++) {
for (int y=0; y<height; y++) {

  int loc0 = x+y*width;

  currentColor = flower.pixels[loc0];

  r1 = red(currentColor);
  g1 = green(currentColor);
  b1 = blue(currentColor);
}

}
strokeWeight(1);
stroke(255);
line(0, 0, 295, 230);
}

-----------------TEST CODE-----------------

Obviously you need to say noLoop (); in setup ()

here I guess you want flower.width and flower.height

  • Same here int loc0 = x+y*width;

  • and in the next 2 for-loops

The reason why I said width is because the dimension of the window is the same as that of the image. But I did change to flower.width and flower.height and I added the noLoop(); but the program runs the same, its still only the background color and no lines or image

this version does something (limited to 10 lines)

Problems I see:

  • when you draw a line from every pixel, the entire image will be black. You need something like “only draw a line when the first pixel is not white”
  • you seem to check each pixel against each other pixel (from p1 to p2 and from p2 to p1). Not good. Maybe you can start the inner 2 for loops like so:
for (int a=flower.width-1; a>x; a--) {
        for (int b=flower.height-1; b>y; b--) {

Full Sketch
(without these 2 points I mentioned)
I changed the distanceNow to distanceBest and changed some stuff like

distanceBest = 10000;

check it out.

Chrisir



PImage flower;
color secondColor;
color firstColor;
float r1, g1, b1, r2, g2, b2;
float distanceBest; //  = dist(r1, g1, b1, r2, g2, b2);
int bestX=0;
int bestY=0;
int i; 

//---------------------------------------------------------

void setup() {
  size(470, 900);
  flower = loadImage("flower.jpg");
  background(255);
  noLoop();
}

void draw() {
  image(flower, 0, 0);
  flower.loadPixels(); 

  // change 6 to 0 
  for (int x=26; x<flower.width; x++) {
    for (int y=6; y<flower.height; y++) {

      int loc0 = x+y*flower.width;
      firstColor = flower.pixels[loc0];
      r1 = red(firstColor);
      g1 = green(firstColor);
      b1 = blue(firstColor);
      distanceBest = 10000; // dist(r1, g1, b1, r2, g2, b2);

      for (int a=flower.width-1; a>0; a--) {
        for (int b=flower.height-1; b>0; b--) {
          int loc1 = a+b*flower.width;
          secondColor = flower.pixels[loc1];
          r2 = red(secondColor);
          g2 = green(secondColor);
          b2 = blue(secondColor);
          float distanceNew = dist(r1, g1, b1, r2, g2, b2);

          if (loc0!=loc1) {
            if (distanceNew < distanceBest) {
              distanceBest = distanceNew;
              bestX = a;
              bestY = b;
            }
          }
        }
      }
      //updatePixels();
      strokeWeight(1);
      stroke(0);
      i++;
      if (i<10)
        line(x, y, bestX, bestY);
    }
  }
}
//

@Chrisir
Thank you for the suggestion! I tried the code you post and change to a>x and b>y but for some reason there is still nothing but the white background. I understand the whole image might be black but the problem here seems to be things just don’t show up

Did you try my Sketch?

It worked for me

Try

println (x, y, bestX, bestY);
    

I did try your sketch but nothing happens… im very confused now

It takes a while till you can see something

println() did show numbers, still no image

Unbenannt

10 lines only

here the image should show immediately and then the 10 lines after 20 seconds



PImage flower;
color secondColor;
color firstColor;
float r1, g1, b1, r2, g2, b2;
float distanceBest; //  = dist(r1, g1, b1, r2, g2, b2);
int bestX=0;
int bestY=0;
int i; 

//---------------------------------------------------------

void setup() {
  size(470, 900);
  flower = loadImage("flower.jpg");
  background(255);
  noLoop();
  image(flower, 0, 0);
}

void draw() {
  flower.loadPixels(); 

  // change 6 to 0 
  for (int x=26; x<flower.width; x++) {
    for (int y=6; y<flower.height; y++) {

      int loc0 = x+y*flower.width;
      firstColor = flower.pixels[loc0];
      r1 = red(firstColor);
      g1 = green(firstColor);
      b1 = blue(firstColor);
      distanceBest = 10000; // dist(r1, g1, b1, r2, g2, b2);

      for (int a=flower.width-1; a>0; a--) {
        for (int b=flower.height-1; b>0; b--) {

          int loc1 = a+b*flower.width;
          secondColor = flower.pixels[loc1];
          r2 = red(secondColor);
          g2 = green(secondColor);
          b2 = blue(secondColor);
          float distanceNew = dist(r1, g1, b1, r2, g2, b2);

          if (loc0!=loc1) {
            if (distanceNew < distanceBest) {
              distanceBest = distanceNew;
              bestX = a;
              bestY = b;
            }
          }//if
        }//for
      }//for
      //updatePixels();
      strokeWeight(1);
      stroke(0);
      i++;
      if (i<10)
        line(x, y, bestX, bestY);
    }//for
  }//for
}//func
//

@Chrisir

The image does show up immediately, but sadly the lines don’t even after one minute, i change the lines to white color but nothing happens either

Remarks:

  • you won’t see black lines on a black background (the main image color), so I use gray for lines

  • maximum 90 lines (with variable i)

  • only when brightness > 166 we check

new version [EDITED]

Unbe22nannt

PImage flower;
color secondColor;
color firstColor;
float r1, g1, b1, r2, g2, b2;
float distanceBest; //  = dist(r1, g1, b1, r2, g2, b2);
int bestX=0;
int bestY=0;
int i; 

//---------------------------------------------------------

void setup() {
  size(470, 900);
  flower = loadImage("flower.jpg");
  flower.resize(100, 0); 
  background(255);
  noLoop();
  image(flower, 0, 0);
}

void draw() {
  flower.loadPixels(); 

  // change 6 to 0 
  for (int x=26; x<flower.width; x++) {
    for (int y=6; y<flower.height; y++) {

      int loc0 = x+y*flower.width;
      firstColor = flower.pixels[loc0];
      r1 = red(firstColor);
      g1 = green(firstColor);
      b1 = blue(firstColor);
      distanceBest = 10000; // dist(r1, g1, b1, r2, g2, b2);

      if (brightness(firstColor)>166) {
        for (int a=flower.width-1; a>0; a--) {
          for (int b=flower.height-1; b>0; b--) {

            int loc1 = a+b*flower.width;
            secondColor = flower.pixels[loc1];
            r2 = red(secondColor);
            g2 = green(secondColor);
            b2 = blue(secondColor);
            float distanceNew = dist(r1, g1, b1, r2, g2, b2);

            if (loc0!=loc1) {
              if (distanceNew < distanceBest) {
                distanceBest = distanceNew;
                bestX = a;
                bestY = b;
              }
            }//if
          }//for
        }//for
        //updatePixels();
        strokeWeight(1);
        stroke(110);
        i++;
        if (i<90) {
          print(".");
          line(x, y, bestX, bestY);
        }
      }
    }//for
  }//for
  println("done");
}//func
//


@Chrisir It finally works now! Thank you so much for you time and patience!

1 Like

Maybe you can show less lines :

  • with the brightness check (I did this)

  • By checking if start and end points of a line have a dist > 20 and < 200

  • By allowing different lines only when they (their start and end points) have a certain distance

Thanks for the feedback! @Chrisir I also post another question about Pbox2d, would you mind helping me on that problem? Thank you very much!