Creating a "connecting dots" background

[galen]

Hello, I've been trying to create a nice background with many dots flying around which if close enough to another dot then "links" to that dot. Roughly like the picture attached.

 

I have been able to create some dots flying around but I can't get the line stuff to work. I tried with Phaser.Line and then updating it with line.fromSprite(point1,point2,false) but when doing it with multiple lines, I'm not sure how to keep track of all the lines.

Does anyone have any ideas of how to do this? 

[P4UL]

I have an idea but I do not know if it is very efficient. You could do something like this:

1. Create a line from every point to every other point and hold references to them in an array (in the create function).
2. In the update function calculate the distance between the points.
3. If two points are close enough then update the line start and end points and show the line. if the points are too far away then hide the line.

I do not know if this is a good way to do this because you will have many lines. On the other hand you only create the lines once and reuse them with this approach.

[galen]

Hello, I tried doing it the way you suggested the other day, but I wasnt sure how to keep track of which line belonged to which points. 

But today I tried creating the points in create, creating debug lines between each of the points close enogh in update, and then finally rendered the lines in render, and here is the result:

 

The colours could be better, and it would be nice to add some "functionallity" to it, like some dots are blue and some green, and the green dots make a green line and then take over a blue dot, to make it green. 

 

Do you want to see the code, P4UL?

[P4UL]

I created a js fiddle how I would do it: https://jsfiddle.net/o9cf5zt6/10/

It basically creates all the lines in the create function. Each line holds a reference to its start and end points. In the render function is a for loop that iterates over every line and calculates the distance between the start and end points. If close enough, it updates the line and renders it.
(Please keep in mind that I am also really new to phaser, so there could be better ways to do this)

It would be helpful to see your code. In your screenshot some close points are not connected, is that what you want? If not how do you calculate wich lines should be drawn?
 

[galen]

Hi, nice of you to show your idea  I wasn't aware you could save the circles like that, so thanks!

Yes, it works as intended in the picture. I used your line saving idea and made the points move and put it into another jsfiddle: https://jsfiddle.net/t2pytweb/. It's very similar to my first code and I'm new to jsfiddle, so I hope you can see/edit it.

I will also try to make it change colors somehow, maybe the points can be at war against each other , but probably not today.

[P4UL]

Happy to help! I updated your fiddle. I added phaser as an external resource and I removed the game.debug.geom(point). You are using sprites for the points, so there is no need to show them in the render function with game.debug.geom().

Link to the updated fiddle: https://jsfiddle.net/t2pytweb/7/

Changing the colors is a nice idea.

I have some ideas for further improvements:
I think it is better to use sprites for the lines. You could create a simple texture for this and scale it up (only the x scale) to be exactly as long as the distance between the points. Then place it between the two points and rotate it towards the points.

[galen]

Hi, I did what you suggested, had to look up some math stuff though  https://jsfiddle.net/t2pytweb/10/.

Do you know how the lines could be always centered in the middle of the circle, so that it looks a bit better? It should only be a matter of adding a few extra pixels on the x and y axis but I'm not sure how to reliably do that.

[P4UL]

I updated the fiddle: https://jsfiddle.net/t2pytweb/12/

To align the lines in the center of the circles I changed the sprites anchor. The anchor of the circles is set to 0.5 for x and y. So the x and y position of the points is exactly in the center of the point. The anchor of the lines is set to 0.5 for x and 0 for y. Because of the 0.5 for x the vertical align is in the center of the line. And because of the 0 for the y anchor the horizontal position is still on the left side of the line (so you can position it at the start point). I attached an image so you can better see where the anchors are.

I also changed the size and color of the points and lines in your example so that it is easier to see that the lines are correctly aligned to the center of the points.

The code that updates the lines every frame is now in the update function. The render function is for rendering (and for example for displaying debug information). So the update function is better for this.

[galen]

Ah, that's what anchor is used for, thanks for showing me that as well! Looks much better now

[P4UL]

Happy to help!