Rotating Text 4 | Mysite 2

CODE 4

PFont myfont;

void setup(){
size(500,500);
background(200);
//noLoop();
frameRate(5);
myfont = createFont("SentyWen", 100);
textFont(myfont);
}

void draw(){

int i = 0;
translate(width/2, height/2);
background(200);

int ra = int(random(3));
if (ra == 0){
textAlign(CENTER, TOP);
}else if (ra == 1){
textAlign(CENTER, CENTER);
}else{
textAlign(CENTER, BOTTOM);
}

while(i <= 7){
fill(0);
textSize(100);
text("Yann", 0, 0);
rotate(PI/2);
i++;
}
}

CODE 4

Original Code

PFont myfont;
void setup(){
size(800,800);
background(255,255,255);
myfont=createFont("SentyWen",272);
textFont(myfont,272);
translate(400,400);

for(int i=0;i<6;i=i+1){
fill(0,0,0);

textAlign(CENTER);
pushMatrix();
rotate(PI*i/3);
text("The",0,0);
popMatrix();
}
}

Original Code

Modifications

It can be clearly seen that the original code of this text rotation is the same as code 1 and code 3. However,the code has been modified into a more complicated code. The biggest change of this code is that this code increases the amount of textAlign(). This enables the code to move in and out just like the video above.

Smaller things like screen size, background colour and the phrase are also being changed. As shown above, it is clearly seen that this code has been modified into a totally different code. The only thing that remains the same is that both the phrase rotate on itself.

Function Analyse

This Code let the phrase to rotate in and out.

PFont myfont;

void setup(){
  size(500,500);
  background(200);
  //noLoop();
  frameRate(5);
  myfont = createFont("SentyWen", 100);
  textFont(myfont);
}

All the setup is being introduced in the first part of the code. The function frameRate() is being used in this code. This function specifies the number of frames to be displayed every second. In this case, the function call frameRate(5) will attempt to refresh 5 times a second.

int ra = int(random(3));
  if (ra == 0){
      textAlign(CENTER, TOP);
    }else if (ra == 1){
      textAlign(CENTER, CENTER);
    }else{
      textAlign(CENTER, BOTTOM);
    }

This part of the code is the most important part. It decide how the phrase move. The textAlign() function is being used in this code. It is clearly shown that the code has stated that if the integer ra can be either 0, 1, 2 or 3 as the function random is used. And below that, it state that if the integer ra is 0 the text will expand and form a square and if ra is one since it is textAlign(CENTER, TOP), the text will be align on the centre as it is textAlign(CENTER, CENTER). This part of code creates the movement of the phrase.

The last part of the code enables the phrase to rotate while moving as it uses the rotate() function again *rotate(PI/2);*.