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

goblincaptain · June 11, 2021, 4:45am

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--------------------------------------------------------------

Chrisir · June 11, 2021, 6:39am

would this part work?

goblincaptain · June 11, 2021, 6:58am

@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-----------------

Chrisir · June 11, 2021, 7:22am

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

Chrisir · June 11, 2021, 7:23am

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

Same here int loc0 = x+y*width;
and in the next 2 for-loops

goblincaptain · June 11, 2021, 7:48am

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

Chrisir · June 11, 2021, 7:54am

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);
    }
  }
}
//

goblincaptain · June 11, 2021, 8:09am

@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

Chrisir · June 11, 2021, 8:25am

Did you try my Sketch?

It worked for me

Chrisir · June 11, 2021, 8:27am

Try

println (x, y, bestX, bestY);

goblincaptain · June 11, 2021, 8:27am

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

Chrisir · June 11, 2021, 8:28am

It takes a while till you can see something

goblincaptain · June 11, 2021, 8:29am

println() did show numbers, still no image

Chrisir · June 11, 2021, 8:30am

Unbenannt

10 lines only

Chrisir · June 11, 2021, 8:33am

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

goblincaptain · June 11, 2021, 8:40am

@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

Chrisir · June 11, 2021, 8:49am

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

goblincaptain · June 11, 2021, 9:02am

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

Chrisir · June 11, 2021, 11:06am

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

goblincaptain · June 11, 2021, 11:10am

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

Topic		Replies	Views
Draw line on image? Coding Questions	12	1781	October 11, 2019
Arrays to draw lines Coding Questions	0	1241	October 5, 2018
Why this code not working Coding Questions	4	335	July 22, 2019
PImage background() call not working Coding Questions	1	127	November 7, 2022
Help with some loops and image processing Coding Questions	2	528	January 17, 2019

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

Related topics