# How to connect nodes and relocate them to the nearest grid location

**URL:** <https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [November 1, 2019, 11:12pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131 "2019-11-01T23:12:03Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![oliviabertrum](https://avatars.discourse-cdn.com/v4/letter/o/ac91a4/32.png) [@oliviabertrum](https://discourse.processing.org/u/oliviabertrum)\
**Post date:** [November 1, 2019, 11:12pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/1 "2019-11-01T23:12:03Z")

</div>

hi everyone,

i have a grid and have put nodes into my code, however i need the nodes to be connected to create a full shape like below. Also, i need help getting the nodes to move to the nearest grid location when the user clicks anywhere.

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

so far this is my code:

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

float x=0;
float y=0;

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

void draw() {
  fill(255);
  layout();
  fill(0); 
  strokeWeight(1);
  stroke(201,200,195);
      
  x=60; 
  while (x<width){
    line(x,0,x,height); 
    x=x+60; 
  }
  
  y=36; 
  while (y< height){
    line (0, y, width, y);
    y=y+36;
  }
}
void mousePressed() {
  stroke(0);
  BallNum++; position[BallNum]= new PVector(mouseX, mouseY);
  circle(position[BallNum].x, position[BallNum].y, 10);
if (BallNum > 1) {
    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:** [November 2, 2019, 2:57am UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/2 "2019-11-02T02:57:24Z")

</div>

hi,  
-a- you should store the points ( mouse click ) to a arraylist of pvector  
-b- you make a loop over all points and draw a circle each  
-c- if more as 1 point can draw a line  
-d- if more as 2 point can connect last one with first [0] so shape is closed  
-e- if you need SNAP TO GRID must round the numbers acc width / height of grid cells.

a start example:

```auto
ArrayList<PVector> pos = new ArrayList<PVector>();
float w, h;

void setup() {
  size(600, 360);
  w=width/10;
  h=height/10;
  println("use key [h] print number, key [s] snap");
}

void draw() {
  background(200, 200, 0);
  layout();
  draw_points();
}

void mousePressed() {
  pos.add( new PVector(mouseX, mouseY, 0) );
}

void layout() {
  stroke(0);
  strokeWeight(0.5);
  for (int yLine=0; yLine<=width; yLine+=w) {
    for (int xLine=0; xLine<=height; xLine+=h) {
      line(yLine, 0, yLine, height);
      line(0, xLine, width, xLine);
    }
  }
}

int x,y,xi, yi, xj, yj;
void get_point(int i ) {
  x = (int)pos.get(i).x;
  y = (int)pos.get(i).y;
  if ( snap ) {
    x = (int)(round(x/w) * w);
    y = (int)(round(y/h) * h);
  }
}

void draw_points() {
  stroke(0,0,200);
  strokeWeight(2);
  for ( int i = 0; i < pos.size(); i++ ) {
    get_point(i);
    xi =x; yi =y;
    circle(xi, yi, 5);
    if ( diagp ) text(i, xi, yi);
    if ( pos.size() > 0 ) {
      int j = i+1;
      if ( j > ( pos.size() - 1) ) j = 0; // close loop
      get_point(j);   
      xj =x; yj =y;
      line(xi, yi, xj, yj);
    }
  }
}

boolean diagp=true, snap = true;

void keyPressed() {
  if ( key == 'h' ) diagp = ! diagp; 
  if ( key == 's' ) snap = ! snap;
}

```

* * *

but first you should format your code using the

```auto
</> button in forum editor

```

looks like  
```  
type or paste code here  
```

* * *

second also get a minus point for the

> [@oliviabertrum](#):
>
> length = 1000000;

---

<div class="post-metadata">

**Author:** ![oliviabertrum](https://avatars.discourse-cdn.com/v4/letter/o/ac91a4/32.png) [@oliviabertrum](https://discourse.processing.org/u/oliviabertrum)\
**Post date:** [November 2, 2019, 7:18am UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/3 "2019-11-02T07:18:25Z")

</div>

Thank you so much I’ve implemented that into my code! Just some other things that I’m struggling with:

- When an arrow key is pressed, all nodes must move up by 1 unit grid cell distance in corresponding direction.

- For each node I’d like to calculate the sum of distances of that node from every other node. And then show that the node that has the lowest cumulative distance should be coloured **red** and the node that has the highest cumulative distance should be coloured **blue**.

thanks for your help!

---

<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:** [November 2, 2019, 8:38am UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/4 "2019-11-02T08:38:57Z")

</div>

yes sure, show us your code where  
you try this,  
-a- you might not use the raw mouse x,y any more, only the snap.  
-b- use the arrow keys in keyPressed() and overwrite the whole array ( ± wh ) accordingly  
-c- distance calc you must redo after each add of a new point and in the current structure  
at any draw loop UNLESS you can store that result into some memory  
( would need like RED / BLACK / GREEN 3 values, so a boolean array not enough )  
but you have unused memory!!! the .z of each point is unused while drawing 2D  
there can store like 0, 1 , 2 ( LOL )

* * *

why you not repair your above code posting as i asked you for?

---

<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:** [November 2, 2019, 10:15am UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/5 "2019-11-02T10:15:59Z")

</div>

That is all homework- wow, why do people ask here? Or didn’t the teacher explain well?

---

<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:** [November 2, 2019, 10:40am UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/6 "2019-11-02T10:40:33Z")

</div>

> [@Chrisir](#):
>
> why do people ask here?

-a- because if they ask:

> “mama? how to make a arrayList of PVectors in processing ?”

the answer might not even be

> ? did you google it already ?

* * *

-b- no, this is the RIGHT PLACE TO ASK  
we might be limited by internal forum rules to NOT provide full code solutions,  
but if we see OP.s ?potential?  
we might invest time with **teaching** in steps, like a free online course …  
( and that is **our own** decision as also to ignore ( or limit our answers ) for possible cheaters )

* * *

-c- and even if our info is a level to high  
still it might help others who read that topic later.  
i struggle with that feeling in one of our recent teachings…  
still there might be a reusable product of our invested time  
[http://kll.engineering-news.org/kllfusion01/articles.php?article\_id=166](http://kll.engineering-news.org/kllfusion01/articles.php?article_id=166)

* * *

( here i have a question for you Chrisir, could you  
check on a class structure for pages like i used in the JAVA version ( at the end )  
or this [template](http://kll.engineering-news.org/kllfusion01/downloads/tut_class.pde.txt) for the tutorial,  
could that be used / improved / for a game state/screen structure? still use one `int state` for switching )

* * *

---

<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:** [November 2, 2019, 12:09pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/7 "2019-11-02T12:09:18Z")

</div>

No, I have full respect for everyone asking here.

It’s only surprising to see many questions with the same topic. Didn’t the teacher lay it out well?

---

<div class="post-metadata">

**Author:** ![chelise](https://avatars.discourse-cdn.com/v4/letter/c/ecccb3/32.png) [@chelise](https://discourse.processing.org/u/chelise)\
**Post date:** [November 2, 2019, 12:53pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/8 "2019-11-02T12:53:18Z")

</div>

Hi I’m trying to understand the closing loops part. Could you explain please? Thanks!

---

<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:** [November 2, 2019, 1:02pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/9 "2019-11-02T13:02:14Z")

</div>

@chelise  
there are 2 ways to close the shape over a array of points with making lines:

-a- you make a switch inside the for loop to use the index [0]  
( see above arrayList notation / example )

```auto
      int j = i+1;
      if ( j > ( pos.size() - 1) ) j = 0; // close loop

```

-b- or you make a for loop for max - 1 points  
and lines (x … x+1 )  
and after the for loop a lonely line(first , last )  
here now use the array notation of a other example

```auto
  for (int i=0; i<nodeX.length-1; i++) line (nodeX[i], nodeY[i], nodeX[i+1], nodeY[i+1]);
  if ( nodeX.length > 0 ) line (nodeX[0], nodeY[0], nodeX[nodeX.length-1], nodeY[nodeX.length-1]); //_ optional closing line

```

what closes the shape

---

<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:** [November 2, 2019, 1:24pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/11 "2019-11-02T13:24:49Z")

</div>

please format your code using the `</> button from the forum editor menu`  
**edit/repair above post please**  
then i might load and test it.

---

<div class="post-metadata">

**Author:** ![chelise](https://avatars.discourse-cdn.com/v4/letter/c/ecccb3/32.png) [@chelise](https://discourse.processing.org/u/chelise)\
**Post date:** [November 2, 2019, 1:25pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/12 "2019-11-02T13:25:48Z")

</div>

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

---

<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:** [November 2, 2019, 1:48pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/13 "2019-11-02T13:48:52Z")

</div>

well, a unusual way ,  
usually draw in draw and not in mousePressed, so you might  
redesign your whole program-flow later, ( read some tutorial… )

and that is far from the question about the last line of a array to close the shape,  
so actually you are completely wrong in this topic,  
you should have started a new topic “processing beginner”  
and state that you can not even draw one line…

```auto
PVector[] points = new PVector[100];
int curr=0;
int cirSize=10;

void setup () {
  size (600, 360);
  background(200, 200, 0);
  //grid_drawing();
}

void draw() {
}

void mousePressed() {
  points[curr] = new PVector(mouseX, mouseY);
  curr++;
  // Display circle at located vector
  background(200, 200, 0);
  fill(0);
  stroke(0);
  if ( curr > 0 )
    for (int c = 0; c < curr; c++)
      ellipse(points[c].x, points[c].y, cirSize, cirSize);

  for (int c = 0; c < curr-1; c++)
    line(points[c].x, points[c].y, points[c+1].x, points[c+1].y);

  if (curr > 1)
    line(points[0].x, points[0].y, points[curr-1].x, points[curr-1].y);
}

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 2, 2019, 10:48pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/16 "2019-11-02T22:48:54Z")

</div>

Not sure if you still need help, but this creates a self closing shape.

[https://www.openprocessing.org/sketch/781579](https://www.openprocessing.org/sketch/781579)

just click to add points

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b68ace2c29d2452320404cd4fb15e1c4a6ebf0a2.png)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 2, 2019, 11:34pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/17 "2019-11-02T23:34:20Z")

</div>

[https://www.openprocessing.org/sketch/783497](https://www.openprocessing.org/sketch/783497)

solved with snap to grid.

Change the “w” and “h” variables to say how many divisions you would like in you x/y directions.

---

<div class="post-metadata">

**Author:** ![altmattr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/altmattr/32/6987_2.png) [@altmattr](https://discourse.processing.org/u/altmattr)\
**Post date:** [November 3, 2019, 7:38am UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/18 "2019-11-03T07:38:27Z")

</div>

Yes we did, we laid it out very well.

---

<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:** [November 3, 2019, 1:07pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/19 "2019-11-03T13:07:32Z")

</div>

That’s good to hear! My apologies! 😉

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 3, 2019, 3:58pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/20 "2019-11-03T15:58:12Z")

</div>

please note the code calculates everything about the midpoint of the window, therefore in some instances if all your points aren’t evenly spread around the canvas it can cause some lines to intersect to solve this you need to use the mid point of all the points in the array.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 3, 2019, 4:32pm UTC](https://discourse.processing.org/t/how-to-connect-nodes-and-relocate-them-to-the-nearest-grid-location/15131/21 "2019-11-03T16:32:33Z")

</div>

fixed!

[https://www.openprocessing.org/sketch/783497/](https://www.openprocessing.org/sketch/783497/)