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

**URL:** <https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643>\
**Category:** Coding Questions\
**Created:** [June 11, 2021, 4:45am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643 "2021-06-11T04:45:21Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![goblincaptain](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goblincaptain/32/13613_2.png) [@goblincaptain](https://discourse.processing.org/u/goblincaptain)\
**Post date:** [June 11, 2021, 4:45am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/1 "2021-06-11T04:45:21Z")

</div>

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:

 ![flower](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9661688627f81b56f05b62385b052802c83b555a.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 11, 2021, 6:39am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/2 "2021-06-11T06:39:57Z")

</div>

> [@goblincaptain](#):
>
> void setup() {  
> size(470, 900);  
> flower = loadImage(“flower.jpg”);  
> background(255);  
> }
> 
> void draw() {  
> image(flower, 0, 0);  
> }

would this part work?

---

<div class="post-metadata">

**Author:** ![goblincaptain](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goblincaptain/32/13613_2.png) [@goblincaptain](https://discourse.processing.org/u/goblincaptain)\
**Post date:** [June 11, 2021, 6:58am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/3 "2021-06-11T06:58:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 11, 2021, 7:22am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/4 "2021-06-11T07:22:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 11, 2021, 7:23am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/5 "2021-06-11T07:23:42Z")

</div>

> [@goblincaptain](#):
>
> x\<width; x++) {  
> for (int y=0; y\<height; y+

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

- Same here int loc0 = x+y\*width;

- and in the next 2 for-loops

---

<div class="post-metadata">

**Author:** ![goblincaptain](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goblincaptain/32/13613_2.png) [@goblincaptain](https://discourse.processing.org/u/goblincaptain)\
**Post date:** [June 11, 2021, 7:48am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/6 "2021-06-11T07:48:27Z")

</div>

> [@Chrisir](#):
>
> noLoop ();

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 11, 2021, 7:54am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/7 "2021-06-11T07:54:43Z")

</div>

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:

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

```auto
distanceBest = 10000;

```

check it out.

Chrisir

```auto

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

```

---

<div class="post-metadata">

**Author:** ![goblincaptain](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goblincaptain/32/13613_2.png) [@goblincaptain](https://discourse.processing.org/u/goblincaptain)\
**Post date:** [June 11, 2021, 8:09am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/8 "2021-06-11T08:09:10Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 11, 2021, 8:25am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/9 "2021-06-11T08:25:38Z")

</div>

Did you try my Sketch?

It worked for me

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 11, 2021, 8:27am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/10 "2021-06-11T08:27:17Z")

</div>

Try

```auto
println (x, y, bestX, bestY);
    

```

---

<div class="post-metadata">

**Author:** ![goblincaptain](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goblincaptain/32/13613_2.png) [@goblincaptain](https://discourse.processing.org/u/goblincaptain)\
**Post date:** [June 11, 2021, 8:27am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/11 "2021-06-11T08:27:49Z")

</div>

![截屏2021-06-11 下午4.27.02](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3b906e81ba87f953f62f72196b0190d0cda54cd2.png)

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 11, 2021, 8:28am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/12 "2021-06-11T08:28:59Z")

</div>

It takes a while till you can see something

---

<div class="post-metadata">

**Author:** ![goblincaptain](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goblincaptain/32/13613_2.png) [@goblincaptain](https://discourse.processing.org/u/goblincaptain)\
**Post date:** [June 11, 2021, 8:29am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/13 "2021-06-11T08:29:39Z")

</div>

> [@Chrisir](#):
>
> `println (x, y, bestX, bestY);`

 ![截屏2021-06-11 下午4.28.47](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4e1384539ced01a6193147b6ccfab6320248c9b7.png)

println() did show numbers, still no image

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 11, 2021, 8:30am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/14 "2021-06-11T08:30:58Z")

</div>

![Unbenannt](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/84228df107049101efe2eeebc9001a761c1fdee0.png)

10 lines only

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 11, 2021, 8:33am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/15 "2021-06-11T08:33:38Z")

</div>

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

```auto

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

```

---

<div class="post-metadata">

**Author:** ![goblincaptain](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goblincaptain/32/13613_2.png) [@goblincaptain](https://discourse.processing.org/u/goblincaptain)\
**Post date:** [June 11, 2021, 8:40am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/16 "2021-06-11T08:40:47Z")

</div>

@Chrisir

 ![截屏2021-06-11 下午4.40.02](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/28d8144832f9112fa885bbb415c76b6f154916c9.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 11, 2021, 8:49am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/17 "2021-06-11T08:49:44Z")

</div>

**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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f9256e7152e12d4ef2977de7d3f8eb4297d69450.png)

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

```

---

<div class="post-metadata">

**Author:** ![goblincaptain](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goblincaptain/32/13613_2.png) [@goblincaptain](https://discourse.processing.org/u/goblincaptain)\
**Post date:** [June 11, 2021, 9:02am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/18 "2021-06-11T09:02:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 11, 2021, 11:06am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/19 "2021-06-11T11:06:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![goblincaptain](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goblincaptain/32/13613_2.png) [@goblincaptain](https://discourse.processing.org/u/goblincaptain)\
**Post date:** [June 11, 2021, 11:10am UTC](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643/20 "2021-06-11T11:10:42Z")

</div>

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

[Next page](https://discourse.processing.org/t/help-want-to-redraw-an-image-using-lines-but-the-graphics-wont-show/30643.md?page=2)