Question About Rotating Quad

Processing Coding Questions
1

So the title may not be clear enough but i’m trying to make the Galactic Empire emblem from Star Wars. in the very middle circle there are trapezoids coming out. I made the first top one but is there a formula or a function to make the other trapezoids AS WELL AS rotate them with each one made?

Currently i’m using the quad function to make the trapezoid. I already have to figure out how i’m going to shrink the whole thing together but i’m hoping i could get an actual not too detailed answer using simple beginner functions if it’s possible.

Thanks!

2

Check this tutorial about 2D transforms

Post some code if you are stuck.

Kf

3

Well I was asking if there was a function or formula to use to move and translate. I had already looked at that but that’s not helping me with moving and rotation a quad() shape as well as repeating so they’re spaced evenly and rotate at the same time.

4

Yes, R/T depends on quad definition. It is really hard to picture your quads based on the description you provided. It is better if you provide a sketch or image of what you want to do. For any shape, you can always rotate and translate them. Choosing the reference point for translation and the pivot point for rotation depends on the shape and based on selection, you can make your life easier or more difficult.

Kf

5

To create patterns such as those found in the Galactic Empire logo, you could try code like

size(512, 512);
smooth(8);
background(255);
fill(0);
noStroke();

int count = 6;

// Translation
float centerX = width * 0.5;
float centerY = height * 0.5;

// Rotation
float rotation = HALF_PI;
float arcLength = PI / 8.0;
float halfArcLength = arcLength * 0.5;
float iToTheta = TWO_PI / float(count);

// Scale
float shortEdge = min(width, height);
float outerRadius = shortEdge * 0.45;
float innerRadius = shortEdge * 0.2;

for (int i = 0; i < count; ++i) {
  float angle = rotation + i * iToTheta;
  float t0 = angle - halfArcLength;
  float t1 = angle + halfArcLength;

  float ct0 = cos(t0);
  float st0 = sin(t0);

  float ct1 = cos(t1);
  float st1 = sin(t1);

  float p0x = centerX + ct0 * innerRadius;
  float p0y = centerY + st0 * innerRadius;

  float p1x = centerX + ct1 * innerRadius;
  float p1y = centerY + st1 * innerRadius;

  float p2x = centerX + ct1 * outerRadius;
  float p2y = centerY + st1 * outerRadius;

  float p3x = centerX + ct0 * outerRadius;
  float p3y = centerY + st0 * outerRadius;

  quad(p0x, p0y,
    p1x, p1y,
    p2x, p2y,
    p3x, p3y);
}

You may also find the arc function useful. The following is added at the end of the code above.

noFill();
stroke(255.0, 0.0, 0.0);
strokeWeight(20.0);
strokeCap(SQUARE);
float radius = shortEdge * 0.7;
float arcLength2 = PI / 4.0;
float halfArcLength2 = arcLength2 * 0.5;
for (int i = 0; i < count; ++i) {
  float theta = rotation + i * iToTheta;
  float t0 = theta - halfArcLength2;
  float t1 = theta + halfArcLength2;
  arc(centerX, centerY, radius, radius, t0, t1, OPEN);
}

The final image produced by this code looks like this:

000
000.png512×512 10.4 KB

1 Like
6

Have you tried pushMatrix() and popMatrix() to reset the canvas after each object you try to rotate/move?