Loading...
Logo
Processing Forum
Programming Questions
hargsquare
hargsquare

Rotating a composite shape, made of many cubes, around a single center point

in Programming Questions  •  1 year ago  
Obviously new to this, and the solution is probably obvious, too, but I've tried every placement of the rotate and translate functions I can think of. 

I'm just trying to make the entire level-2 fractal shape rotate around its own center point in the middle of the screen. As it is, the whole shape rotates around 0, 0, 0, or at least appears to. Code follows below. Thanks for any help.

// level-2 mosely fractal assembler

color c = color (0, 200, 20, 100);
int cubeSize = 40;

float rX;
float rY;

MoselyTwo moselySecond;

void setup () {
  size (1200, 800, OPENGL);
  smooth ();
  
moselySecond = new MoselyTwo (width / 2, height / 2, 0);
}

void draw () {
  background (10);
  pushMatrix ();
  rotateX (rX);
  rotateY (rY);
  moselySecond.displayTwo ();
  popMatrix ();
  
  rX = rX + .005;
  rY = rY + .005;
}


class Cube {  
  int cubeX; // final cube x position relative to sponge center
  int cubeY; // final cute y position relative to sponge center
  int cubeZ; // final cube z position relative to sponge center
  
  int holdTime; // wait time in millis before displaying next cube
  
  Cube (int tempCubeX, int tempCubeY, int tempCubeZ, int tempHoldTime) {
    cubeX = tempCubeX;
    cubeY = tempCubeY;
    cubeZ = tempCubeZ;
    holdTime = tempHoldTime;
  }
  
  void display () {
    pushMatrix ();
    translate (cubeX, cubeY, cubeZ);
    fill (c);
    box (cubeSize);
    popMatrix ();
  }
}

class MoselyOne {
  int spongeOneCenterX;
  int spongeOneCenterY;
  int spongeOneCenterZ;
  
  int cubeID;

  int [] cubeCentersInOne = {-1, 0, 0,   1, 0, 0,   -1, 0, -1,   0, 0, -1,   1, 0, -1, 
                             -1, 0, 1,   0, 0, 1,    1, 0, 1,   -1, 1, 0,    0, 1, 0, 
                              1, 1, 0,  -1, -1, 0,   0, -1, 0,   1, -1, 0,   0, 1, -1, 
                              0, 1, 1,   0, -1, -1,  0, -1, 1};
  
  Cube [] cubesInOne = new Cube [18];
  
  MoselyOne (int tempSpongeOneCenterX, int tempSpongeOneCenterY, int tempSpongeOneCenterZ) {
    spongeOneCenterX = tempSpongeOneCenterX;
    spongeOneCenterY = tempSpongeOneCenterY;
    spongeOneCenterZ = tempSpongeOneCenterZ;
    
    for (int i = 0; i < cubeCentersInOne.length - 1; i = i + 3) {
      cubesInOne [cubeID] = new Cube (spongeOneCenterX + cubeCentersInOne [i] * cubeSize, spongeOneCenterY +             cubeCentersInOne [i + 1] * cubeSize,
      spongeOneCenterZ + cubeCentersInOne [i + 2] * cubeSize, 0);
      cubeID = cubeID + 1;
    }
  }
  
  void displayOne () {
    for (int i = 0; i <= cubesInOne.length - 1; i ++) {
      cubesInOne [i].display ();
    }
  } 
}

class MoselyTwo {
  int spongeTwoCenterX;
  int spongeTwoCenterY;
  int spongeTwoCenterZ;
  
  int oneID;

  int [] oneCentersInTwo = {-1, 0, 0,   1, 0, 0,   -1, 0, -1,   0, 0, -1,   1, 0, -1, 
                             -1, 0, 1,   0, 0, 1,    1, 0, 1,   -1, 1, 0,    0, 1, 0, 
                              1, 1, 0,  -1, -1, 0,   0, -1, 0,   1, -1, 0,   0, 1, -1, 
                              0, 1, 1,   0, -1, -1,  0, -1, 1};
  
  MoselyOne [] spongesInTwo = new MoselyOne [18];
  
  MoselyTwo (int tempSpongeTwoCenterX, int tempSpongeTwoCenterY, int tempSpongeTwoCenterZ) {
    spongeTwoCenterX = tempSpongeTwoCenterX;
    spongeTwoCenterY = tempSpongeTwoCenterY;
    spongeTwoCenterZ = tempSpongeTwoCenterZ;
     
    for (int i = 0; i < oneCentersInTwo.length - 1; i = i + 3) {
      spongesInTwo [oneID] = new MoselyOne (spongeTwoCenterX + oneCentersInTwo [i] * cubeSize * 3,       spongeTwoCenterY + oneCentersInTwo [i + 1] * cubeSize * 3,
      spongeTwoCenterZ + oneCentersInTwo [i + 2] * cubeSize * 3);
      oneID = oneID + 1;
    }
  }
  
  void displayTwo () {
    for (int i = 0; i <= spongesInTwo.length - 1; i ++) {
      spongesInTwo [i].displayOne ();
    }

  } 
}

Replies(4)

benja
benja

Re: Rotating a composite shape, made of many cubes, around a single center point

1 year ago
Hey,

just translate to the middle of your window, then rotate, then translate back to the origin.
Copy code
  1.   pushMatrix ();
      translate(width/2, height/2);
      rotateX (rX);
      rotateY (rY);
      translate(-width/2, -height/2);
      moselySecond.displayTwo ();
      popMatrix ();
GoToLoop
GoToLoop

Re: Rotating a composite shape, made of many cubes, around a single center point

1 year ago
Hello every1! 1st post here!!!

I'm just starting to learn Processing, and in the future some Java and JavaScript.
I've made some mods to the hargsquare's code, and in the end, realized both MoselyOne & MoselyTwo classes are very similar to each other.
I was wondering whether it is possible to synthesize & merge them into 1?
Here's his modified code so far:
Copy code
  1. // Level-2 Mosely Fractal Assembler (modded)
  2. // by hargsquare

  4. // http://forum.processing.org/topic
  5. // /rotating-a-composite-shape-made-of-many-cubes-around-a-single-center-point

  7. import processing.opengl.*;

  9. final int gw = 1280/2, gh = 800/2;
  10. final int depth = 150;

  12. final color c = color(0, 200, 20, 100);
  13. final int cubeSize = 40;
  14. final int cube3Size = cubeSize*3;

  16. float rX = 0, rY = 0;
  17. final float rXInc = .005, rYInc = .005;

  19. final int[][] cubeCenters = {
  20.     {-1,  0,  0}, { 1,  0,  0}, {-1,  0, -1},
  21.     { 0,  0, -1}, { 1,  0, -1}, {-1,  0,  1},
  22.     { 0,  0,  1}, { 1,  0,  1}, {-1,  1,  0},
  23.     { 0,  1,  0}, { 1,  1,  0}, {-1, -1,  0},
  24.     { 0, -1,  0}, { 1, -1,  0}, { 0,  1, -1},
  25.     { 0,  1,  1}, { 0, -1, -1}, { 0, -1,  1}
  26. };

  28. final int cubeCentersLength = cubeCenters.length;

  30. MoselyTwo moselySecond;

  32. void setup() {
  33.     size(1280, 800, OPENGL);
  34.     moselySecond = new MoselyTwo(gw, gh, depth);
  35. }

  37. void draw() {
  38.     background(10);
  39.     pushMatrix();
  40.     translate(gw, gh);
  41.     rotateX(rX); rotateY(rY);
  42.     translate(-gw, -gh);
  43.     moselySecond.displayTwo();
  44.     popMatrix();

  46.     rX += rXInc; rY += rYInc;
  47. }
Copy code
  1. class Cube { 
  2.     int cubeX, cubeY, cubeZ;  // final cube x,y,z positions relative to sponge center

  4.     Cube (int tempCubeX, int tempCubeY, int tempCubeZ) {
  5.         cubeX = tempCubeX; cubeY = tempCubeY; cubeZ = tempCubeZ;
  6.     }

  8.     void display() {
  9.         pushMatrix();
  10.         translate(cubeX, cubeY, cubeZ);
  11.         fill(c);
  12.         box(cubeSize);
  13.         popMatrix();
  14.     }
  15. }

  17. class MoselyOne {
  18.     int spongeOneCenterX, spongeOneCenterY, spongeOneCenterZ;
  19.     int i;

  21.     Cube[] cubesInOne = new Cube[cubeCentersLength];

  23.     MoselyOne(int tempSpongeOneCenterX, int tempSpongeOneCenterY, int tempSpongeOneCenterZ) {
  24.         spongeOneCenterX = tempSpongeOneCenterX;
  25.         spongeOneCenterY = tempSpongeOneCenterY;
  26.         spongeOneCenterZ = tempSpongeOneCenterZ;

  28.         for (i = 0; i < cubeCentersLength; ++i)
  29.             cubesInOne[i] = new Cube(
  30.             spongeOneCenterX + cubeCenters[i][0]*cubeSize,
  31.             spongeOneCenterY + cubeCenters[i][1]*cubeSize,
  32.             spongeOneCenterZ + cubeCenters[i][2]*cubeSize);
  33.     }

  35.     void displayOne() {
  36.         for (i = 0; i < cubeCentersLength; cubesInOne[i++].display());
  37.     }
  38. }

  40. class MoselyTwo {
  41.     int spongeTwoCenterX, spongeTwoCenterY, spongeTwoCenterZ;
  42.     int i;

  44.     MoselyOne[] spongesInTwo = new MoselyOne[cubeCentersLength];

  46.     MoselyTwo(int tempSpongeTwoCenterX, int tempSpongeTwoCenterY, int tempSpongeTwoCenterZ) {
  47.         spongeTwoCenterX = tempSpongeTwoCenterX;
  48.         spongeTwoCenterY = tempSpongeTwoCenterY;
  49.         spongeTwoCenterZ = tempSpongeTwoCenterZ;

  51.         for (i = 0; i < cubeCentersLength; ++i)
  52.             spongesInTwo[i] = new MoselyOne(
  53.             spongeTwoCenterX + cubeCenters[i][0]*cube3Size,
  54.             spongeTwoCenterY + cubeCenters[i][1]*cube3Size,
  55.             spongeTwoCenterZ + cubeCenters[i][2]*cube3Size);
  56.     }

  58.     void displayTwo() {
  59.         for (i = 0; i < cubeCentersLength; spongesInTwo[i++].displayOne());
  60.     }
  61. }
quarks
quarks

Re: Rotating a composite shape, made of many cubes, around a single center point

1 year ago
To draw a composite shape it is necessary to nest the translations.

In the code below there is a class called Sponge which is a composite shape of a yellow sphere at its centre and a number of Cubes randomly placed arround the centre.

When the sponge is drawn it
saves the current matrix
translates and rotates the position of the sponge
draws the spere
then for each cube
      save the current matrix
      translate the cube
      draw the cube
      restore the matrix
after last cube restore the matrix

Notice that each cube transformation is compounded with the spaonge transformation.

Copy code
  1. Sponge s;
  2. Cube c;
  3. float rx, ry, rz;

  5. void setup() {
  6.   size(300, 300, P3D);
  7.   float x, y, z, cs;
  8.   int col;
  9.   s = new Sponge(20, 30, 40); // Position of sponge centre in 3D space
  10.   for (int i = 0; i < 6; i++) {
  11.     x = random(-50, 50);
  12.     y = random(-50, 50);
  13.     z = random(-50, 50);
  14.     col = color(random(64, 255), random(64, 255), random(64, 255));
  15.     cs = random(10.0, 18.0);
  16.     c = new Cube(x, y, z, col, cs);
  17.     s.addToBody(c);
  18.   }
  19. }

  21. void draw() {
  22.   background(32);
  23.   lights();
  24.   camera(0, 0, 200, 0, 0, 1, 0, 1, 0);
  25.   s.display();
  26.   rx += 0.01;
  27.   ry += 0.013;
  28.   rz += 0.023;
  29.   s.setRotation(rx, ry, rz);
  30. }

  32. class Sponge {
  33.   float x, y, z ; // position of spogue
  34.   float rotX, rotY, rotZ;
  35.   ArrayList<Cube> body = new ArrayList<Cube>();
  36.   Sponge(float px, float py, float pz) {
  37.     x = px;
  38.     y = py;
  39.     z = pz;
  40.     rotX = rotY = rotZ = 0;
  41.   }

  43.   void setRotation(float rx, float ry, float rz) {
  44.     rotX = rx;
  45.     rotY = ry;
  46.     rotZ = rz;
  47.   }

  49.   void addToBody(Cube c) {
  50.     body.add(c);
  51.   }

  53.   void display() {
  54.     pushMatrix();
  55.     translate(x, y, z);
  56.     rotateX(rotX);
  57.     rotateY(rotY);
  58.     rotateZ(rotZ);
  59.     fill(255, 255, 0);
  60.     noStroke();
  61.     sphere(3); // center of sponge
  62.     for (int i = 0; i < body.size(); i++) {
  63.       body.get(i).display();
  64.     }
  65.     popMatrix();
  66.   }
  67. }

  69. class Cube { 
  70.   float x, y, z; // Position relstive to centre of Sponge
  71.   int col;
  72.   float csize;
  73.   Cube (float px, float py, float pz, int c, float s) {
  74.     x = px;
  75.     y = py;
  76.     z = pz;
  77.     col = c;
  78.     csize = s;
  79.   }

  81.   void display () {
  82.     pushMatrix ();
  83.     translate (x, y, z);
  84.     fill (col);
  85.     box (csize);
  86.     popMatrix ();
  87.   }
  88. }

hargsquare
hargsquare

Re: Rotating a composite shape, made of many cubes, around a single center point

1 year ago
Hey, thanks, folks. Got it sorted with your help. Much appreciation.
Top Reply

Statistics

  • 4 Replies
  • 868  Views
  • 0 Followers

Actions

Related Posts