I want to move a square in a circular motion in java processing

Question

This is a school project so i cannot use a lot of functions like translate or rotate. I have to use basic trigonometry to do this. So I have made a square and I need it to move in a circular motion 360 degrees with one of it's point constant and not moving.

               float rotX,rotY;
               size(500,500);

               fill(#B71143);
               int rectX=width/4;
               int rectY=height/10;
               int rectSize=30;
               angle=angle+0.1;
               //rotX=rectX*cos(angle)-rectY*sin(angle);
               //rotY=rectX*cos(angle)+rectY*sin(angle);

               square(rotX,rotY,rectSize);

The tag "circular-dependency" does not refer to geometry or shapes. Here's a relevant post with informative answers about circular dependencies: [What is a circular dependency and how can I solve it?](https://stackoverflow.com/questions/38042130/what-is-a-circular-dependency-and-how-can-i-solve-it). It's a different programming langauge, but the concept is the same. — Kaan, Jul 05 '22 at 18:11
The commented out code almost correctly calculates the coordinates of the rotated square, but in the expression for rotY you need to swap the rectX and rectY. — Alex Sveshnikov, Jul 05 '22 at 18:31
What have you tried so far? What you posted does not look like Java code. — Queeg, Jul 05 '22 at 20:00
@Mazino Welcome to stackoverflow ! :) It's great you've posted a snippet of your attempt and made it clear this is for a school project (+1). When you get a chance, check out the [Tour](https://stackoverflow.com/tour) which should help make most of stackoverflow (as it runs differently compared to forums). — George Profenza, Jul 05 '22 at 21:38

George Profenza · Answer 1 · 2022-07-05T21:41:42.993

You are so close, at least in terms of the trigonometry part.

In terms of Processing you're only missing setup() and draw() which will draw a single frame (once you uncomment the assignments of rotX, rotY and initialise angle to 0)

Here's your code with above notes applied:

float rotX, rotY;
float angle = 0;

void setup() {
  size(500, 500);

  fill(#B71143);
}

void draw() {

  int rectX=width/4;
  int rectY=height/10;

  int rectSize=30;
  angle=angle+0.1;
  
  rotX = rectX*cos(angle)-rectY*sin(angle);
  rotY = rectX*cos(angle)+rectY*sin(angle);
  
  
  square(rotX, rotY, rectSize);
}

Additionally, if you want to draw from the centre, you can add half the width/height to the square coordinates before rendering (equivalent to translating to centre), and if you want to draw a circle instead of an oval, use the same size for the two radii (named rectX, rectY):

float rotX, rotY;
float angle = 0;

void setup() {
  size(500, 500);

  fill(#B71143);

  rectMode(CENTER);
}

void draw() {

  int rectX=width/4;
  int rectY=height/4;

  int rectSize=30;
  angle=angle+0.1;
  
  rotX = rectX*cos(angle)-rectY*sin(angle);
  rotY = rectX*cos(angle)+rectY*sin(angle);
  
  // offset to center
  rotX += width / 2;
  rotY += height / 2;
  
  square(rotX, rotY, rectSize);
}

Personally I'd simplify the code a bit (though your assignment requirements might differ based on your curriculum).

// initialise angle value
float angle = 0;

void setup() {
  size(500, 500);

  fill(#B71143);
}

void draw() {
  // circular motion radius
  int radius = width / 4;
  // define square size
  int rectSize=30;
  // increment the angle (rotating around center)
  angle=angle+0.1;
  // convert polar (angle, radius) to cartesian(x,y) coords
  float x = cos(angle) * radius;
  float y = sin(angle) * radius;
  
  // offset to center
  x += width / 2;
  y += height / 2;
  // render the square at the rotated position
  square(x, y, rectSize);
}

(In case you're after another polar to cartesian coordinates conversion formula explanation you can check out my older answer here which includes an interactive demo)

Bro thank you so much for this detailed explanation. But I think I worded the question wrong. What I want to do is make a fan. The two square will move like a fan with two of it's coordinates constant. — Mazino, Jul 06 '22 at 21:27
Happy to hear the explanations are helpful. Indeed, I interpreted circular motion as moving on a circle (hence the alternative to the ellipse path your original code is using). Do you mind posting a new question clarifying the fan motion ? If you could somehow illustrate what you mean that might help. (For example when you say make a fan I don't know if you mean make a static drawing of fan or animate a line with a static pivot at one end and a square at the other, traversing an arc, or something else. I'm not sure what you mean by two of it's coordinates constant.) — George Profenza, Jul 06 '22 at 21:45
Sorry for the confusion. If you run my code you will see two squares connected in a single coordinate. I need to make that coordinate constant while the two square move in a circular motion like a fan. — Mazino, Jul 07 '22 at 22:33
Can you please post an illustration in a new question ? (I ran your code and I can see one square leaving trails. I'm afraid I don't understand what you mean by "make that coordinate constant" either.). Sorry, maybe it's language thing where I might imagine what you imagine when you use the same words :) — George Profenza, Jul 08 '22 at 13:10

I want to move a square in a circular motion in java processing

1 Answers1