Problem with translate and rotate

Programming Questions

afatchimp

Problem with translate and rotate

in Programming Questions • 6 months ago

Hello,

The program I'm trying to make is very simple. The first dot on the screen is in the center, and the second dot rotates around the first one, and the third dot rotates around the second one. However, the issue that I'm having is that the third dot rotates around the first one. I just can't seem to think of a way to get the dots to translate around the previous dot.

EDIT:

I fixed the problem. For lines 21-25, I changed the code to:

x = spacing;
y = spacing;
// pushMatrix();
translate(points.get(num - 1).x, points.get(num - 1).y);
rotate(radians(angle));
ellipse(x, y, diam, diam);
// popMatrix();

The pushMatrix/popMatrix was causing the problem, as well as having spacing inside of ellipse().

I'm having a new problem though. Each dot is dependent on the previous dot. So, if the first dot has an angle of 45, the second dot will have an angle of 90. I'd like the position of the dot to be dependent, but I want the rotation to be completely independent from the previous dot.

New Code:

class Point {
float x;
float y;
float angle;
float diam;
float spacing;
float gravity;
int num;
Point (float initX, float initY, int initNum) {
x = initX;
y = initY;
num = initNum;
diam = 10;
angle = 45;
spacing = 10;
gravity = 0.1;
}
void render() {
fill(0);
noStroke();
if (num != 0) {
x = 0;
y = spacing;
if (angle > 360) {
angle = 0;
}
ellipseMode(CENTER);
translate(points.get(num - 1).x, points.get(num - 1).y);
rotate(radians(angle));
println(num + " " + angle);
ellipse(x, y, diam, diam);
} else {
ellipse(x, y, diam, diam);
}
}
void update() {
if (num != 0) {
angle++;
}
}
}
ArrayList<Point> points;
void setup() {
size(500, 500);
background(255);
points = new ArrayList();
int i = 0;
while (i <= 5) {
points.add(new Point(250, 250, i));
i++;
}
}
void draw() {
background(255);
for(Point p : points) {
p.render();
p.update();
}
}

Old code:

class Point {
float x;
float y;
float angle;
float diam;
float spacing;
int num;
Point (float initX, float initY, int initNum) {
x = initX;
y = initY;
num = initNum;
diam = 10;
angle = 180;
spacing = 50;
}
void render() {
fill(0);
noStroke();
if (num != 0) {
pushMatrix();
translate(points.get(num - 1).x, points.get(num - 1).y);
rotate(radians(angle));
ellipse(spacing, spacing, diam, diam);
popMatrix();
} else {
ellipse(x, y, diam, diam);
}
}
void update() {
if (num != 0) {
angle += random(0, 1.1);
}
}
}
ArrayList<Point> points;
void setup() {
size(500, 500);
background(255);
points = new ArrayList();
int i = 0;
while (i <= 2) {
points.add(new Point(250, 250, i));
i++;
}
}
void draw() {
background(255);
for(Point p : points) {
p.render();
p.update();
}
}

Replies(5)

PhiLho

Re: Problem with translate and rotate

6 months ago

To answer the edit, the transformations go together: if one is dependent, the other is too.
You can compensate by subtracting the previous rotation from the current one, perhaps.

asimes

Re: Problem with translate and rotate

6 months ago

Maybe this is helpful: http://processing.org/learning/transform2d/

Here is an example with comments:

PVector[] p = new PVector[3];
float theta = 0;
void setup () {
size(400, 400);
for (int i = 0; i < p.length; i++) p[i] = new PVector(0, 0);
}
void draw() {
background(255);
// Translate to the middle
translate(width/2, height/2);
ellipse(p[0].x, p[0].y, 50, 50);
// Rotate from the center then translate to the next point
rotate(theta);
translate(100, 0);
ellipse(p[1].x, p[1].y, 40, 40);
// Rotate from the second point then translate to the final point
rotate(theta*2);
translate(50, 0);
ellipse(p[2].x, p[2].y, 30, 30);
theta += TWO_PI/200;
}

GoToLoop

Re: Problem with translate and rotate

6 months ago

Funny thing is that the Array is completely unnecessary to asimes's example:

[Edit] -> On 2nd thought, there's no need for any pos variables. Coords. are always ZERO!

float theta;

void setup() {
  size(400, 400);
  smooth();
  strokeWeight(2);
}

void draw() {
  background(0300);

  // Translate to the middle:
  translate(width >> 1, height >> 1);

  fill(#FF0000);
  ellipse(0, 0, 50, 50);

  // Rotate from the center then translate to the next point:
  rotate(theta += TWO_PI/200);
  translate(width/3, 0);

  fill(#00FFFF);
  ellipse(0, 0, 40, 40);

  // Rotate from 2nd point then translate to the final point:
  rotate(theta*2);
  translate(width >> 3, 0);

  fill(#FFFF00);
  ellipse(0, 0, 30, 30);
}

asimes

Re: Problem with translate and rotate

6 months ago

Oh yeah, ha ha ha. I'm just used to making something to hold positions, didn't even think about it.

afatchimp

Re: Problem with translate and rotate

6 months ago

PhiLho's suggestion seems to work.

I want to try and make a rope that's affected by gravity. Would the example shown by GoToLoop still be helpful if the number of dots is dynamic? It makes sense in the example, but once I try to implement it within the class, then I get really confused.

My current code is really convoluted, but it seems to work so far, and the dots act independently. Would it be better in the long run to use the example where the dots begin at (0, 0)?

EDIT:

Using my current code, I made this. When the mouse is clicked, the dots go to a random angle. The dots don't behave how I want them to yet, but I think I can make their movements a tiny bit more realistic by implementing the gravity/speed variables differently.

I think this idea is way too complicated for me. In the long run, I wanted the first dot (the static one) to be dynamic, and the whole rope to fall to the floor. Then, with the mouse, the user to be able to pick it up... but it seems very, very complex to do that. I can't even figure out how on earth I could detect if the mouse is over a specific dot. I usually use the x and y variables to determine the object's position on the screen, but in this case... x is 0, which leads me to a dead end.

class Point {
float x;
float y;
float angle;
float speed;
float diam;
float spacing;
float gravity;
int num;
Point (float initX, float initY, int initNum) {
x = initX;
y = initY;
num = initNum;
diam = 10;
angle = 180;
speed = 1;
spacing = 10;
gravity = 0.5;
}
void render() {
fill(0);
noStroke();
// Dynamic dots
if (num != 0) {
x = 0;
y = spacing;
if (angle > 360 || angle < 0) {
angle = 0;
}
translate(points.get(num - 1).x, points.get(num - 1).y);
rotate(radians(angle - points.get(num - 1).angle));
println(num + " " + angle);
ellipse(x, y, diam, diam);
} else {
// Static anchor (temporary)
ellipse(x, y, diam, diam);
}
}
void update() {
if (num != 0) {
// Angle affected by speed
angle += speed;
if (angle < 175) {
// Speed is increased if the angle is above 175 degrees
speed += gravity;
} else if (angle > 180) {
// Speed is decreased if the angle is below 180 degrees
speed -= gravity;
} else {
// Speed slows down if the angle is between 175 and 180 degrees
speed *= 0.9;
}
// angle += 1;
}
}
}
ArrayList<Point> points;
void setup() {
size(500, 500);
background(255);
points = new ArrayList();
// While i is less than 5, add dots
int i = 0;
while (i <= 5) {
points.add(new Point(250, 250, i));
i++;
}
}
void mousePressed() {
// Random angles
points.get(1).angle = random(0, 361);
points.get(2).angle = random(0, 361);
points.get(3).angle = random(0, 361);
points.get(4).angle = random(0, 361);
points.get(5).angle = random(0, 361);
}
void draw() {
background(255);
// Show dots on screen
for(Point p : points) {
p.render();
p.update();
}
}