Looking for guidance on rotating objects

Processing Libraries
1

HI,

I’m looking for ideas on how to approach this concept. I have a smaller octagon inside of another ocagon. They are connected by lines on each vertex.

I want to rotate the outside octagon while keeping the inner, smaller one stationary, but I want the lines that connect them to stay connected and stretch while one of them is rotating.

I tried using pushMatrix() and popMatrix() but if I do that the lines disconnect.

If you look at the code I posted you can change r1 or r2 and see what I’m talking about, the connecting lines are disconnecting.

If anyone has any ideas on how to approach this let me know.

Can I rotate just a vertex around a point? Maybe I can group several vertices together and rotate them.

Thank you in advance.


import oscP5.*;

//OSC receive
OscP5 oscP5;




float cx = 0;
float cy = 0;
float radius = 221;

float cx2 = 0;
float cy2 = 0;
float radius2 = 166;

float r1 = 0;
float r2 = 0;





void setup() {
  size(800, 800);
  oscP5 = new OscP5(this, 12000);
  background(255);
}

void oscEvent(OscMessage theOscMessage) {    

  float value = theOscMessage.get(0).floatValue();

  if (theOscMessage.checkAddrPattern("/cx")) {
    if (value > -400) {
      cx = value;
    } else {
      cx = 0.0;
    }
  }

  float value2 = theOscMessage.get(0).floatValue();

  if (theOscMessage.checkAddrPattern("/cy")) {
    if (value2 > -400) {
      cy = value2;
    } else {
      cy = 0.0;
    }
  }

  float value3 = theOscMessage.get(0).floatValue();

  if (theOscMessage.checkAddrPattern("/radius")) {
    if (value3 > -400) {
      radius = value3;
    } else {
      radius = 0.0;
    }
  }

  float value4 = theOscMessage.get(0).floatValue();

  if (theOscMessage.checkAddrPattern("/radius2")) {
    if (value4 > -400) {
      radius2 = value4;
    } else {
      radius2 = 0.0;
    }
  }
  float value5 = theOscMessage.get(0).floatValue();

  if (theOscMessage.checkAddrPattern("/r1")) {
    if (value5 > -400) {
      r1 = value5;
    } else {
      r1 = 0.0;
    }
  }

  float value6 = theOscMessage.get(0).floatValue();

  if (theOscMessage.checkAddrPattern("/r2")) {
    if (value6 > -400) {
      r2 = value6;
    } else {
      r2 = 0.0;
    }
  }

  float value7 = theOscMessage.get(0).floatValue();

  if (theOscMessage.checkAddrPattern("/cx2")) {
    if (value7 > -400) {
      cx2 = value7;
    } else {
      cx2 = 0.0;
    }
  }

  float value8 = theOscMessage.get(0).floatValue();

  if (theOscMessage.checkAddrPattern("/cy2")) {
    if (value8 > -400) {
      cy2 = value8;
    } else {
      cy2 = 0.0;
    }
  }
  

}

void draw() {

  // background(255);

  fill(255, 20);
  noStroke();
  rect(0, 0, width, height);

  // pushMatrix();
  // translate(width/2, height/2);



  // rightside uptriangles



  // upside down trianges

  stroke(0);
  strokeWeight(3);

  //bigger octagon

  pushMatrix();
  translate(width/2, height/2);

  rotate(r1);

  beginShape();
  //horizontan face
  vertex(cx-radius/2, cy-radius);
  vertex( cx+radius/2, cy-radius);
  //vertical right face
  vertex( cx+radius, cy-radius/2);
  vertex(cx+radius, cy+radius/2);
  // bottome face
  vertex( cx+radius/2, cy+radius);
  vertex(cx-radius/2, cy+radius);
  // left vertical face
  vertex( cx-radius, cy+radius/2);
  vertex(cx-radius, cy-radius/2);
  endShape(CLOSE);



  line( cx-radius/2, cy-radius, cx2-radius2/2, cy2-radius2);
  line( cx+radius/2, cy-radius, cx2+radius2/2, cy2-radius2);
  line( cx+radius, cy-radius/2, cx2+radius2, cy2-radius2/2);
  line(cx+radius, cy+radius/2, cx2+radius2, cy2+radius2/2);
  line( cx+radius/2, cy+radius, cx2+radius2/2, cy2+radius2);
  line(cx-radius/2, cy+radius, cx2-radius2/2, cy2+radius2);
  line( cx-radius, cy+radius/2, cx2-radius2, cy2+radius2/2);
  line(cx-radius, cy-radius/2, cx2-radius2, cy2-radius2/2);




  rotate(r2);

  beginShape();
  //horizontan face
  vertex(cx2-radius2/2, cy2-radius2);
  vertex( cx2+radius2/2, cy2-radius2);
  //vertical right face
  vertex( cx2+radius2, cy2-radius2/2);
  vertex(cx2+radius2, cy2+radius2/2);
  // bottome face
  vertex( cx2+radius2/2, cy2+radius2);
  vertex(cx2-radius2/2, cy2+radius2);
  // left vertical face
  vertex( cx2-radius2, cy2+radius2/2);
  vertex(cx2-radius2, cy2-radius2/2);
  endShape(CLOSE);


  //third inner octagon

  beginShape();

  vertex(cx2, cy2-radius2);
  vertex(cx2+radius2-radius2/4, cy2-radius2+radius2/4);
  vertex(cx2 + radius2, cy2);
  vertex(cx2+radius2-radius2/4, cy2+radius2-radius2/4);
  vertex(cx2, cy2+radius2);
  vertex(cx2-radius2+radius2/4, cy2+radius2-radius2/4);
  vertex(cx2 - radius2, cy2);
  vertex(cx2-radius2+radius2/4, cy2-radius2+radius2/4);

  endShape(CLOSE);

  // inner square

  beginShape();
  // vertex(cx2, cy2-radius2);
  vertex(cx2+radius2-radius2/4, cy2-radius2+radius2/4);
  // vertex(cx2 + radius2, cy2);
  vertex(cx2+radius2-radius2/4, cy2+radius2-radius2/4);
  // vertex(cx2, cy2+radius2);
  vertex(cx2-radius2+radius2/4, cy2+radius2-radius2/4);
  // vertex(cx2 - radius2, cy2);
  vertex(cx2-radius2+radius2/4, cy2-radius2+radius2/4);

  endShape(CLOSE);

  // 2nd inner square

  beginShape();
  vertex(cx2, cy2-radius2);
  // vertex(cx2+radius2-radius2/4, cy2-radius2+radius2/4);
  vertex(cx2 + radius2, cy2);
  // vertex(cx2+radius2-radius2/4, cy2+radius2-radius2/4);
  vertex(cx2, cy2+radius2);
  // vertex(cx2-radius2+radius2/4, cy2+radius2-radius2/4);
  vertex(cx2 - radius2, cy2);
  // vertex(cx2-radius2+radius2/4, cy2-radius2+radius2/4);

  endShape(CLOSE);

  popMatrix();
}
1 Like
2

have you tried thinking in polar coordinates?

float x,y,r;// x, y center of octagone, r radius
float rotation=0;//rotation speed
  int sides = 8;
PVector[] vertices; 

void setup(){
  
 size(800,800); 
  
  x=width/2;
  y=height/2;
  r=150;
  vertices = new PVector[8];
}


void draw(){
  
background(255);

    float inc = 2 * PI / sides;
    for (int i = 0; i < sides; i++) {
     float ang = (i * inc) - inc / 2;
      float vX = (x + r * cos(ang+rotation));
    float vY =( y + r * sin(ang+rotation));
    vertices[i]=new PVector(vX,vY);
beginShape();
vertex(vX,vY);
endShape(CLOSE);

    }
//rotate   

for(int k=0;k<sides;k++){
 line( vertices[k].x,vertices[k].y,vertices[(k+1)%sides].x,vertices[(k+1)%sides].y);
  
  
}

rotation +=0.01;  


}

this will draw a rotation octagon around it’s center, you can create a class of polygon , and rotate one and keep one fix. you should build an array of vertices for both polygon and draw the line.

hope this helps

2 Likes
3

try this code, and adapt it to what you really want


float x,y,rB,rS;// x, y center of octagone, r radius big ans small
float rotation=0;//rotation speed
float ang;
  int sides = 8;
PVector[] verticesB,verticesS; //big and small

void setup(){
  
 size(800,800); 
  
  x=width/2;
  y=height/2;
  rB=200;
  rS=100;
  verticesB = new PVector[8];
  verticesS = new PVector[8];
}


void draw(){
  
background(255);

   octB();
   octS();
   
   for(int k=0;k<sides;k++){
 line( verticesB[k].x,verticesB[k].y,verticesS[k].x,verticesS[k].y);
  
  
}

} 
  
  
void octB(){
  
  float inc = 2 * PI / sides;
    for (int i = 0; i < sides; i++) {
      ang = (i * inc) - inc / 2;
      float vX = (x + rB * cos(ang+rotation));
    float vY =( y + rB * sin(ang+rotation));
    verticesB[i]=new PVector(vX,vY);
beginShape();
vertex(vX,vY);
endShape(CLOSE);

    }
//rotate   

for(int k=0;k<sides;k++){
 line( verticesB[k].x,verticesB[k].y,verticesB[(k+1)%sides].x,verticesB[(k+1)%sides].y);
  
  
}

rotation +=0.01;  
}

void octS(){
  
  float inc = 2 * PI / sides;
    for (int i = 0; i < sides; i++) {
      ang = (i * inc) - inc / 2;
      float vX = (x + rS * cos(ang));
    float vY =( y + rS * sin(ang));
    verticesS[i]=new PVector(vX,vY);
beginShape();
vertex(vX,vY);
endShape(CLOSE);

    }
//rotate   

for(int k=0;k<sides;k++){
 line( verticesS[k].x,verticesS[k].y,verticesS[(k+1)%sides].x,verticesS[(k+1)%sides].y);
  
  
}

 
}
3 Likes
4

Hey @jeykech. WOW. really cool solution. That 2nd bit of code was what I was trying to accomplish. Ok, I’m going to analyze this and incorporate it into my project.

Thank You very much for your input.