Using arrays to create a node and edge connector

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.


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++;
}
1 Like

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

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
hope you get some ideas… or just have fun to play

2 Likes

thank you for your help ill study your code.

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

1 Like

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

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?

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);
    }
  }
}

when you click mouse 101 times, what happen?

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

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

but see
https://processing.org/reference/append_.html


also

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

works better

2 Likes

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

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

1 Like

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

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

you need a extra loop over all position[n] and check to alllother position[m]
about the distance.
https://processing.org/reference/dist_.html

2 Likes

please post your code for this, </> button please
are you johnsmith17 ?

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.

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

SEARCH the minimum, store it , then display it

 //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++;
    }

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: