# How to make a program that works by coloring each pixel by distance to another?

**URL:** <https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669>\
**Category:** Coding Questions\
**Created:** [October 20, 2018, 1:32am UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669 "2018-10-20T01:32:34Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 20, 2018, 1:32am UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/1 "2018-10-20T01:32:34Z")

</div>

Hey, so the question might be very confusing, but its actually pretty simple^^ What i would like to do, is to write a program that has an unspecified number of Points (1-20 or so… maybe more) that all maintain a certain distance to each other. I already had something that worked, but only for keeping distance to 1 point… all the other points just merged together and did only care for the distance to the main point (which is controlled by mousePosition). Now the problem is, that i cant make it only dependent on distance to each other… What i did until now was to change the color of each pixel base on the distance of it to each point i have. And that each Point changes its own position based on the pixels 1 above, left, right and below itself. First of all, this colorcoding was pretty useless, since the total of color “added” to each pixel equals to 282 (dist from 0,0 to 200, 200) which means that its basically useless…(imagine you have distances from 0-10. At 0 dist is 0, at 10 it is 10, but for a point that starts at 10, 10 is 0 and 0 is 10. Now add each point across this line and you end up with each point having 10…) so i map the value after adding them for each point (i do this for each pixel) to a range from 0 to 1 and the apply a sinus curve that i made to make it a waterfall like change and remap it again frm 0 to 1 to 0 to 255 (i also tried to map them using color to be more precise, becaue pixels red only gives me ints and is pretty unprecise and doesn’t work well… and after the image is done i look for each points position up down left and right positions and move them in the direction that has the color closest to 20, when i used red(), and something -10million with color(), but it moves weird… btw, the sin curve i used is :  
color1 = (sin(color1 \* PI + (0.5 \* PI)) / 2) + 0.5; you can just use it again afterwards to make the change be sharper. Now i tried everything, but i’m getting so confused and i’d like to ask if someone knows a better way to achive what i’m looking for that doesn’t require to use color, or if someone can do this better, or give me some help regarding this… i can also include the code i got until now, but it honestly has become a giant mess, after i changed and tried so much, that it just doesn’t show much… somewhere inbetween i also got a fractal image even though i don’t know why xD… so every help is very appreciated^^

```auto
Point[] p = new Point[3];

void setup() {
  size(100, 100);
  for (int i = 0; i < p.length; i++) {
    p[i] = new Point(50+10*i, 50);
  }
  p[0].update = false;
} 

void draw() {
  background(255);
  p[0].setPos(mouseX, mouseY);
  for (int i = 0; i < p.length; i++) {
    p[i].bUpdate();
  }
  loadPixels();
  for (int i = 0; i < p.length; i++) { 
    pixels[p[i].y*width+p[i].x] = color(0);
  }
  updatePixels();
}

class Point {
  int x;
  int y;
  boolean update = true;

  Point(int x_, int y_) {
    x = x_;
    y = y_;
  }

  void bUpdate() {
    if (update) {
      float[] force = new float[4];
      for (int i = 0; i < p.length; i++) {
        force[0] += dist(x, y-1, p[i].x, p[i].y);
        force[1] += dist(x, y+1, p[i].x, p[i].y);
        force[2] += dist(x-1, y, p[i].x, p[i].y);
        force[3] += dist(x+1, y, p[i].x, p[i].y);
      }
      if (force[0] < force[1] && force[0] > 20 * p.length) {
        y -= 1;
      } else if (force[1] < force[0] && force[1] > 20 * p.length) {
        y += 1;
      } else if (force[0] > force[1] && force[0] < 20 * p.length) {
        y -= 1;
      } else if (force[1] > force[0] && force[1] < 20 * p.length) {
        y += 1;
      }
      if (force[2] < force[3] && force[2] > 20 * p.length) {
        x -= 1;
      } else if (force[3] < force[2] && force[3] > 20 * p.length) {
        x += 1;
      } else if (force[2] > force[3] && force[2] < 20 * p.length) {
        x -= 1;
      } else if (force[3] > force[2] && force[3] < 20 * p.length) {
        x += 1;
      }
    }
  }

  void setPos(int x_, int y_) {
    x = x_;
    y = y_;
  }
}

```

Thats how it looks more or less (at least its readable). I remade it whole and it still has the same problem… The second and third points just always get too close together… They should also keep the same distance to each other as to the main Point…

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 23, 2018, 8:28pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/2 "2018-10-23T20:28:20Z")

</div>

> [@Lexyth](#):
>
> an unspecified number of Points (1-20 or so… maybe more) that all maintain a certain distance to each other

In 2D space an equal distance between all points isn’t actually geometrically possible above 3. 4 points can’t all maintain the same distance to each other – in the corners of a square, opposing corners will be further apart than neighbors (the hypotenuse). Or am I misunderstanding? Is your goal to have a ring of points, equally spaced around a circle?

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 23, 2018, 9:05pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/3 "2018-10-23T21:05:43Z")

</div>

What i‘m trying to get is an Image with Points that move according to each others Positions with respective force (Though i didn‘t include the Force Part Till now). Basically what Would describe exactly what it should Look like more or less is : Imagine you have many Magnets on a table, which all repulse (push away) each other, But the further away they are, the less the force with which they Push away and the stronger is their Attraktion. In distance it Would be like dist 0 has 90 attraction and 100 repulsion, while dist 20 has 70, 80 and dist 50 has 60 attraction and 50 repulsion. So at 0 it repulses, at 20 it still does But Lower and at 50 it has higher attraction. Now with Magnets they all keep more or less the Same distance to each other (you‘re right, they‘re technically not, But you get what i mean). Basically they keep a distance like you Would immagine, But in the program they just overlap.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 23, 2018, 9:11pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/4 "2018-10-23T21:11:09Z")

</div>

Do you want this to be soft repulsion, like spring physics, or hard repulsion… like each point is in the middle of an invisible ball and the balls bounce off each other with circle-circle collision detection…?

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 23, 2018, 9:14pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/5 "2018-10-23T21:14:40Z")

</div>

Smooth, like magnetic repulsion… and attraction…But for the moment i‘m already happy with the other points not just overlapping 😅

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 23, 2018, 9:17pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/6 "2018-10-23T21:17:38Z")

</div>

You could develop your own spring physics for this, calculating the pairwise forces and making them inversely proportional to distance. However, spring physics would be a perfect example of when to use something off-the-shelf like Box2D for Processing or Toxiclibs verlet physics.

[![](https://img.youtube.com/vi/3v7SsOdxxww/hqdefault.jpg "5.14: Toxiclibs Verlet Physics Basics: Particles and Springs - The Nature of Code") ](https://www.youtube.com/watch?v=3v7SsOdxxww)

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 23, 2018, 9:19pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/7 "2018-10-23T21:19:51Z")

</div>

Yeah, But the Problem is that Even now, where the repulsion and attraction are basically Static the points still overlap, and i just can‘t find the reason for it in the code.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 23, 2018, 9:32pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/8 "2018-10-23T21:32:13Z")

</div>

Well, I haven’t dug into it, so this might not be related, but a basic issue with looping over points and updating each in relation to the other is that your whole point set is shifting during the update sequence. You can get weird emergent properties and counterintuitive intermediate states that are hidden by your loop. That can be pretty hard to debug, compared to calculating all the new positions based on old positions, then updating everything to new positions.

A similar problem is Conway’s Game of Life. You cannot update each cell as you go. You update all the cells based on the fixed state of their neighbors in the previous frame, writing their new values into a new matrix for the next frame.

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 23, 2018, 9:36pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/9 "2018-10-23T21:36:27Z")

</div>

That shouldn‘t be the case, Even though it might Apply, the positions and the relative distance that activates the movement into another Direction is relatively high. Such wrong movements could happen while they are within their margin and maybe are misplaced by 1-3 pixels, But they should still keep a general distance of around 30 Pixels… so that shouldn‘t apply.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 23, 2018, 9:46pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/10 "2018-10-23T21:46:20Z")

</div>

I don’t know. There are all kinds of things going on in your bUpdate.

For example:

```auto
} else if (force[1] < force[0] && force[1] > 20 * p.length) {
y += 1;
} else if (force[0] > force[1] && force[0] < 20 * p.length) {

```

Did you intend for there to be a double-inversion here? 1\<0 in the first time, and 0\>1 in the second line, both saying the same thing but written differently?

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 23, 2018, 9:47pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/11 "2018-10-23T21:47:59Z")

</div>

The first one is in case force[1] is bigger than 20 and the Second if force[0] is Smaller than 20.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 23, 2018, 9:48pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/12 "2018-10-23T21:48:49Z")

</div>

Yes, I’m talking about the first half of each statement, before the && – 1\<0, 0\>1, both saying the same thing but written differently.

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 23, 2018, 9:58pm UTC](https://discourse.processing.org/t/how-to-make-a-program-that-works-by-coloring-each-pixel-by-distance-to-another/4669/13 "2018-10-23T21:58:01Z")

</div>

Yeah, had to recheck it, But Yeah, it’s basically like :

```auto
If (force[0] < 20) {
  If (force[0] < force[1]) {
   y++;
  } Else {
    y—;
  }
} Else {
  If (force[0] < force[1]) {
    y—;
  } Else {
    y++;
  }
}

```

Take Note, that i‘m not sure if the + and - in this correction might not be like above, since i just tried to answer fast, But Thats basically what it Would Look like, though i‘m not quite sure why i didn‘t write it like that^^. Probably because i Added the force \<20 later on, so i maybe just added it in.  
Btw, i‘m on the phone right now, and the formatting Option isn‘t there atm, for some reason.

Edit: But i‘ll Recheck it When i get on my pc, just kn case, because now i‘m a bit confused^^

Edit : Yeah, checked it and is right.

Edit: It also works perfectly with just 2 points (one fixed on mouseposition). The Problem is that if you add more, the added ones only care about the distance to the mouse Point… But they are all calculated in the Same for Loop, so i don‘t know how that is possibile…