How would I do something like you can see above?

Programming Questions

brandonpa..

How would I do something like you can see above?

in Programming Questions • 1 years ago

See the background of this webpage? How when the circles are overlapping, it draws a line between them?

I wanted to create something like this, only I couldn't.

Before I start my long post, If you know if this is a sample code available somewhere, please tell me. Thanks.

I created a processing program where I wanted it to draw two circles, and connect them if they were overlapping. In the end, this didn't work, however, I think I have the idea right. First, I created two ellipses and stored their x and y coordates as fx,fy,sx,sy (first x, first y, second x, second y).

I then used the distance formula to calculate the distance between the center of the circles. If the distance was less than or equal to the diameter of the circle, It would draw a line ( line(fx,fy,sx,sy); ) from the center of the first to the center of the second. Unfortunately, I did something wrong somewhere along the line and draws a line some of the time.

I tried to figure this out on paper, but to no avail. Also, I couldn't figure out how to produce many circles and store the coordinates of them while they were being created (sorry if this is unclear). If you want to look at my code for errors on my part, just ask.

Thanks!

Replies(2)

amnon.owed

Re: How would I do something like you can see above?

1 years ago

Most convenient would be a class that stores things like location, speed and radius. Then you can define some stuff in the class (like how it moves, displays etc.) and make a lot of them. Here is small example, that shows you the basics to make something like that image.

Code Example

ArrayList <ConnectedCircle> circles = new ArrayList <ConnectedCircle> ();
int numCircles = 125;
void setup() {
size(500, 500);
smooth();
for (int i=0; i<numCircles; i++) {
circles.add(new ConnectedCircle());
}
}
void draw() {
background(100);
for (ConnectedCircle cc : circles) {
cc.update();
cc.display();
}
}
class ConnectedCircle {
PVector loc;
PVector vel;
float radius;
ConnectedCircle() {
loc = new PVector(random(width), random(height));
vel = new PVector(random(-2, 2), random(-2, 2));
radius = random(20, 150);
}
void update() {
loc.add(vel);
if (loc.x < -radius/2) { loc.x = width+radius/2; }
if (loc.x > width+radius/2) { loc.x = -radius/2; }
if (loc.y < -radius/2) { loc.y = height+radius/2; }
if (loc.y > height+radius/2) { loc.y = -radius/2; }
}
void display() {
stroke(0);
strokeWeight(0.2);
for (ConnectedCircle cc : circles) {
if (loc.dist(cc.loc) < radius/1.5) {
line(loc.x, loc.y, cc.loc.x, cc.loc.y);
}
}
noStroke();
fill(200, 25);
ellipse(loc.x, loc.y, radius, radius);
fill(0);
ellipse(loc.x, loc.y, 3, 3);
}
}

brandonpa..

Re: How would I do something like you can see above?

1 years ago

thanks! Im pretty new at this (and programming in general).

Top Reply