Connection between two circles' centers

General Discussion Other

jimmyvuw

Connection between two circles' centers

in General Discussion • Other • 1 year ago

I would like to create a link (or connection) between two point or two circles, but in the curve form not a straight line. Please help. Sorry for my English.

Replies(11)

kooogy

Re: Connection between two circles' centers

1 year ago

arc() will draw part of a circle between two points

http://processing.org/reference/arc_.html

bezier() and curve() will draw more complex shapes:

http://processing.org/reference/bezier_.html
http://processing.org/reference/curve_.html

jimmyvuw

Re: Connection between two circles' centers

1 year ago

now, what if I got tons of random circles and i want to connect them all together (like a network system or something like that) by using arcs or circles, how to do that? I don't know how to get the position of a random circle and connect it to another one.

calsign

Re: Connection between two circles' centers

1 year ago

I think I understand you...
Just store the random number in a variable and use it more than once...

jimmyvuw

Re: Connection between two circles' centers

1 year ago

Could you show me a short example how to do that please? I'm a total beginner to processing.

calsign

Re: Connection between two circles' centers

1 year ago

//Where you display the circles
int randomX = random(0, width);
int randomY = random(0, height);
//Ellipse
ellipse(randomX, randomY, 100, 100);
//Connector
line(randomX, randomY, 200, 200);

jimmyvuw

Re: Connection between two circles' centers

1 year ago

Thank you I tried it out already! but the problem is the line is all connected into a point (200,200). I would like to connect all the circles together.

tfguy44

Re: Connection between two circles' centers

1 year ago

Here's a sweet example for you:

class Circle{
float x, y, r;
color c;
Circle(){
x = random(width);
y = random(height);
r = random(10,20);
c = color( random(255), random(255), random(255) );
}
void draw(){
pushStyle();
ellipseMode( CENTER );
fill(c);
stroke(0);
ellipse( x, y, r, r );
popStyle();
}
}
Circle[] circles;
void setup(){
size(400,400);
smooth();
circles = new Circle[20];
for( int i = 0; i < circles.length; i++ ){
circles[i] = new Circle();
}
//}
//void draw(){
background(128);
stroke(0);
noFill();
for( int i = 0; i < circles.length-1; i++ ){
bezier( circles[i].x, circles[i].y, circles[i+1].x, circles[i].y, circles[i].x, circles[i+1].y, circles[i+1].x, circles[i+1].y );
}
for( int i = 0; i < circles.length; i++ ){
circles[i].draw();
}
}

Chrisir

Re: Connection between two circles' centers

1 year ago

too late...

// from http://processing.org/learning/topics/arraylistclass.html
ArrayList <Ball> balls;
final int numBalls=4;
final int ballWidth = 48;
final String helpText = "Mouse - new circle; key - new picture";
// =====================================================================
void setup() {
size(500, 500);
smooth();
// Create an empty ArrayList
balls = new ArrayList();
// initCircles
newList();
}
void draw() {
// delete
background(111);
// show balls
// With an array, we say balls.length, with an ArrayList, we say balls.size()
// The length of an ArrayList is dynamic
for (Ball ball : balls) {
ball.display();
}
// help text
fill(244);
text(helpText, 10, 17);
}
void newList() {
balls.clear();
// Start by adding elements
for (int i=0; i<numBalls; i++) {
balls.add(new Ball(
random(30, width-30), random(30, height-30),
ballWidth,
color (random(0, 255), random(0, 255), random(0, 255))));
}
}
// =====================================================================
void mousePressed() {
// A new ball object is added to the ArrayList (by default to the end)
balls.add(new Ball(mouseX, mouseY, ballWidth,
color (random(0, 255), random(0, 255), random(0, 255))));
}
void keyPressed() {
// new picture
newList() ;
}
// =====================================================================
// Simple ball class
class Ball {
float x;
float y;
color myColor;
float w;
int connectTo=-1;
Ball(float tempX, float tempY,
float tempW,
color tempmyColor1) {
x = tempX;
y = tempY;
w = tempW;
myColor=tempmyColor1;
connectTo=(int)random(balls.size()-1);
}
void display() {
// Display the circle
noFill();
stroke(myColor);
ellipse(x, y, w, w);
//
if (connectTo!=-1) {
Ball connectToCircle = balls.get(connectTo);
if (x!=connectToCircle.x) {
/*
// red
stroke(222, 4, 6);
bezier(x, y,
x+connectToCircle.x, y+connectToCircle.y,
connectToCircle.x*.8, connectToCircle.y*.8,
connectToCircle.x, connectToCircle.y
);
*/
//blue
stroke(2, 2, 222);
float addValue=dist(x, y,
connectToCircle.x, connectToCircle.y);
addValue*=.4;
bezier(x, y,
(x+addValue), (y+addValue),
connectToCircle.x+addValue, connectToCircle.y+addValue,
connectToCircle.x, connectToCircle.y
);
} // if
} // if
} // method
//
} // class
// =====================================================================

jimmyvuw

Re: Connection between two circles' centers

1 year ago

@_@ i think it's a little bit too much for me... but anyway, thanks a lot for helping me. Just one more thing, I'm using Python language but based on processing.py. It would be the best if you help translate these codes into python. def, class and things... different @_@ sorry, but i'm confused much about coding

Chrisir

Re: Connection between two circles' centers

1 year ago

I don't know Python language but it would be nice if you would tell that before people write code for you in the wrong language,,,,

jimmyvuw

Re: Connection between two circles' centers

1 year ago

I know, sorry about that...

I'm still very bad at processing last year, but this year they change into python @_@ somehow they just "throw" exercises out and here I come to solve it without any idea how to do that.