Using arrays to create a node and edge connector

[johnsmith17]

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

[kll]

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

[johnsmith17]

thank you for your help ill study your code.

[kll]

@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

[johnsmith17]

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

[johnsmith17]

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

[kll]

when you click mouse 101 times, what happen?

[johnsmith17]

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

[kll]

@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

---

also

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

works better

[johnsmith17]

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

[johnsmith17]

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

[johnsmith17]

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

[kll]

@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

[kll]

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

[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.

[njoi]

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

[Chrisir]

@johnsmith17

im trying to make each node connect to the nearest grid intersection

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

Limiting draw() to run a limited amount of times!

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…

[jeremydouglass]

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

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…