› › ›

Spinning Text

c_vzqzc_vzqz
edited April 2016 in Questions about Code

I'm trying to make the three main words spin from the center of the word. I can't seem to find how to move the origin of the rotating point. I have found how to move it around but not to the center of the word. It keeps rotating from the first letter.

int myTime;
PFont myCourier, myPapyrus;              // declare names for fonts
float angle = 0;

void setup() {
  size( 800, 800 );
  myCourier = createFont("Courier-Bold", 50);
  myPapyrus = createFont("Papyrus", 170);
  colorMode( HSB, 360, 100, 100 );
}

void draw() {

  background( 360 );

  myTime = millis() % 20000;  

  if (myTime>500 && myTime < 1980)
  {
    scene1();
  }
 if (myTime >500 && myTime < 2850)
  {
    scene2();
  }
  if (myTime > 2850 && myTime < 3340)
  {
    scene3();
  }
  if (myTime > 3340 && myTime < 3440)
  {
    scene4();
  }
  if (myTime > 3440 && myTime < 4016)
  {
    scene5();
  }
  if (myTime > 4016 && myTime < 4700)
  {
    scene6();
  }
  if (myTime > 4700 && myTime < 5625)
  {
    scene7();
  }
  if (myTime > 5625 && myTime < 6625)
  {
   scene8();
  }
  if (myTime > 6625 && myTime < 8000)
  {
  scene9();
  }
  if (myTime > 8000 && myTime < 10000)
  {
   scene10();
  }
   if (myTime > 10000 && myTime < 12000)
  {
   scene11();
  }
   if (myTime > 12000 && myTime < 15000)
  {
   scene12();
  }
}

 void scene1()
{  
  pushMatrix();
  translate(width/2, height/14);
  rotate(millis() * 0.001 * TWO_PI);
  //float yPosition1 = map( myTime, 0, 1400, width/1.05, height/2.45 );  // this maps time into position
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2, height/6);
  popMatrix();
}

void scene2()
{
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2 , height/6 ); 

  float xPosition1 = map( myTime, 2000, 2800, width, 100 );  // this maps time into position

  textAlign(LEFT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", xPosition1 , height/3.5 );
}  

void scene3()
{  
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2 , height/6 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9, height/3.5 );

  float xPosition2 = map( myTime, 2000, 2800, width, 500 );  // this maps time into position

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your mind", xPosition2 , height/3);
}  

void scene4()
{     
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2 , height/6 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9 , height/3.5 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your mind", width/2.65 , height/3);
}

void scene5()
{     
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2 , height/6 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9 , height/3.5 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your mind", width/2.65 , height/3);

  //float yPosition2 = map( myTime, 3000, 4000, width/1.05, height/2.45 );  // this maps time into position
  pushMatrix();
  translate(width/2, height/2);
  rotate(millis() * 0.001 * TWO_PI);
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Believe", width/2, height/2); 
  popMatrix();
}

void scene6()
{     
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2 , height/6 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9 , height/3.5 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your mind", width/2.65 , height/3);

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Believe", width/2 , height/2 );

  float xPosition3 = map( myTime, 4000, 4800, width, 200 );  // this maps time into position

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", xPosition3 , height/1.7 );

}

void scene7()
{     
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2 , height/6 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9 , height/3.5 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your mind", width/2.65 , height/3);

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Believe", width/2 , height/2 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9 , height/1.7 );

  float xPosition4 = map( myTime, 5000, 5800, width, 200 );  // this maps time into position

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your heart", xPosition4 , height/1.57 );

}

void scene8()
{     
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2 , height/6 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9 , height/3.5 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your mind", width/2.65 , height/3);

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Believe", width/2 , height/2 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9 , height/1.7 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your heart", width/2.4 , height/1.57 );

}

void scene9()
{     
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2 , height/6 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9 , height/3.5 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your mind", width/2.65 , height/3);

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Believe", width/2 , height/2 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9 , height/1.7 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your heart", width/2.4 , height/1.57 );

  pushMatrix();
  rotate(millis() * 0.001 * TWO_PI);
  //float yPosition3 = map( myTime, 3000, 3300, 100, 2 );  // this maps time into position
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Achieve", width/2, height/1.25); 
  popMatrix();
}

  void scene10()
{     
  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2 , height/6 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9 , height/3.5 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your mind", width/2.65 , height/3);

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Believe", width/2 , height/2 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", width/2.9 , height/1.7 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your heart", width/2.4 , height/1.57 );

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Achieve", width/2 , height/1.25 );

}
  void scene11()
{ 
  float xPosition4 = map( myTime, 10000, 12000, width/2, 1200 );  // this maps time into position
  float xPosition5 = map( myTime, 10000, 12000, width/2, 10 );  // this maps time into position

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2 , height/6 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", xPosition4 , height/3.5 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your mind", xPosition5 , height/3);

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Believe", width/2 , height/2 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("With all", xPosition4 , height/1.7 );

  textAlign(RIGHT);
  textFont(myCourier);
  fill( 0, 0, 50);
  text("Your heart", xPosition5 , height/1.57 );

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Achieve", width/2 , height/1.25 );  
}

void scene12()
{ 
  float yPosition4 = map( myTime, 12000, 13000, 100, 2 );  // this maps time into position
  float yPosition5 = map( myTime, 13000, 14000, 800, 900 );  // this maps time into position

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Imagine", width/2 , yPosition4 );

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Believe", width/2 , height/2 );

  textAlign(CENTER);
  textFont(myPapyrus);
  fill( 0 );
  text("Achieve", width/2 , yPosition5 );  
}
Tagged:

Best Answer

Answers

  • BarbaraAlmeidaBarbaraAlmeida
    Answer ✓

    That’s quite a lot of code, it’s easier to help you if you post a small code that shows only your problem: http://stackoverflow.com/help/mcve

    • When you translate, you change the position of the origin;
    • When you rotate afterwards, you rotate around this origin;

    • So, if you want to rotate around the center of the text, make sure the center of your text is at the origin (textAlign(CENTER)+ text(“your text”, 0, 0)).

      float theta = 0;

void setup() {
  size(400, 400);
  noStroke();
}

void draw() {
  background(255);

  translate(width/2, height/2);
  rotate(theta);

  fill(255, 0, 0);
  ellipse(0, 0, 4, 4);

  fill(0);
  textAlign(CENTER, CENTER);
  textSize(100);
  text("TEXT", 0, 0);

  theta += radians(1);
}
  • c_vzqzc_vzqz

    thank you so much

Sign In or Register to comment.