Clicking object that moves and rotates? (Flocking)

Programming Questions

osedax

Clicking object that moves and rotates? (Flocking)

in Programming Questions • 1 year ago

I'm still working on a Boids derivative program that has several irregularly-shaped objects randomly moving around the screen. Unlike Boids, I would like users to be able to click on any object in the flock and have it respond to that click. I've read the threads about clicking on objects, but those examples featured circles and squares, while my images are represented by rectangles and can change rotation depending upon the object's heading.

I've tried to do this on lines 40 and 151, and in both cases, it sets the clickable area as an unrotated rectangle at the coordinates of the top-left corner. While this would work if the objects were all static rectangles, they move and rotate, so how could I get the clickable area to rotate with them? Any help would be greatly appreciated!

Flock flock;
void setup() {
size(640, 360);
flock = new Flock();
// Add an initial set of boids into the system
for (int i = 0; i < 1; i++) {
flock.addBoid(new Boid(new PVector(width/2,height/2), 0.5, 0.05));
}
smooth();
}
void draw() {
background(50);
flock.run();
}
// Add a new boid into the System
/*void mousePressed() {
flock.addBoid(new Boid(new PVector(mouseX,mouseY),2.0f,0.05f));
}*/
// The Flock (a list of Boid objects)
class Flock {
ArrayList boids; // An arraylist for all the boids
Flock() {
boids = new ArrayList(); // Initialize the arraylist
}
void run() {
for (int i = 0; i < boids.size(); i++) {
Boid b = (Boid) boids.get(i);
b.run(boids); // Passing the entire list of boids to each boid individually
if(mousePressed && (mouseX >= b.loc.x && mouseX <= (b.loc.x + 18) && mouseY >= b.loc.y && mouseY<= (b.loc.y +73))) {
print("BOID " + i);
}
}
}
void addBoid(Boid b) {
boids.add(b);
}
}
// The Boid class
class Boid {
PVector loc;
PVector vel;
PVector acc;
float w;
float h;
float maxforce; // Maximum steering force
float maxspeed; // Maximum speed
Boid(PVector l, float ms, float mf) {
acc = new PVector(0,0);
vel = new PVector(random(-1,1),random(-1,1));
loc = l.get();
w = 18.0;
h = 73.0;
maxspeed = ms;
maxforce = mf;
}
void run(ArrayList boids) {
flock(boids);
update();
borders();
render();
}
// We accumulate a new acceleration each time based on three rules
void flock(ArrayList boids) {
PVector sep = separate(boids); // Separation
PVector ali = align(boids); // Alignment
PVector coh = cohesion(boids); // Cohesion
// Arbitrarily weight these forces
sep.mult(1.5);
ali.mult(1.0);
coh.mult(1.0);
// Add the force vectors to acceleration
acc.add(sep);
acc.add(ali);
acc.add(coh);
}
// Method to update location
void update() {
// Update velocity
vel.add(acc);
// Limit speed
vel.limit(maxspeed);
loc.add(vel);
// Reset accelertion to 0 each cycle
acc.mult(0);
}
void seek(PVector target) {
acc.add(steer(target,false));
}
void arrive(PVector target) {
acc.add(steer(target,true));
}
// A method that calculates a steering vector towards a target
// Takes a second argument, if true, it slows down as it approaches the target
PVector steer(PVector target, boolean slowdown) {
PVector steer; // The steering vector
PVector desired = target.sub(target,loc); // A vector pointing from the location to the target
float d = desired.mag(); // Distance from the target is the magnitude of the vector
// If the distance is greater than 0, calc steering (otherwise return zero vector)
if (d > 0) {
// Normalize desired
desired.normalize();
// Two options for desired vector magnitude (1 -- based on distance, 2 -- maxspeed)
if ((slowdown) && (d < 100.0)) desired.mult(maxspeed*(d/100.0)); // This damping is somewhat arbitrary
else desired.mult(maxspeed);
// Steering = Desired minus Velocity
steer = target.sub(desired,vel);
steer.limit(maxforce); // Limit to maximum steering force
}
else {
steer = new PVector(0,0);
}
return steer;
}
void render() {
// Draw a triangle rotated in the direction of velocity
float theta = vel.heading2D() + PI/2;
fill(200,100);
stroke(255);
pushMatrix();
translate(loc.x,loc.y);
rotate(theta);
/*if(mousePressed && (mouseX >= loc.x && mouseX <= (loc.x + 18) && mouseY >= loc.y && mouseY<= (loc.y +73))) {
print("BOID CLICKED");
}*/
beginShape();
vertex(0,0);
vertex(w,0);
vertex(w,h);
vertex(0,h);
endShape(CLOSE);
popMatrix();
}
// Wraparound
void borders() {
if (loc.x < -w) loc.x = width+w;
if (loc.y < -h) loc.y = height+h;
if (loc.x > width+w) loc.x = -w;
if (loc.y > height+h) loc.y = -h;
}
// Separation
// Method checks for nearby boids and steers away
PVector separate (ArrayList boids) {
float desiredseparation = 20.0;
PVector steer = new PVector(0,0,0);
int count = 0;
// For every boid in the system, check if it's too close
for (int i = 0 ; i < boids.size(); i++) {
Boid other = (Boid) boids.get(i);
float d = PVector.dist(loc,other.loc);
// If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself)
if ((d > 0) && (d < desiredseparation)) {
// Calculate vector pointing away from neighbor
PVector diff = PVector.sub(loc,other.loc);
diff.normalize();
diff.div(d); // Weight by distance
steer.add(diff);
count++; // Keep track of how many
}
}
// Average -- divide by how many
if (count > 0) {
steer.div((float)count);
}
// As long as the vector is greater than 0
if (steer.mag() > 0) {
// Implement Reynolds: Steering = Desired - Velocity
steer.normalize();
steer.mult(maxspeed);
steer.sub(vel);
steer.limit(maxforce);
}
return steer;
}
// Alignment
// For every nearby boid in the system, calculate the average velocity
PVector align (ArrayList boids) {
float neighbordist = 25.0;
PVector steer = new PVector(0,0,0);
int count = 0;
for (int i = 0 ; i < boids.size(); i++) {
Boid other = (Boid) boids.get(i);
float d = PVector.dist(loc,other.loc);
if ((d > 0) && (d < neighbordist)) {
steer.add(other.vel);
count++;
}
}
if (count > 0) {
steer.div((float)count);
}
// As long as the vector is greater than 0
if (steer.mag() > 0) {
// Implement Reynolds: Steering = Desired - Velocity
steer.normalize();
steer.mult(maxspeed);
steer.sub(vel);
steer.limit(maxforce);
}
return steer;
}
// Cohesion
// For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location
PVector cohesion (ArrayList boids) {
float neighbordist = 25.0;
PVector sum = new PVector(0,0); // Start with empty vector to accumulate all locations
int count = 0;
for (int i = 0 ; i < boids.size(); i++) {
Boid other = (Boid) boids.get(i);
float d = loc.dist(other.loc);
if ((d > 0) && (d < neighbordist)) {
sum.add(other.loc); // Add location
count++;
}
}
if (count > 0) {
sum.div((float)count);
return steer(sum,false); // Steer towards the location
}
return sum;
}
}

Replies(4)

jbum

Re: Clicking object that moves and rotates? (Flocking)

1 year ago

There are two ways to approach this. If you actually want your birds to be rectangles (or close to rectangles), you can do it this way:

1) Change this in code in your Boid.render() so that the position of your birds is centered within the rectangle. Like so:

beginShape();
vertex(-w/2,-h/2);
vertex(w/2,-h/2);
vertex(w/2,h/2);
vertex(-w/2,h/2);
endShape(CLOSE);

This will also make your boids more well behaved in other ways (e.g. their headings will be centered).

2) Add this new routine to the Boid class, which checks if a screen point is within your Boid rectangle - it basically provides the inverse transformation to the mouse position and then checks it against the boid bounds.

boolean pointInBoid(float x, float y)
{
float theta = vel.heading2D() + PI/2;
boolean inside;
x -= loc.x;
y -= loc.y;
float d = dist(0,0,y,x);
float a = atan2(y,x);
x = cos(a-theta)*d;
y = sin(a-theta)*d;
return x > -w/2 && x < w/2 && y > -h/2 && y < h/2;
}

3) Change the code that checks the mouse to this:

if (b.pointInBoid(mouseX, mouseY)) {
println("BOID " + i);
}

4) Optionally, but cool: Add this code to your draw routine for feedback - it draws a grid of points, and lights up the ones that are inside your boid. I used this to debug my code.

Boid b = (Boid) flock.boids.get(0);
stroke(255);
for (int y = 0; y <= height; y += 10) {
for (int x = 0; x <= width; x += 10) {
if (b.pointInBoid(x,y)) {
strokeWeight(4);
}
else {
strokeWeight(1);
}
point(x,y);
}
}

SO, that's the first method.

If you decide to go with more complex shapes for your boid, then I would suggest a different method: Use an offscreen image map. Paint each of your boids in a solid color, with a different ascending red value for each boid. (Only do this when you actually need to test your mouse clicks). Then check the pixel value where the mouse is and use the red value to index into your boid list.

osedax

Re: Re: Clicking object that moves and rotates? (Flocking)

1 year ago

That's great - it works! I'm having some trouble figuring out why this works though. In Boids, isn't loc.x and loc.y set at 0,0 since it's been translated by those values? If so, why do you subtract it from x and y? It would be great if you could explain that whole function a bit more, but seriously, thank you so much for solving what's left me stumped for the second time now!

jbum

Re: Clicking object that moves and rotates? (Flocking)

1 year ago

loc.x and loc.y are not zero. They are the position of the center of your boid in "screen space", which is the same space that the mouse inhabits. When you render your boid, you do this:

pushMatrix();

translate(loc.x,loc.y);

The effect of this is that if you now render a point at 0,0, it will be rendered on the screen at loc.x, loc.y. So you have transformed the rendering space from "screen space" to "boid space" in which 0,0, instead of being the top/left of the screen, is the center of your boid.

Whenever you do rotations, they happen about the center (x=0, y=0). So by translating, to boid space, we can now perform a rotation, and the boid will rotate about it's center.

rotate(theta);

Then you draw the boid, and all these points, which are expressed as a rectangle centered on the origin, appear in screen space at the correct position and with the correct rotation.

beginShape();

vertex(-w/2,-h/2);

vertex(w/2,-h/2);

vertex(w/2,h/2);

vertex(-w/2,h/2);

endShape(CLOSE);

SO, in your rendering function, you are creating a set of transforms that will allow you to convert a set of points expressed in Boid Space and have them rendered in Screen Space.

In my mouse checking function, I am doing the inverse. I am taking a point (mouseX,mouseY) which is expressed in Screen Space, and applying transforms to it so that it is expressed in Boid Space. This is done by doing the opposite of what you do in the rendering function. First I subtract, rather than add the boid origin:

x -= loc.x;

y -= loc.y;

And then I rotate the opposite direction, by converting the point to polar coordinates, figuring out it's angle, subtacting the angle, and then converting back to cartesian coordinates

float d = dist(0,0,y,x);

float a = atan2(y,x);

x = cos(a-theta)*d;

y = sin(a-theta)*d;

Now, x/y has been converted to Boid space, and we can compare it with the bounds of your rectangle, expressed in boid space.

return x > -w/2 && x < w/2 && y > -h/2 && y < h/2;

osedax

Re: Re: Clicking object that moves and rotates? (Flocking)

1 year ago

Thanks, that makes more sense now. I'm pretty hazy on most geometry, but I can at least follow this much.

Top Reply