Constraining object movement to an ellipse.

Programming Questions

eightohni..

Constraining object movement to an ellipse.

in Programming Questions • 1 year ago

Following the fabulous Nature of Code tutorials by Dan Shiffman, I've replicated following simple sketch:

A single object is repulsed by the mouse pointer. Currently the object can move freely around the stage, but what I'm trying to achieve, is to have the object move away from the cursor, but at the same time be fixed to a "rail" (the red ring in the sketch).

But I have no clue how to achieve this. I'm thinking it may become quite complex, because I apply the repulsion force to the object, but since it only can move on a curved path, said force may act upon the object in ways I can't yet see. (Or lack the essential math for).

Any pointers to how I could tackle this problem would be greatly appreciated.

Thing t;
void setup() {
size(250, 250);
background(0);
t = new Thing();
}
void draw() {
background(0);
// the ball should move on this rail.
noFill();
stroke(255, 0, 0);
ellipse(width/2, height/2, width*.75, height*.75);
// render object
t.render();
}
// class
class Thing {
PVector loc, vel, acc;
float topspeed;
Thing() {
loc = new PVector(random(width), random(height));
vel = new PVector(0, 0);
topspeed = 4;
}
void update() {
PVector mouse = new PVector(mouseX, mouseY);
PVector dir = PVector.sub(mouse, loc);
dir.normalize();
dir.mult(-0.1);
acc = dir;
vel.add(acc);
vel.limit(topspeed);
loc.add(vel);
}
void render() {
update();
warpEdge();
display();
}
void display() {
noStroke();
fill(255);
ellipse(loc.x, loc.y, 20, 20);
}
// if object reaches edge, "warp" to opposite side
void warpEdge() {
if (loc.x > width) {
loc.x = 0;
}
else if (loc.x < 0) {
loc.x = width;
}
if (loc.y > height) {
loc.y = 0;
}
else if (loc.y < 0) {
loc.y = height;
}
}
}

Slightly off-topic addendum: Dan has kickstarted his NoC tutorials into a book! Currently he has outlined all chapters and is finalizing the layout and design. I am a project backer and have read some draft chapters. This thing will be awesome! So, if you are into this kind of programming, I highly recommend you keep an eye out for the final release.

Replies(4)

maleo

Re: Constraining object movement to an ellipse.

1 year ago

here is a pretty flawed first try: just snap the object back to the circle on a radial intersection.

maybe a better solution would be to have the object move on the circle in the first place and let the force act on it's angular speed.

Thing t;
void setup() {
size(500, 500);
background(0);
t = new Thing();
}
void draw() {
background(0);
// the ball should move on this rail.
noFill();
stroke(255, 0, 0);
ellipse(width/2, height/2, width*.75, height*.75);
// render object
t.render();
}
// class
class Thing {
PVector loc, vel, acc;
float topspeed;
Thing() {
loc = new PVector(random(width), random(height));
vel = new PVector(0, 0);
topspeed = 4;
}
void update() {
PVector mouse = new PVector(mouseX, mouseY);
PVector dir = PVector.sub(mouse, loc);
dir.normalize();
dir.mult(-0.1);
acc = dir;
vel.add(acc);
vel.limit(topspeed);
loc.add(vel);
}
void constrainToCircle(float x, float y, float r) {
// constrain to circle
PVector mid = new PVector(x, y);
PVector dir = PVector.sub(loc, mid);
dir.normalize();
dir.mult(r);
line(mid.x, mid.y, PVector.add(mid, dir).x, PVector.add(mid, dir).y);
loc = PVector.add(mid, dir);
}
void render() {
update();
constrainToCircle(width/2, height/2, width*0.75*0.5);
warpEdge();
display();
}
void display() {
noStroke();
fill(255);
ellipse(loc.x, loc.y, 20, 20);
}
// if object reaches edge, "warp" to opposite side
void warpEdge() {
if (loc.x > width) {
loc.x = 0;
}
else if (loc.x < 0) {
loc.x = width;
}
if (loc.y > height) {
loc.y = 0;
}
else if (loc.y < 0) {
loc.y = height;
}
}
}

eightohni..

Re: Constraining object movement to an ellipse.

1 year ago

hey maleo,

thanks for your reply! Your sketch certainly does achieve what I was thinking of. Still, the overall feel movement feels a bit off...

I'm currently learning about centripetal acceleration (Khan Academy is awesome!). I'm hoping that if I manage to translate this input into my sketch, possibly the movement will become more natural.

cheers!

maleo

Re: Constraining object movement to an ellipse.

1 year ago

here is another model i created for you.

this is based on a rotation in the first place. its angular speed can be influecend by clicking and dragging the mouse.

influence is determined as follows:

mouse distance to object, closer to object means greater acceleration.
direction of mouse to object, perpendicular to radius (object to center of rotation) gives maximum acceleration.

also there is some easing going on to slow the rotation down, when not interacting.

use constants topspeed, easing and scaleFactor to tweak the behaviour.

Thing t;
void setup() {
size(500, 500);
background(0);
t = new Thing(width/2, height/2, width*.75*.5);
}
void draw() {
background(0);
// the ball should move on this rail.
noFill();
stroke(255, 0, 0);
ellipse(width/2, height/2, width*.75, height*.75);
// render object
t.render();
if (mousePressed) {
t.kick(mouseX, mouseY);
}
// DEBUG INFO
stroke(200);
line(t.loc.x, t.loc.y, t.mid.x, t.mid.y);
line(t.loc.x, t.loc.y, mouseX, mouseY);
PVector v1 = PVector.sub(new PVector(mouseX, mouseY), t.loc); // vector to mouse location
PVector v2 = PVector.sub(t.mid, t.loc); // vector to midpoint
float a = atan2(v2.y, v2.x) - atan2(v1.y, v1.x);
float d = dist(t.loc.x, t.loc.y, mouseX, mouseY);
d = constrain(1 - (d/(2*t.r)), 0, 1); // distance measure from thing [0..1]
text("angle: " + a, 10, 20);
text("dir: " + (1-abs(cos(a))), 10, 40);
text("dist: " + d, 10, 60);
// ----------
}
// class
class Thing {
PVector loc; // current location of thing
PVector mid; // midpoint of movement circle
float r; // radius of movement circle
float a; // angle
float w; // angular speed
float topspeed; // max speed
float easing, scaleFactor;
Thing(float x, float y, float r) {
mid = new PVector(x, y);
this.r = r;
a = 0;
w = 0;
loc = new PVector(r, 0);
topspeed = 1; // maximum angular speed [radians / update]
easing = 0.98; // permanent deceleration due to some force (e.g. friction)
scaleFactor = 0.02; // scale incoming forces
}
void update() {
w *= easing; // ease speed
w = constrain(w, -topspeed, topspeed);
a = (a + w) % TWO_PI;
// compute location from angle
loc.x = mid.x + r * cos(a);
loc.y = mid.y + r * sin(a);
}
void kick(float x, float y) {
// compute distance to thing
float d = dist(loc.x, loc.y, x, y);
d = constrain(1 - (d/(2*r)), 0, 1); // distance measure from mouse to thing [0..1]
// angle to radius
PVector v1 = PVector.sub(new PVector(x, y), loc); // vector to kick location
PVector v2 = PVector.sub(mid, loc); // vector to midpoint
// angle from v1 to v2 [0..TWOPI]
// used to determine the direction of acceleration
float angle = atan2(v2.y, v2.x) - atan2(v1.y, v1.x);
if (angle < 0) angle+=TWO_PI;
// 1 - cos of angle : 1 when perpendicular, 0 when parallel
// used to determine magnitude of acceleration
float m = 1 - abs(cos(angle));
float acc = scaleFactor * m * d; // angular acceleration
if (angle < PI) acc*=-1; // correct direction
w += acc;
}
void render() {
update();
display();
}
void display() {
noStroke();
fill(255);
ellipse(loc.x, loc.y, 20, 20);
}
}

eightohni..

Re: Constraining object movement to an ellipse.

1 year ago

Wow, sweet. This is pretty much what I was shooting for. Can't say, that I understand every part of your code yet, but it's a great reference to work with.

Thanks!

Top Reply