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

Processing Coding Questions
1

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

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…

2

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?

3

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.

4

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

5

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

6

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.

7

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.

8

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.

9

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.

10

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

For example:

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

11

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

12

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.

13

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

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…