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

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.

so far this is my code:

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

float x=0;
float y=0;

void setup() {
  size(600, 360);

void draw() {
  while (x<width){
  while (y< height){
    line (0, y, width, y);
void mousePressed() {
  BallNum++; position[BallNum]= new PVector(mouseX, mouseY);
  circle(position[BallNum].x, position[BallNum].y, 10);
if (BallNum > 1) {

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);
1 Like

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

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

void setup() {
  size(600, 360);
  println("use key [h] print number, key [s] snap");

void draw() {
  background(200, 200, 0);

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

void layout() {
  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() {
  for ( int i = 0; i < pos.size(); 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
      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

</> button in forum editor

looks like
type or paste code here

second also get a minus point for the

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!

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?

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

-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

( 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 for the tutorial,
could that be used / improved / for a game state/screen structure? still use one int state for switching )

1 Like

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?

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

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 )

      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

  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

1 Like

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

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

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…

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

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

void draw() {

void mousePressed() {
  points[curr] = new PVector(mouseX, mouseY);
  // Display circle at located vector
  background(200, 200, 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);

1 Like

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

just click to add points


1 Like

solved with snap to grid.

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

Yes we did, we laid it out very well.


That’s good to hear! My apologies! :wink:

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.