Clickable concentric circles
in
Programming Questions
•
1 year ago
I am trying to make concentric circle that are clickable and draggable and when you drag one, the child/parent circles drag with. The calculations are simple:
void update(int x,int y){
for(int l=0;l<levels;l++){
if(dlvl[l].selected && dlvl[l].mouseOver() && dlvl[l].dragging){
dlvl[l].update(mouseX);
}else{
int newsize = (dlvl[l].sizeW-mouseX<0)?0:dlvl[l].sizeW-mouseX;
dlvl[l].update(newsize);
}
}
}
Wherein you just use either mouseX or mouseY of dragging for the circle size. However, I find that the circle either replace eachother or other issues. Can someone tell me what I am doing wrong?
int levels = 3;
float[][] level = new float[levels][5];
Level[] dlvl = new Level[levels];
void mouseDragged(){
for(int l=0;l<levels;l++){
dlvl[l].dragging=true;
}
}
void mousePressed(){
for(int l=0;l<levels;l++){
dlvl[l].selected=true;
}
}
void mouseReleased(){
for(int l=0;l<levels;l++){
dlvl[l].selected=false;
}
}
void setup(){
size(500,500);
initializeLevelData();
initializeLevel();
}
void draw(){
update(mouseX,mouseY);
background(0);
for(int l=0;l<levels;l++){
dlvl[l].display();
}
//update();
}
void initializeLevelData(){
for(int lvl=0;lvl<levels;lvl++){
level[lvl][0] = width/2;
level[lvl][1] = height/2;
level[lvl][2] = 150*(lvl+1);
level[lvl][3] = 150*(lvl+1);
}
}
void initializeLevel(){
for(int l=0;l<levels;l++){
dlvl[l] = new Level((int)level[l][0],(int)level[l][1],(int)level[l][2],(int)level[l][3]);
}
}
void update(int x,int y){
for(int l=0;l<levels;l++){
if(dlvl[l].selected && dlvl[l].mouseOver() && dlvl[l].dragging){
dlvl[l].update(mouseX);
}else{
int newsize = (dlvl[l].sizeW-mouseX<0)?0:dlvl[l].sizeW-mouseX;
dlvl[l].update(newsize);
}
}
}
class Level{
int x,y,sizeW,sizeH;
boolean dragging=false;
boolean selected=false;
boolean mouseover=false;
Level(int X, int Y, int W, int H){
x = X;
y = Y;
sizeW = W;
sizeH = H;
}
void update(int newsize) {
this.sizeW=newsize;
this.sizeH=newsize;
}
void display() {
noStroke();
fill(64,128,187,70);
ellipse(this.x,this.y,this.sizeW,this.sizeH);
}
/*
* Need to check inner rim to outer rim to make sure outer rims
* do not override inner rims when checking mouseover
*/
boolean mouseOver() {
float disX = this.x - mouseX;
float disY = this.y - mouseY;
if(sqrt(sq(disX) + sq(disY)) < this.sizeW ) {
this.mouseover=true;
return true;
} else {
this.mouseover=false;
return false;
}
}
}
1
