Hi

I'm thinking of playing the sound each time when a circle is collided with the other circle.

However, I can't play each time when the circle is collided. (only the first collision, the sound play works out) 

import ddf.minim.*;
// ---------------------------------------------------------------------------- Initialisation
// Global (i.e. PApplet-wide) constants and variables
final color BACKGROUND = color (0, 0, 0) ; // the background colour(BLACK)

Bin bin ;
int numCircle = 3 ; // the number of circles
Circle[] circles = new Circle[numCircle] ; // declare and create the array

AudioSnippet song;
Minim minim ;
// -------------------------------------------------
void setup() {
  size(960, 600) ; // set the mianpanel size as 960 * 600)
  background(BACKGROUND) ; // set the background colour
  smooth() ;
  noStroke() ;

  bin = new Bin(100, 300, 100) ;
  for (int i = 0; i < circles.length; i++) {
    // set the position of the circles (in this case, random)
    float x = random(100, 700) ;
    float y = random(300, 600) ;
    circles[i] = new Circle(x, y, 50) ; // create each object
  }
 
    // set the sound
  minim = new Minim(this) ;
  song = minim.loadSnippet("Recycle.wav");
}

// ------------------------------------------------------------------------------ Main methods
// Display the elements
void draw() {
  background(BACKGROUND) ;

  bin.paint() ; // draw the circle(bin)
  for (int i = 0; i < circles.length; i++) {
    circles[i].paint() ; // draw the objects consist in the Circle paint() function
    circles[i].collisionDetection() ;
  }
}

// prepare to end the sound play
void stop(){
  song.close();
  minim.stop();
  super.stop();
}
// -------------------------------------------------
void mousePressed() {
  for (int i = 0; i < numCircle; i++) {
    circles[i].dragPressed() ; // when the mouse is pressed, do the drawPressed() function
    circles[i].collisionDetection() ; // Is this necessary for the whole function?
  }
}
void mouseReleased() {
  for (int i = 0; i < numCircle; i++) {
    circles[i].dragReleased() ; // when the mouse is pressed, do the drawPressed() function
    circles[i].collisionDetection() ;
  }
}
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------

class Bin {
  // ----------------------------------------------------------------- Constants and variables
  public float bx, by ; // the x and y-coordinate of the circle(object)
  private int radius ; // the radius of the circle
  // ---------------------------------------------------------------------------- Constructors
  Bin(float bxPos, float byPos, int radi) {
    this.bx = bxPos ;
    this.by = byPos ;
    this.radius = radi ;
  }
  // --------------------------------------------------------------------------- Public methods
  public void paint() {
    // Draw the circle
    fill(255, 0, 0) ;
    ellipse(bx, by, radius, radius) ;
  }
 }
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------

class Circle {
  // ----------------------------------------------------------------- Constants and variables
  private float x, y ; // the x and y-coordinate of the circle(object)
  private float dx, dy ; // the difference between the circle's position and the mouse position
  private int radius ; // the radius of the circle
  private boolean startDrag ; // prepare for drag signal
  private boolean isStop ; // prepare to stop drawing circles
  private boolean isPlayed ;
  // ---------------------------------------------------------------------------- Constructors
  Circle(float xPos, float yPos, int radi) {
    this.x = xPos ;
    this.y = yPos ;
    this.radius = radi ;
  }
  // --------------------------------------------------------------------------- Public methods
  public void paint() {

   
    // when the circles collieded with other, play the sound and stop drawing
    if (isStop && isPlayed) { // if isStop is true
    // song.rewind() ; <- having this makes the sound odd
      song.play() ;
      return ; // Exit the function, without drawing anything
    }

    // when the mouse drag starts, starDrag turns "true" and implement the function
    if (startDrag) { // startDrag == true
      x = mouseX + dx; 
      y = mouseY + dy;
    }

    // Draw the circles
    fill(255) ;
    ellipse(x, y, radius, radius) ;
  }
  // ------------------------------------------------------- Getters and setters
  // ------------------------------------------------------- Setters
  // ------------------------------------------------------ Other public methods
  public void collisionDetection() {
    // if the centre of the cicle and the bin(circle) position is less than the radius,
    if (dist(x, y, bin.bx, bin. by) <= radius) {
      isStop = true ;
      isPlayed = true ;
    }
  }
  public void dragPressed() {
    // if the centre of the cicle and the mouse position is less than the radius of the circle,
    if (dist(x, y, mouseX, mouseY) <= radius) {
      startDrag = true ; // the drag turns "true"
      // calculate the distance between the circle's position and that of mouse
      dx = x - mouseX;
      dy = y - mouseY;
    }
  }

  public void dragReleased() {
    startDrag = false ; // the darg turns "false"
  }
  // -------------------------------------------------------------------------------------------
}

Hi, I have a problem that how to use images over the circles which have a collision detection function(when each circle is draged, the draged circle disappears) so that I can drag images according to the position of the circles?

The behaviour I want to have is that once each image is draged and meets the collision detection condition, make it disappear with circles(in this case stop drawing). 

I tryied to set the images on the circles so that when I drag the image, both the image and the circle behind the image are draged. like @ <- a is the circle behind the image and the ◎ is the image

 

// Global (i.e. PApplet-wide) constants and variables
final color BACKGROUND = color (255, 255, 255) ; // the background colour(white)
PImage bg, binImage, A, B, C ; //<------------------ A, B, C are the images should be placed over the small circles

Bin bin ;
int numCircle = 3 ; // the number of circles
Circle[] circles = new Circle[numCircle] ; // declare and create the array
// -------------------------------------------------
void setup() {
  size(960, 600) ; // set the mianpanel size as 960 * 600)
  background(BACKGROUND) ;
 
  // set the images
  bg = loadImage("bgPic.png") ;
  binImage = loadImage("rubbishBin.jpg") ;
  A = loadImage("-------.png") ; // <- each image(A, B, C) is different
  B = loadImage("-------.png") ;
  C = loadImage("-------.png") ;
 
  smooth() ;
  noStroke() ;

  bin = new Bin(width-251, height-143, 70) ; // set both the position and the radius
  for (int i = 0; i < circles.length; i++) {
    // set the position of the circles (in this case, random)
    float x = random(100, width/2) ;
    float y = random(300, 600) ;
    circles[i] = new Circle(x, y, 50) ; // create each object
  }
}

// ------------------------------------------------------------------------------ Main methods
// Display the elements
void draw() {
  fill(BACKGROUND) ;
  image(bg, 0, 0) ; // set the position fo the bgImage

  bin.paint() ; // draw the circle(bin)
  image(binImage, width-300, height-200) ; // set the postion of the binImage
 
  for (int i = 0; i < circles.length; i++) {
    circles[i].paint() ; // draw the objects consist in the Circle paint() function
    circles[i].collisionDetection() ; // implement the collisionDetection
  }
}
// -------------------------------------------------
void mousePressed() {
  for (int i = 0; i < numCircle; i++) {
    circles[i].dragPressed() ; // when the mouse is pressed, do the drawPressed() function
    circles[i].collisionDetection() ; // implement the collisionDetection
  }
}
void mouseReleased() {
  for (int i = 0; i < numCircle; i++) {
    circles[i].dragReleased() ; // when the mouse is pressed, do the drawPressed() function
    circles[i].collisionDetection() ; // implement the collisionDetection
  }
}
// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------

class Circle {
  // ----------------------------------------------------------------- Constants and variables
  private float x, y ; // the x and y-coordinate of the circle(object)
  private float dx, dy ; // the difference between the circle's position and the mouse position
  private int radius ; // the radius of the circle
  private boolean startDrag ; // prepare for drag signal
  private boolean isStop ; // prepare to stop drawing circles
  // ---------------------------------------------------------------------------- Constructors
  Circle(float xPos, float yPos, int radi) {
    this.x = xPos ;
    this.y = yPos ;
    this.radius = radi ;
  }
  // --------------------------------------------------------------------------- Public methods
  public void paint() {
    // when the circles collieded with other, stop drawing
    if (isStop) { // if isStop is true
      return ; // Exit the function, without drawing anything
    }

    // when the mouse drag starts, starDrag turns "true" and implement the function
    if (startDrag) { // startDrag == true
      x = mouseX + dx; 
      y = mouseY + dy;
    }

    // Draw the circles
    fill(155) ; // gray
    for (int i = 0; i < numCircle; i++) {
      ellipse(x, y, radius, radius) ;
    }
  }
  // ------------------------------------------------------- Getters and setters
  // ------------------------------------------------------- Setters
  // ------------------------------------------------------ Other public methods
  public void collisionDetection() {
    // if the centre of the cicle and the bin(circle) position is less than the radius,
    if (dist(x, y, bin.bx, bin. by) <= radius) {
      isStop = true ;
    }
  }
  public void dragPressed() {
    // if the centre of the cicle and the mouse position is less than the radius of the circle,
    if (dist(x, y, mouseX, mouseY) <= radius) {
      startDrag = true ; // the drag turns "true"
      // calculate the distance between the circle's position and that of mouse
      dx = x - mouseX;
      dy = y - mouseY;
    }
  }

  public void dragReleased() {
    startDrag = false ; // the darg turns "false"
  }
  // -------------------------------------------------------------------------------------------
}
// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------

class Bin {
  // ----------------------------------------------------------------- Constants and variables
  public float bx, by ; // the x and y-coordinate of the circle(object)
  private int radius ; // the radius of the circle
  // ---------------------------------------------------------------------------- Constructors
  Bin(float bxPos, float byPos, int radi) {
    this.bx = bxPos ;
    this.by = byPos ;
    this.radius = radi ;
  }
  // --------------------------------------------------------------------------- Public methods
  public void paint() {
    // Draw the circle
    fill(255, 0, 0) ; // red
    ellipse(bx, by, radius, radius) ;
  }
}
// ------------------------------------------------------------------------------------------- -------------------------------------------------------------------------

Hi. I attemped to implement the collision of circles but it did not worl.

I aim to make the white circles remove(set the out-side of the screen) when the circles collided with the big circle.

Here is what Ive got so far with lots of helps.

// Global (i.e. PApplet-wide) constants and variables
final color BACKGROUND = color (0, 0, 0) ; // the background colour(BLACK)

Bin bin ;
int numCircle = 3 ; // the number of circles
Circle[] circles = new Circle[numCircle] ; // declare and create the array
// -------------------------------------------------
void setup() {
  size(960, 600) ; // set the mianpanel size as 960 * 600)
  background(BACKGROUND) ; // set the background colour
  smooth() ;
  noStroke() ;
 
  bin = new Bin(100, 300, 100) ;
  for (int i = 0; i < circles.length; i++) {
    // set the position of the circles (in this case, random)
    float x = random(100, 700) ;
    float y = random(300, 600) ;
    circles[i] = new Circle(x, y, 50) ; // create each object
  }
}

// ------------------------------------------------------------------------------ Main methods
// Display the elements
void draw() {
  background(BACKGROUND) ;
 
  bin.paint() ; // draw the circle(bin)
  for (int i = 0; i < circles.length; i++) {
    circles[i].paint() ; // draw the objects consist in the Circle paint() function
  }
}
// -------------------------------------------------
void mousePressed() {
  for (int i = 0; i < numCircle; i++) {
    circles[i].dragPressed() ; // when the mouse is pressed, do the drawPressed() function
  }
}
void mouseReleased() {
   for (int i = 0; i < numCircle; i++) {
    circles[i].dragReleased() ; // when the mouse is pressed, do the drawPressed() function
  }
}
// -----------------------------------------------------------------------------------------------------------------------------------------------------------------------

class Bin {
  // ----------------------------------------------------------------- Constants and variables
  private float bx, by ; // the x and y-coordinate of the circle(object)
  private int radius ; // the radius of the circle
  // ---------------------------------------------------------------------------- Constructors
  Bin(float bxPos, float byPos, int radi) {
    this.bx = bxPos ;
    this.by = byPos ;
    this.radius = radi ;
  }
  // --------------------------------------------------------------------------- Public methods
  public void paint() {
    // Draw the circle
    fill(255, 0, 0) ;
    ellipse(bx, by, radius, radius) ;
  }
}

//------------------------------------------------------------------------------------------------------------------------------------------------------------------------

class Circle {
  // ----------------------------------------------------------------- Constants and variables
  private float x, y ; // the x and y-coordinate of the circle(object)
  private float dx, dy ; // the difference between the circle's position and the mouse position
  private int radius ; // the radius of the circle
  private boolean startDrag ; // prepare for drag signal

  Bin bin ;
  // ---------------------------------------------------------------------------- Constructors
  Circle(float xPos, float yPos, int radi) {
    this.x = xPos ;
    this.y = yPos ;
    this.radius = radi ;
  }
  // --------------------------------------------------------------------------- Public methods
  public void paint() {
    // when the mouse drag starts, starDrag turns "true" and implement the function
    if (startDrag == true) {
      x = mouseX + dx; 
      y = mouseY + dy;
    }

    // Draw the circles
    fill(255) ;
    for (int i = 0; i < numCircle; i++) {
      ellipse(x, y, radius, radius) ;
    }
  }
  // ------------------------------------------------------- Getters and setters
  // ------------------------------------------------------- Setters
  // ------------------------------------------------------ Other public methods
  public void collisionDetection() {
    // if the centre of the cicle and the bin(circle) position is less than the radius,
    if (dist(x, y, bin.bx, bin. by) <= radius) {
      // remove the circles which collieded with the bin(circle)
      for (int i = 0; i < numCircle; i++) {
        ellipse(-100, -100, radius, radius) ; // outside of the screen
      }
    }
  }
  public void dragPressed() {
    // if the centre of the cicle and the mouse position is less than the radius of the circle,
    if (dist(x, y, mouseX, mouseY) <= radius) {
      startDrag = true ; // the drag turns "true"
      // calculate the distance between the circle's position and that of mouse
      dx = x - mouseX;
      dy = y - mouseY;
    }
  }

  public void dragReleased() {
    startDrag = false ; // the darg turns "false"
  }
  // -------------------------------------------------------------------------------------------
}
// -------------------------------------------------------------------------------------------

Hi. here I tried to have many circles by means of array but, now I have got an error : unexpected taken ; void on the "void draw()" line. I wounder how to fix this problem.

I want to increase the number of circles which have capability of being dragged by the mouse.

 

final color BACKGROUND = color (0, 0, 0) ; // the background colour(BLACK)

 int numCircle = 3 ; // the number of memory
Memory[] circle = new Circle[numCircle] ; // declare and create the array
// -------------------------------------------------
void setup() {
  size(960, 600) ; // set the mianpanel size as 960 * 600)
  background(BACKGROUND) ; // set the background colour
  smooth() ;
  noStroke() ;
 
  for(int i = 0; i < circle.length; i++){
    float x = 20 + i * 10 ;
    float y = 10 + i * 20 ;
    circle[i] = new Circle(x, y, 50) ; // create each object
}

// ------------------------------------------------------------------------------ Main methods
// Display the elements
void draw() {
  background(BACKGROUND) ;
  for (int i = 0; i < circle.length; i++){
   circle[i].paint() ; // draw the objects consist in the Memory paint() function
  }
}
// -------------------------------------------------
void mousePressed() {
  circle.dragPressed() ; // when the mouse is pressed, do the drawPressed() function
}
void mouseReleased() {
  circle.dragReleased() ; // when the mouse is released, do the drawReleased() function
}

// -------------------------------------------------------------------------------------------------------------------------------------------------

class Circle {
  // ----------------------------------------------------------------- Constants and variables
  private float x, y ; // the x and y-coordinate of the circle(object)
  private float dx, dy ; // the difference between the circle's position and the mouse position
  private int radius ; // the radius of the circle
  private boolean startDrag ; // prepare for drag signal
  // ---------------------------------------------------------------------------- Constructors
  Circle(float xPos, float yPos, int radi) {
    this.x = xPos ;
    this.y = yPos ;
    this.radius = radi ;
  }
  // --------------------------------------------------------------------------- Public methods
  public void paint() {
    // when the mouse drag starts, starDrag turns "true" and implement the function
    if (startDrag == true) {
      x = mouseX + dx; 
      y = mouseY + dy;
    }
   
    // Draw the circle
    fill(255) ;
    ellipse(x, y, radius, radius) ;
  }
  // ------------------------------------------------------- Getters and setters
  // ------------------------------------------------------- Setters
  // ------------------------------------------------------ Other public methods
  public void dragPressed(){
    // if the centre of the cicle and the mouse position is less than the radius of the circle,
    if (dist(x, y, mouseX, mouseY) <= radius) {
      startDrag = true ; // the drag turns "true"
      // calculate the distance between the circle's position and that of mouse
      dx = x - mouseX;
      dy = y - mouseY;
    }
  }
 
  public void dragReleased(){
    startDrag = false ; // the darg turns "false"
  }
  // -------------------------------------------------------------------------------------------
}
// -------------------------------------------------------------------------------------------