How to put text string over the animation

doraby

Could anybody explain how to put the text string with autoclear over the animation another object without autoclear at the same time? Is this possible? I have added string, but it has been overlapped by animation. If I put it into void draw() section it spoils without auto clear.

Chrisir

I am not sure I understand.

can you show your code please?

you wrote:

how to put the text string with autoclear over the animation (AND) another object without autoclear at the same time?

is there an AND missing?

Rule

When you are working in 2D and not in 3D the last thing drawn on the canvas is on top.

So you want to draw your text at the end of draw() after you have drawn the animation.

Question

With autoclear you mean background(0); at the start of the function draw()?

Idea

When you don't use background(0); you could draw a rect behind the text to make the text clear

int[] xPos = {95, 70, 95, 60};
int[] yPos = {150, 230, 310, 390};
String[] value ={"3", "322", "0", "9" }; 

int lineNumberToDisplayText=3; 

// ----------------------------------------------------

size(500, 600);

fill(255, 245, 12);
rect(xPos[lineNumberToDisplayText ]+12, yPos[lineNumberToDisplayText ] +10, 
  88, 33); 
fill(0); 
text("Test \n" 
  + value[lineNumberToDisplayText ], 
  xPos[lineNumberToDisplayText ]+19, yPos[lineNumberToDisplayText ] +22 );

doraby

Thanks for the answer, Chrisir.

is there an AND missing?

Sorry, I have missed OF

With autoclear you mean background(0); at the start of the function draw()?

Yes, I mean all objects are redrawn. I have the animation of the rectangle and the text "Hello Strings!". I want to put the text over the rectangle animation without text redrawn. Now the text is constantly redrawn and has a spoiled edge.

But if I put it into setup, it is overlapped by rectangle.

PFont f;  
float angle = 0.0;

void setup() {
      size(400, 400);
      background(255, 204, 0);
      smooth();
      f = createFont("Arial",30,true);

 }
 void draw() {
      textFont(f,30);                 
      fill(255);                    
      text("Hello Strings!",10,100);

      translate(mouseX, mouseY);
      rotate(angle);
      fill(204, 102, 0);
      rect(-15, -15, 30, 30);
      angle += 0.1;
 }

Chrisir

PFont f;  
float angle = 0.0;

void setup() {
  size(400, 400);
  background(255, 204, 0);
  smooth();
  f = createFont("Arial", 30, true);
}
void draw() {
  background(255, 204, 0);

  pushMatrix(); 
  translate(mouseX, mouseY);
  rotate(angle);
  fill(204, 102, 0);
  rect(-15, -15, 30, 30);
  angle += 0.1;
  popMatrix(); 

  textFont(f, 30);                 
  fill(255);                    
  text("Hello Strings!", 10, 100);
}

doraby

Hooray, it is working! Thank you!

Chrisir

As said, your text is on top when you use the text() at the end of draw().

To isolate the rotation of the rectangle from the rest, I used pushMatrix and popMatrix - see reference https://www.processing.org/reference/

I use background(255, 204, 0); at start of draw() as it is with most animations in processing.

doraby

Oh, I hurried. it's not really what I wanted. Animation of rectangle should have been remain, without background redraw. I mean this picture https://www.dropbox.com/s/fmlggvqagatba85/Screen Shot 2017-10-29 at 9.38.47 PM.png?dl=0

doraby

Maybe It would be better to use image of text and mask in this case? https://processing.org/examples/alphamask.html

Chrisir

you can also use PGraphics pg, draw rects into that

display pg with image() and draw text over it

doraby

Thanks, I'll try it

Chrisir

Did you try this:

PFont f;  
float angle = 0.0;

void setup() {
  size(400, 400);
  background(255, 204, 0);
  smooth();
  f = createFont("Arial", 30, true);
}
void draw() {
  // background(255, 204, 0);

  pushMatrix(); 
  translate(mouseX, mouseY);
  rotate(angle);
  fill(204, 102, 0);
  rect(-15, -15, 30, 30);
  angle += 0.1;
  popMatrix(); 

  textFont(f, 30);                 
  fill(255);                    
  text("Hello Strings!", 10, 100);
}

doraby

Yeah, https://www.dropbox.com/s/otfdlvx7zji1od7/Screen Shot 2017-10-30 at 7.30.05 AM.png?dl=0, the text has spoiled ragged edges because of repeating, it doesn't suit.

Chrisir

I see