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) ;
}
}
// ------------------------------------------------------------------------------------------- -------------------------------------------------------------------------
