How to draw lines between my circles where they overlap

natashagunaratna

hey guys so i managed to write an array of circles but i want to draw lines where the circles overlap one another and Im not that advanced yet-im quite new ive already written the code for the the circles etc which work but i know i need to put in that line function but im a bit confused as how to write it

here it is;

1. //ARRAY PART -SETUP

Particle [] particleCollection = new Particle [500];


void setup(){
  background(255);
  size(500,500,P2D);
  smooth();

  for(int i = 0; i < particleCollection.length; i++){
  particleCollection[i] = new Particle(random(0,width),random(0,200));
  }
}

void draw(){
  background(255);
  noFill();

  for(int i = 0; i < particleCollection.length; i ++){
  particleCollection[i].run();
  }
}


2.// ARRAY PARTICLE SYSTEM 

class Particle{

  float x = 0;
  float y = 0;
  float speedX = 0.5;
  float speedY = 0.5;
  float t = 0;

  Particle(float _x, float _y){

    x = _x;
    y = _y;

  }

  void run(){
    display();
    move();
    bounce();
    gravity();
  }

  void gravity(){
    speedY += 0.1;

  }

  void bounce(){
    if( x > width){
      speedX = speedX * -1;
    }

    if( x < 0){
      speedX = speedX * -1;
    }

    if( y > height){
      speedY = speedY * -1;
    }

    if( y < 0){
      speedY = speedY * -1;
    }
  }

  void move(){
    x += speedX;
    y += speedY;

  }

  void display(){
    ellipse(x,y,50,50);
  }

}

quark

When posting code on this forum then select/highlight the code and press Ctrl + K or click on the C button. This will indent your code so that it is properly formatted. I will do this for you when I have posted this.

If you look at this page there are several functions you can use when working with circles, including one to calculate the intersection points of overlapping circles. They might help.

quark

i want to draw lines where the circles overlap one another

It is not clear what the lines should join. In the following code I have assumed that you want a line that joins the centres of any 2 circles that intersect (i.e. circumferences intersect). I have also provided for different size particles and randomised their starting velocities and have renamed the array to reduce the amount of typing.

// 1: ARRAY PART -SETUP
Particle [] particles = new Particle [50];

void setup() {
  background(255);
  size(800, 500, P2D);
  smooth();

  for (int i = 0; i < particles.length; i++) {
    particles[i] = new Particle(random(0, width), random(0, 200), random(10, 30));
  }
}

void draw() {
  background(255);
  stroke(0);
  strokeWeight(1);
  noFill();
  // Update collection
  for (int i = 0; i < particles.length; i ++) {
    particles[i].run();
  }
  // Draw a red line between the centres of any 2 circles that intersect
  stroke(255, 100, 100);
  for (int i = 0; i < particles.length - 1; i ++) {
    for (int j = i + 1;  j < particles.length; j ++) {
      if (particles[i].intersects(particles[j]))
        line(particles[i].x, particles[i].y, particles[j].x, particles[j].y);
    }
  }
}


// 2: ARRAY PARTICLE SYSTEM

class Particle {

  float x = 0;
  float y = 0;
  float r = 25;
  float speedX = random(0.2, 0.6);
  float speedY = random(0.2, 0.6);
  float t = 0;

  Particle(float x, float y, float r) {
    this.x = x;
    this.y = y;
    this.r = r;
  }

  void run() {
    move();
    bounce();
    gravity();
    display();
  }

  void gravity() {
    speedY += 0.1;
  }

  void bounce() {
    if ( x > width) {
      speedX = speedX * -1;
    }
    else if ( x < 0) {
      speedX = speedX * -1;
    }

    if ( y > height) {
      speedY = speedY * -1;
    }
    else if ( y < 0) {
      speedY = speedY * -1;
    }
  }

  void move() {
    x += speedX;
    y += speedY;
  }

  void display() {
    ellipse(x, y, 2*r, 2*r);
  }

  boolean intersects(Particle p) {
    float dxSQ = (x - p.x)*(x - p.x);
    float dySQ = (y - p.y)*(y - p.y);
    float rSQ = (r + p.r)*(r + p.r);
    float drSQ = (r - p.r)*(r - p.r);
    return (dxSQ + dySQ <= rSQ && dxSQ + dySQ >= drSQ);
  }
}

GoToLoop

Hey! I've made a slim remix. Check it out online: :D

http://studio.processingtogether.com/sp/pad/export/ro.989GaZC5t7EkE/latest

/**
 * Linked Balls (v3.2)
 * by  NatashaGunaratna (2014/Feb)
 * mod Quark & GoToLoop
 *
 * forum.processing.org/two/discussion/3087/
 * how-to-draw-lines-between-my-circles-where-they-overlap
 *
 * studio.processingtogether.com/sp/pad/export/ro.989GaZC5t7EkE/latest
 */

static final int QUALITY = 2, FPS = 60, BG = -1;
static final int NUM = 0100, MIN = 020, MAX = 0100;
final Bubble[] balls = new Bubble[NUM];

static final String ENGINE = JAVA2D;
//static final String ENGINE = P2D;

boolean isLooping = true;

void setup() {
  size(800, 600, ENGINE);
  frameRate(FPS);
  smooth(QUALITY);

  noFill();
  stroke(Bubble.STROKE);
  strokeWeight(Bubble.WEIGHT);
  ellipseMode(CENTER);

  online = 1/2 == 1/2.;

  for ( int i = 0; i != NUM; balls[i++] = new Bubble(
    random(MAX>>1, width - MAX), random(MAX>>1, height>>1), 
    (int) random(MIN, MAX)) );
}

void draw() {
  background(BG);

  if (!online)  frame.setTitle("FPS: " + round(frameRate));

  for (int j, i = 0; i != NUM; stroke(Bubble.STROKE)) {
    Bubble p, b = balls[j = i++].script();
    stroke(Bubble.LINK);

    while (++j != NUM)
      if (b.isIntersecting(p = balls[j]))  b.linkToBubble(p);
  }
}

void mousePressed() {
  if (isLooping ^= true)  loop();
  else                    noLoop();
}

void keyPressed() {
  mousePressed();
}

class Bubble {
  static final color LINK = #FF4040, STROKE = 0;
  static final float GRAV = .15, WEIGHT = 2.;

  float x, y;
  final short d, r;
  float sx = random(.3, 1.5), sy = random(.1, .5);

  Bubble(float xx, float yy, int dd) {
    x = xx;
    y = yy;
    d = (short) dd;
    r = (short) (dd>>1);
  }

  Bubble script() {
    move();
    bounce();
    gravity();
    display();

    return this;
  }

  void move() {
    x += sx;
    y += sy;
  }

  void bounce() {
    if (x > width  - r | x < r) {
      sx *= -1.;
      move();
    }

    if (y > height - r | y < r) {
      sy *= -1.;
      move();
    }
  }

  void gravity() {
    sy += GRAV;
  }

  void display() {
    ellipse(x, y, d, d);
  }

  void linkToBubble(Bubble b) {
    line(x, y, b.x, b.y);
  }

  boolean isIntersecting(Bubble b) {
    return sq(b.x - x) + sq(b.y - y) < sq(b.r + r);
  }
}

_vk

There is this thread in StackOverflow about circle intersection, a PGraphics approach and a cool math one also.

http://stackoverflow.com/questions/13609549/intersecting-circle-overlap/

natashagunaratna

Hey Quark-thanks so much for the help and the comments in the processing! I havent yet learnt the boolean function so now I think I have an idea as to where it can work and not cheers guys and GoToLoop -looks cool! I will definitely be working on that further when i get more time!

Wrote my very own code and it finally worked;

its not it HD so im going to reupload! thanks for the help once again!

GoToLoop

I haven't yet learnt the boolean function...

It's not a function, but 1 of the Java's 8 primitive data-types!

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

Method isIntersecting() returns a boolean type. Value true when current Particle object is intersecting w/ the 1 passed.
Value false otherwise. That returning value decides whether to invoke linkToParticle() within the if block.