Moving a shape and having the other one follow it - processing

Question

I am trying to draw a number of shapes in processing which react to each others movements. So when I move one of them, it is connected to say 1 or 2 of the other shapes in the sketch. However I don't want it to be a static movement, I want it to look quite natural.
The only code I have at the moment is basic drawing of a shape which moves when you drag it, but have no idea how to link shapes :( Help!!
float bx;
float by;
int boxSize = 75;
boolean overBox = false;
boolean locked = false;
float xOffset = 0.0;
float yOffset = 0.0;
void setup()
{
size(640, 360);
bx = width/2.0;
by = height/2.0;
rectMode(RADIUS);
}
void draw()
{
background(0);
// Test if the cursor is over the box
if (mouseX > bx-boxSize && mouseX < bx+boxSize &&
mouseY > by-boxSize && mouseY < by+boxSize) {
overBox = true;
}
// Draw the box
rect(bx, by, boxSize, boxSize);
}
void mousePressed() {
if(overBox) {
locked = true;
} else {
locked = false;
}
xOffset = mouseX-bx;
yOffset = mouseY-by;
}
void mouseDragged() {
if(locked) {
bx = mouseX-xOffset;
by = mouseY-yOffset;
}
}
void mouseReleased() {
locked = false;
}
I am thinking I need to use PShape, but am unsure.

Answer 1

First of all, I recommend you to use a class for the shapes, that way you can link them easily.
I make some changes in your code in order to get some kind of following behaviour.
class Box{
float bx;
float by;
int size = 75;
Box(float bx, float by){
this.bx = bx;
this.by = by;
}
void drawBox(){
rect(bx, by, size, size);
}
void moveBox(float x, float y){
bx = bx + x;
by = by + y;
}
}
boolean overBox = false;
boolean locked = false;
float xOffset = 0.0;
float yOffset = 0.0;
Box box, secondBox, thirdBox;
void setup()
{
size(640, 360);
box = new Box(width/2.0, height/2.0);
secondBox = new Box(100, 100);
thirdBox = new Box(500, 300);
rectMode(RADIUS);
}
void draw()
{
background(0);
// Test if the cursor is over the box
if (mouseX > box.bx-box.size && mouseX < box.bx+box.size &&
mouseY > box.by-box.size && mouseY < box.by+box.size) {
overBox = true;
box.drawBox();
secondBox.drawBox();
thirdBox.drawBox();
}
}
void mousePressed() {
if(overBox) {
locked = true;
} else {
locked = false;
}
xOffset = mouseX-box.bx;
yOffset = mouseY-box.by;
}
void mouseDragged() {
if(locked) {
box.bx = mouseX-xOffset;
box.by = mouseY-yOffset;
deltaMovemente(box, secondBox);
deltaMovemente(box, thirdBox);
}
}
void mouseReleased() {
locked = false;
}
void deltaMovemente(Box follow, Box box){
float dx = (follow.bx - box.bx)/50;
float dy = (follow.by - box.by)/50;
box.moveBox(dx, dy);
}
Hope this can be useful.
Regards.