# Dijkstra Algorithm view (Node, Edges)

**URL:** <https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891>\
**Category:** Coding Questions\
**Created:** [January 8, 2021, 5:22pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891 "2021-01-08T17:22:58Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![librakl](https://avatars.discourse-cdn.com/v4/letter/l/91b2a8/32.png) [@librakl](https://discourse.processing.org/u/librakl)\
**Post date:** [January 8, 2021, 5:22pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/1 "2021-01-08T17:22:58Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hello,

we have to implement the Dijkstra Algorithm. But at the beginning you have an empty field where you can click to create the nodes and edges between the nodes. In MousePressed we have implemented the nodes, but we dont know how we can connect two nodes with a line. Furthermore we dont really know how we can distinguish betwenn drawing a node or an edge in the funktion mousePressed.  
Maybe there is someone who can help us!!

```auto
void setup() {
  size(400,400);
}

 void draw() {
 

   
}
 
 void mouseClicked(){
  
   // wenn Stelle noch nicht belegt
   
  Node node= new Node(); 

   // wenn an der Stelle ein Knoten ist 
   // -> Kante ziehen 
   
 }

static class Zaehler{
  
  
 static int knotennummerzaehler = -1;

 
  
}  

class Node extends Zaehler{
 
  // number inside the node
  int knotennummer;
  
  // neuen Knoten erstellen
  Node(){
    
    hochzaehler();
    fill(0);
    ellipse(mouseX,mouseY,50,50); 
    fill(255);
    textSize(20);
    text(knotennummer,mouseX,mouseY);

}

void hochzaehler(){
 
// number increases
  knotennummerzaehler ++;
  knotennummer = knotennummerzaehler;
  
 }
   
  
}  

class Edge{
  
 Edge(){
   
    fill(0);
    line(mouseX, mouseY,0,0);
    
   
   
 }
  
 
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [January 8, 2021, 5:44pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/2 "2021-01-08T17:44:41Z")

</div>

Here’s one idea that would work well.

When the mouse is clicked, look to see if it was clicked on a node.

If it wasn’t, that click creates a node.

If, however, the click WAS on an existing node, you’re starting to create an edge. When this occurs, you must wait for the next click to happen. If the next click is on a node, create an edge between those two nodes. If that next click is not on a node, however, then nothing happens.

* * *

You can also remove nodes and edges this way if you’re clever! If you click a node to start an edge, but then don’t click a second node, that can mean to remove the clicked node (don’t forget to remove all edges that connect to it too!).

Also, if you try to make an edge between two nodes that already have an edge, that can mean to remove that edge. Essentially it’s toggling edges between the clicked nodes, not just creating one.

* * *

Implementation of this is left as part of the exercise. Do post what you come up with - It’d be most helpful for others!

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 8, 2021, 5:57pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/3 "2021-01-08T17:57:37Z")

</div>

I would focus on creating the classes for the Nodes and Edges first. For instance the Node class needs to know its own position, an Edge would have 2 Node fields (for the start and the end) and a weighting (might be distance between start and end nodes).

Both the Node class and Edge class would have their own method to draw itself e.g. `display()`

Once you have the classes then create a small fixed network of nodes and edges and make sure they render OK

Then you can consider how to create the network dynamically with the mouse.

Finally create the path finding algorithm and test it.

---

<div class="post-metadata">

**Author:** ![librakl](https://avatars.discourse-cdn.com/v4/letter/l/91b2a8/32.png) [@librakl](https://discourse.processing.org/u/librakl)\
**Post date:** [January 8, 2021, 6:11pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/4 "2021-01-08T18:11:08Z")

</div>

Thank you guys for your answer!!  
@TfGuy44 can you describe how i can check if there is a node or not? My idea was to initialize a variable int noNodeexists = 0; and in mousePressed i check this with an if-clause.  
So kinda like this…

void mousePressed(){

if( noNodeexists == 0){  
Node node = new Node();  
}  
else {

// draw edge

}

@quark i understand your point. Every node needs to know where he is and every edge needs to know the beginning and ending… but i dont know how to start

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 8, 2021, 6:12pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/5 "2021-01-08T18:12:38Z")

</div>

Is this a homework / assessment?

---

<div class="post-metadata">

**Author:** ![librakl](https://avatars.discourse-cdn.com/v4/letter/l/91b2a8/32.png) [@librakl](https://discourse.processing.org/u/librakl)\
**Post date:** [January 8, 2021, 6:13pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/6 "2021-01-08T18:13:15Z")

</div>

@quark do you mean to draw the node/edge in display() instead of the constructor?

---

<div class="post-metadata">

**Author:** ![librakl](https://avatars.discourse-cdn.com/v4/letter/l/91b2a8/32.png) [@librakl](https://discourse.processing.org/u/librakl)\
**Post date:** [January 8, 2021, 6:13pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/7 "2021-01-08T18:13:34Z")

</div>

its a little project from university

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 8, 2021, 6:16pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/8 "2021-01-08T18:16:22Z")

</div>

The point is that this is not a simplistic task and it has to be broken down into logical parts otherwise it will be a nightmare.

Are you on a computing course?

Will you be marked on the final program?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 8, 2021, 6:19pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/9 "2021-01-08T18:19:56Z")

</div>

> [@librakl](#):
>
> do you mean to draw the node/edge in display() instead of the constructor?

The fact that you don’t know the answer tells me that you are not experienced at designing classes. Not to worry we all have to start somewhere.

The Node and Edge constructors _will never be used to draw anything_

The Node and Edge constructors _will never be used to process mouse input_

---

<div class="post-metadata">

**Author:** ![librakl](https://avatars.discourse-cdn.com/v4/letter/l/91b2a8/32.png) [@librakl](https://discourse.processing.org/u/librakl)\
**Post date:** [January 8, 2021, 6:21pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/10 "2021-01-08T18:21:40Z")

</div>

Okay haha 😃  
i did it like this  
but how can i let the node know where it is?

class Knoten extends Zaehler{

int knotennummer;

// neuen Knoten erstellen  
Knoten(){

```
hochzaehler();
fill(0);
display();
fill(255);
textSize(20);
text(knotennummer,mouseX,mouseY);

```

}

void display(){

ellipse(mouseX,mouseY,50,50);

}  
void hochzaehler(){

knotennummerzaehler ++;  
knotennummer = knotennummerzaehler;

}

}

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [January 8, 2021, 6:26pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/11 "2021-01-08T18:26:06Z")

</div>

Your Node class should keep track of where that Node is.

Your array (or arrayList, probably) of Nodes has all your Nodes in it.

When you get a mouse click, you can use a loop over your array of Nodes to see if that click was near the position of any of them.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 8, 2021, 6:26pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/12 "2021-01-08T18:26:57Z")

</div>

OK here is a very simple Node class that you can start with

```auto
public class Node {
  private float x;
  private float y;

  public Node(float x, float y){
    this.x = x;
    this.y = y;
  }
  
  public void display(){
    strokeWeight(2);
    stroke(0); // black
    fill(0,255,0);
    ellipse(x, y, 16, 16);
  }
}

```

Note the ctor is only used to create the node and the display() method can be called from inside draw()

---

<div class="post-metadata">

**Author:** ![librakl](https://avatars.discourse-cdn.com/v4/letter/l/91b2a8/32.png) [@librakl](https://discourse.processing.org/u/librakl)\
**Post date:** [January 8, 2021, 6:41pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/13 "2021-01-08T18:41:27Z")

</div>

Sorry, but inside draw in the class Node or in the other draw Method?

---

<div class="post-metadata">

**Author:** ![librakl](https://avatars.discourse-cdn.com/v4/letter/l/91b2a8/32.png) [@librakl](https://discourse.processing.org/u/librakl)\
**Post date:** [January 8, 2021, 6:42pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/14 "2021-01-08T18:42:18Z")

</div>

When i call display() in the constructor of Node it works as well …😃

---

<div class="post-metadata">

**Author:** ![librakl](https://avatars.discourse-cdn.com/v4/letter/l/91b2a8/32.png) [@librakl](https://discourse.processing.org/u/librakl)\
**Post date:** [January 8, 2021, 7:02pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/15 "2021-01-08T19:02:30Z")

</div>

I did it like this now. So the nodes are in the ArrayList. Probably not right but a beginning. But i didnt create the ArrayList inside the class Node, as you can see. Is it right?  
In mouseClicked the Nodes will be added to the List.

```auto
import java.util.ArrayList; 

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

 void draw() {
 
   
}
 
 void mouseClicked(){
   
  // loop over Array of nodes to check if there is another node
   
  Node knoten = new Node(mouseX,mouseY); 
  
  // Adding node
  NodeList.add(knoten);
 // println(NodeList.size());
 // println(NodeList.indexOf(knoten));

 }
  
 
    
ArrayList<Node> NodeList = new ArrayList<Node>();    
  
// class Node    
 public class Node extends Zaehler {
  private float x;
  private float y;
  int knotennummer;

void draw(){
  
// display(); 
  
}

  public Node(float x, float y){
    hochzaehler();
    this.x = x;
    this.y = y;
    display();
  }
  
  public void display(){
    strokeWeight(2);
    stroke(0); // black
    fill(0);
    ellipse(x, y, 60, 60);
    
    fill(255);
    textSize(20);
    text(knotennummer,x,y); //number inside the node
  }

void hochzaehler(){
 
  knotennummerzaehler ++;
  knotennummer = knotennummerzaehler;
  
 }
   
  
}

static class Zaehler{
  
  
 static int knotennummerzaehler = -1;

 
  
}  
class Edge {
  
  
  
  void display(){
  
  //line();
  
}
  
    Edge(){
   
    fill(0);
    line(mouseX, mouseY,0,0);
    
   
   
 }
  
   
}

```

---

<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:** [January 8, 2021, 7:04pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/16 "2021-01-08T19:04:57Z")

</div>

This might be able to help you, please note it is in p5 not processing but the principals are the same.

https://www.openprocessing.org/sketch/731320/embed/?

---

<div class="post-metadata">

**Author:** ![librakl](https://avatars.discourse-cdn.com/v4/letter/l/91b2a8/32.png) [@librakl](https://discourse.processing.org/u/librakl)\
**Post date:** [January 8, 2021, 7:12pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/17 "2021-01-08T19:12:55Z")

</div>

Thank you! I will check it

---

<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:** [January 8, 2021, 9:42pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/18 "2021-01-08T21:42:00Z")

</div>

Let me know if you want some help understanding the code, there are quite a few different algorithms for this sketch.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 9, 2021, 11:15am UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/19 "2021-01-09T11:15:59Z")

</div>

> [@librakl](#):
>
> Sorry, but inside draw in the class Node or in the other draw Method?

Like this

```auto
Node n0, n1;

void setup() {
  size(400, 400);
  n0 = new Node(89.7, 123.55);
  n1 = new Node(341.34, 289.01);
}

void draw() {
  background(200, 255, 200);
  n0.display();
  n1.display();
}

public class Node {
  private float x;
  private float y;

  public Node(float x, float y) {
    this.x = x;
    this.y = y;
  }

  public void display() {
    strokeWeight(2);
    stroke(0); // black
    fill(0, 255, 0);
    ellipse(x, y, 16, 16);
  }
}

```

> [@librakl](#):
>
> When i call display() in the constructor of Node it works as well …😃

Just because something works doesn’t make it right - remember

> [@quark](#):
>
> The Node and Edge constructors _will never be used to draw anything_
> 
> The Node and Edge constructors _will never be used to process mouse input_

---

<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:** [January 9, 2021, 3:16pm UTC](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891/20 "2021-01-09T15:16:49Z")

</div>

> [@quark](#):
>
> ` background(200, 255, 200);`

librakl didn’t have `background();` at start of draw(), so it _looked like_ it worked. Because the drawing in the constructor just stayed on the screen.

- But quark is right of course: never drawing in the constructor.

- I would argue the second statement (never process mouse input in the constructor) though, because when he wants to generate a new node on mouse input he needs the mouse position in the constructor (or at least pass the mouse position to the constructor).

```auto
void mousePressed() {
   nodes.add(new Node(mouseX,mouseY));
}

```

Chrisir

[Next page](https://discourse.processing.org/t/dijkstra-algorithm-view-node-edges/26891.md?page=2)