# Using arrays to create a node and edge connector

**URL:** <https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464>\
**Category:** Coding Questions\
**Created:** [October 6, 2019, 12:20pm UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464 "2019-10-06T12:20:51Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnsmith17](https://avatars.discourse-cdn.com/v4/letter/j/958977/32.png) [@johnsmith17](https://discourse.processing.org/u/johnsmith17)\
**Post date:** [October 6, 2019, 12:20pm UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/1 "2019-10-06T12:20:51Z")

</div>

hi im trying to create a program that adds balls with mousePressed on the sketch and connects each of the balls with lines. ive managed to create an array of length 5 that adds a value(mouseX and mouseY), each time i mouse click but when i click the mouse again it deletes the previous. i tried to add a line function that connects all the balls together but it keeps connecting from 0,0 to the ball location.

Any help at all would be greatly appreciated.

```auto

PVector[] location = new PVector[10];
int ballnum;
int i;
;

void setup() {
  size(600, 600);
  background(255);
  ballnum=0; 
  i = 0;
}

void draw() {
  fill(255);

  for (int i=0; i <ballnum; i++) {
    location[i] = new PVector(0, 0);
    if (mousePressed) {
      location[ballnum] = new PVector(mouseX, mouseY);
      circle(location[ballnum].x, location[ballnum].y, 20);
      line(location[ballnum].x, location[ballnum].y, location[ballnum-1].x, location[ballnum-1].y);
    }
  }

  println();
  //println(ballnum, "=ballnum");
  // println();
  println(location[ballnum], ballnum);
  println();
  println("--------------------");
  println(location[1]);
  println();
  println(location[2]);
  println();
  println(location[3]);
  println();
  println(location[4]);
  println();
}

void mousePressed()
{
  ballnum++;
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 6, 2019, 2:21pm UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/2 "2019-10-06T14:21:28Z")

</div>

sorry i not go into your code too much, just show you a other way you might be interested to study:

```auto
ArrayList<PVector> p = new ArrayList<PVector>();
int many =50;
boolean circ = true;

void setup() {
  size(300, 300);
  println("use mouseClick to make points, key [c] to show circles \nlimit points is "+many);
}

void draw() {
  background(0, 0, 80);
  linedots();
}

void linedots() {
  noFill();
  stroke(0, 200, 0);
  strokeWeight(2);
  beginShape();
  if ( p.size() >= 1 ) { 
    curveVertex( p.get(0).x, p.get(0).y ); // control point
    for (int i=0; i < p.size(); i++ ) {
      if ( circ ) circle(i);
      curveVertex( p.get(i).x, p.get(i).y );
    }
    if ( p.size() > 1 ) curveVertex( p.get(p.size()-1).x, p.get(p.size()-1).y ); // control point
    endShape();
  }
}

void circle(int i) {
  push();
  stroke(200, 0, 200);
  fill(0, 200, 200);
  circle(p.get(i).x, p.get(i).y, 15);
  pop();
}

void mousePressed() {
  p.add( new PVector(mouseX, mouseY) );
  if ( p.size() > many ) p.remove(0); // erase oldest sample
}
 
void keyPressed() {
  if ( key == 'c' ) circ = ! circ;
}

```

[https://processing.org/reference/ArrayList.html](https://processing.org/reference/ArrayList.html)  
hope you get some ideas… or just have fun to play

---

<div class="post-metadata">

**Author:** ![johnsmith17](https://avatars.discourse-cdn.com/v4/letter/j/958977/32.png) [@johnsmith17](https://discourse.processing.org/u/johnsmith17)\
**Post date:** [October 7, 2019, 6:41am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/4 "2019-10-07T06:41:12Z")

</div>

thank you for your help ill study your code.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 7, 2019, 6:42am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/5 "2019-10-07T06:42:14Z")

</div>

> [@johnsmith17](#):
>
> im trying to do this without using classes or objects

ok, but you use PVector and array   
and i used PVector and ArrayList,

you used line  
i used curve ( Vertex )

and i structured code little bit with functions,  
BUT i NOT used class…  
so i not understand your point.

* * *

anyhow you might just run the code to understand it better

---

<div class="post-metadata">

**Author:** ![johnsmith17](https://avatars.discourse-cdn.com/v4/letter/j/958977/32.png) [@johnsmith17](https://discourse.processing.org/u/johnsmith17)\
**Post date:** [October 7, 2019, 6:43am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/6 "2019-10-07T06:43:11Z")

</div>

oh sorry i get it now thank you so much didnt read the code properly my mistake

---

<div class="post-metadata">

**Author:** ![johnsmith17](https://avatars.discourse-cdn.com/v4/letter/j/958977/32.png) [@johnsmith17](https://discourse.processing.org/u/johnsmith17)\
**Post date:** [October 7, 2019, 8:48am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/7 "2019-10-07T08:48:52Z")

</div>

ok so ive manged to store each of the positions of the balls and made it abit more simpler but now im stuck with making each ball connect to every other ball with a straight line. what should i do?

```auto
int length = 101;
PVector[] position = new PVector[length];
int BallNum;

void setup() {
  size(600, 600);
  background(255);
}

void draw() {
  fill(255);
  layout();
  fill(0);
}

void mousePressed()
{
  BallNum++;
  position[BallNum]= new PVector(mouseX, mouseY);
  circle(position[BallNum].x, position[BallNum].y, 20);
  if (BallNum >= 2) {
    //line(position[BallNum].x,position[BallNum].y,position[BallNum+1].x,position[BallNum+1].y);
  }
}

void layout() {
  for (int yLine=0; yLine<=width; yLine+=width/10) {
    for (int xLine=0; xLine<=height; xLine+=height/10) {  
      line(yLine, 0, yLine, height);
      line(0, xLine, width, xLine);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 7, 2019, 9:17am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/8 "2019-10-07T09:17:57Z")

</div>

when you click mouse 101 times, what happen?

---

<div class="post-metadata">

**Author:** ![johnsmith17](https://avatars.discourse-cdn.com/v4/letter/j/958977/32.png) [@johnsmith17](https://discourse.processing.org/u/johnsmith17)\
**Post date:** [October 7, 2019, 9:19am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/9 "2019-10-07T09:19:57Z")

</div>

it doesnt create the balls anymore and it comes up as error

ArrayIndexOutOfBoundsException: 101

buts thats fine as long as i can connect each of the balls together and realistically no one is going to press it 101 times

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 7, 2019, 9:22am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/10 "2019-10-07T09:22:20Z")

</div>

> [@johnsmith17](#):
>
> and realistically no one is going to press it 101 times

hm, i just did,  
so can see the difference between  
your array and  
my arraylist

but see

> **[append() / Reference](https://processing.org/reference/append_.html)**
>
> Expands an array by one element and adds data to the new position. The datatype of the element parameter must be the same as the datatype of the array. When using an array of object…

* * *

also

```auto
  if (BallNum > 1) {
    line(position[BallNum].x,position[BallNum].y,position[BallNum-1].x,position[BallNum-1].y);
  }

```

works better

---

<div class="post-metadata">

**Author:** ![johnsmith17](https://avatars.discourse-cdn.com/v4/letter/j/958977/32.png) [@johnsmith17](https://discourse.processing.org/u/johnsmith17)\
**Post date:** [October 7, 2019, 9:25am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/11 "2019-10-07T09:25:25Z")

</div>

i understand your point but i can just put the click amount to really high number such as 100000. well i guess i have to try to solve this with arraylist but still i dont understand how to connect with lines in both methods

---

<div class="post-metadata">

**Author:** ![johnsmith17](https://avatars.discourse-cdn.com/v4/letter/j/958977/32.png) [@johnsmith17](https://discourse.processing.org/u/johnsmith17)\
**Post date:** [October 7, 2019, 9:28am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/12 "2019-10-07T09:28:07Z")

</div>

ok i understand im going to do it both methods and see the differences thank you

---

<div class="post-metadata">

**Author:** ![johnsmith17](https://avatars.discourse-cdn.com/v4/letter/j/958977/32.png) [@johnsmith17](https://discourse.processing.org/u/johnsmith17)\
**Post date:** [October 7, 2019, 9:54am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/13 "2019-10-07T09:54:08Z")

</div>

ok so i think im done but one last thing is that is there a way to connect each ball to its nearest neighbour like

 ![Annotation%202019-10-07%20205020](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3306c499fa20f355b61a462ed5989ae4480485e1.png)

```auto
int length = 101;
PVector[] position = new PVector[length];
int BallNum;

void setup() {
  size(600, 600);
  background(255);
}

void draw() {
  fill(255);
  layout();
  fill(0);
}

void mousePressed()
{
  BallNum++;
  position[BallNum]= new PVector(mouseX, mouseY);
  circle(position[BallNum].x, position[BallNum].y, 20);
 if (BallNum > 1) {
    line(position[BallNum].x,position[BallNum].y,position[BallNum-1].x,position[BallNum-1].y);
    line(position[1].x,position[1].y,position[BallNum].x,position[BallNum].y);
  }
  }

void layout() {
  for (int yLine=0; yLine<=width; yLine+=width/10) {
    for (int xLine=0; xLine<=height; xLine+=height/10) {  
      line(yLine, 0, yLine, height);
      line(0, xLine, width, xLine);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 7, 2019, 10:00am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/14 "2019-10-07T10:00:16Z")

</div>

> [@johnsmith17](#):
>
> is there a way to connect each ball to its nearest neighbour

you need a extra loop over all `position[n]` and check to alllother `position[m]`  
about the distance.

> **[dist() / Reference](https://processing.org/reference/dist_.html)**
>
> Calculates the distance between two points.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 29, 2019, 12:43am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/16 "2019-10-29T00:43:04Z")

</div>

please post your code for this, `</> button please `  
are you [johnsmith17](https://discourse.processing.org/u/johnsmith17) ?

---

<div class="post-metadata">

**Author:** ![johnsmith17](https://avatars.discourse-cdn.com/v4/letter/j/958977/32.png) [@johnsmith17](https://discourse.processing.org/u/johnsmith17)\
**Post date:** [October 29, 2019, 5:51am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/17 "2019-10-29T05:51:31Z")

</div>

thanks for all your help but ive figured it out the solution but not im trying to make each node connect to the nearest grid intersection any idea how i can do that? i think if make an array of all the grid intersections and compare them to the current node that is placed which should do it but im not sure how to structure it.

---

<div class="post-metadata">

**Author:** ![njoi](https://avatars.discourse-cdn.com/v4/letter/n/3d9bf3/32.png) [@njoi](https://discourse.processing.org/u/njoi)\
**Post date:** [October 29, 2019, 10:12pm UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/18 "2019-10-29T22:12:30Z")

</div>

hi john, i cant seem to make the middle diagonal disappear. any idea how to do that?

---

<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:** [October 29, 2019, 10:26pm UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/19 "2019-10-29T22:26:10Z")

</div>

> [@johnsmith17](#):
>
> im trying to make each node connect to the nearest grid intersection

SEARCH the minimum, store it , then display it

```auto
 //Desenhar as Linhas
        else if(fase==2){
          for(int i = 0; i < listc1.size(); i++){
            minDist = 10000000;
            for(int j = 0; j < listc2.size(); j++){
              PVector vi = listc1.get(i);
              PVector vj = listc2.get(j);
                if(vi.dist(vj) < minDist){
                  minDist = vi.dist(vj);
                  linhaI = i;
                  linhaF = j;
                }
            }
          
          PVector vi = listc1.get(linhaI);
          PVector vj = listc2.get(linhaF);
          stroke(0);
          line(vi.x,vi.y,vj.x,vj.y);
          }
      fase++;
      cfase3++;
    }

```

> [@Limiting draw() to run a limited amount of times!](https://discourse.processing.org/t/limiting-draw-to-run-a-limited-amount-of-times/14809/18):
>
> Just changed i and j place haha Don’t know if it’s the best solution, but hey, it works! Edit: Did the auto-format thing :3 PVector v1, v2; //C = Comprimento, A = Altura int qc1, qc2; float c1 = 6, a1 = 6, c2 = 2, a2=2; ArrayList\<PVector\> listc1 = new ArrayList(); ArrayList\<PVector\> listc2 = new ArrayList(); int fase = 0, cfase1 = 0, cfase2 = 0, cfase3 = 0; float minDist = -100; int linhaI, linhaF; void setup() { size(200, 200); background(255); //Quantidade de Circulos Principais qc1…

---

<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:** [November 3, 2019, 3:05am UTC](https://discourse.processing.org/t/using-arrays-to-create-a-node-and-edge-connector/14464/20 "2019-11-03T03:05:24Z")

</div>

> [@johnsmith17](#):
>
> make each node connect to the nearest grid intersection

Do you mean draw a line from each node to the nearest intersection? Or do you want to “snap” the points to the nearest grid intersection?

If you are trying to snap points to a regular grid, you can use snap-closest based on modulo (%) – see this example:

> [@How to snap mouse to a shape/coordinate?](https://discourse.processing.org/t/how-to-snap-mouse-to-a-shape-coordinate/13414/9):
>
> The simplest way to snap in 2D is %. Define your grid step, then subtract the modulo of that from your current location to snap, no modulo for free motion. int gstep = 10; void draw(){ background(128); if (keyPressed){ ellipse(mouseX, mouseY, 10, 10); } else { ellipse(mouseX - mouseX%gstep, mouseY - mouseY%gstep, 10, 10); // snap } lines(); } void lines(){ for(int x=0; x\<=width; x+=gstep) line(x,0,x,width); for(int y=0; y\<=height; y+=gstep) line(0,y,height,y); } This as…