How to rotate text around box?

Hi! First of all, I want to apologize for my bad English. I have the assingment in which I have to:

  • play music from mp3 file
  • create a box and make it rotating, changing sizes and colors
  • create a circle by clicking on a screen and make the circle moving down outside of the screen
  • import txt file and make lines of text from this file rotating around the box

I managed to do 3 tasks (although not very good, I think), but I have no idea how to cope with the fourth one. Any suggestions? This is my code, maybe someone may have some suggestions on how to improve other tasks.

Thank you very much.

import ddf.minim.*;
Minim minim;
AudioPlayer player;

void setup(){
  size(500,500,P3D);
  background(#F0AB16);
  smooth();

  minim=new Minim(this);
  player=minim.loadFile("music.mp3",512);
  player.play(); 
}

void draw(){
  background(#F0AB16);

  if (mouseButton==LEFT){
     fill(#CE2A92);
     ellipse(mouseX,mouseY,100,100);
      mouseY++;
  if (mouseY > height) {
    ;
  }
  }

  translate(width/2,height/2);
  rotateX(millis()/1000.0f);
  rotateY(millis()/1000.0f);
  fill(255.0*sin(millis()/650.0),255.0*sin(millis()/800.0),255.0*sin(millis()/1000.0));
  box(250*abs(sin(millis()/1000.0))); 

}

Answers

  • For the 4th

    Look at loadStrings

    Then use pushMatrix and popMatrix around the sections of rotation

    See reference

    Use text instead of box in a similar section as you already have

  • Ok, but when I replace 'box' with 'text' I received error: 'The function text() expects parameters like: text(String, float, float)'

  • edited February 2018

    Yeah well

    • I meant in the structure of the lines of the section replace box with text

    • The parameters for text are different from those of box of course, text expects text („text“, posX, posY);

  • Don't replace words with other words.

    Instead of calling one function, using the correct arguments:

    ...call a different function, using those correct arguments:

  • Answer ✓

    I improved task #3

    I am not sure if your teacher wanted you to do this in 3D or in 2D, but now we stick with 3D, shall we?

    Best, Chrisir ;-)

    import ddf.minim.*;
    Minim minim;
    AudioPlayer player;
    
    boolean ballIsThere=false;
    float ballX, ballY; 
    
    void setup() {
      size(500, 500, P3D);
      background(#F0AB16);
      smooth();
    
      minim=new Minim(this);
      player=minim.loadFile("music.mp3", 512);
      player.play();
    }
    
    void draw() {
      background(#F0AB16);
      lights();    // makes ball look nicer
    
      if (ballIsThere) {  // show the ball 
        pushMatrix();
        translate(ballX, ballY, -200); // position 
        noStroke(); 
        fill(#CE2A92);
        sphere(40); // size; the ball is a 3D sphere  
        popMatrix();
        ballY+=5;
        if (ballY > height+260) {
          ballIsThere=false;
        }
      }
    
      translate(width/2, height/2);
      rotateX(millis()/1000.0f);
      rotateY(millis()/1000.0f);
      fill(255.0*sin(millis()/650.0), 255.0*sin(millis()/800.0), 255.0*sin(millis()/1000.0));
      stroke(111); 
      box(250*abs(sin(millis()/1000.0)));
    }
    
    void mousePressed() { // init new ball 
      ballIsThere=true; 
      ballX=mouseX; 
      ballY=mouseY;
    }
    
  • edited February 2018 Answer ✓

    Here is an example for task #4

    The translate and rotation thing is a bit strange :

    • We move the matrix (coordinate system center to screen center first) with translate,

    • then we rotate.

    • Since all rotation is around the origin (0,0, the matrix center) we now (after the translation) rotate around the middle of the screen. See tutorials, especially https://www.processing.org/tutorials/transform2d/.

    Also note that text has a X-position of 99 which is then the radius of its circle.

    Play a little with the code, replace 99 with 0, or comment out the line with translate etc.

    Also look at textAlign(CENTER); and pushMatrix/ popMatrix in the reference : https://www.processing.org/reference/

    Code:

    void setup() {
      size(500, 500, P3D);
      background(#F0AB16);
      smooth();
    }
    
    void draw() {
      background(#F0AB16);
      lights(); 
    
      translate(width/2, height/2);
      rotateZ(millis()/1000.0f);
      fill(0);
      text("Here \nI am", 99, 0);
    }
    
Sign In or Register to comment.