Text covered by an image

Processing Coding Questions
1

Hi guys I have a problem, the letters hide or disappear when I load the image. Maybe can someone help? I am new here so I think it’s very easy! Thank you.

String[] headlines = {

  "3   3   3   3   3   3   3   3   3   3   3   3  ", 
  "",
  
};

PFont f; // Global font variable
float x; // Horizontal location
int index = 0;
PImage photo;
float x1,y;

void setup() {
  size(500, 500);
  f = createFont( "Arial", 46);
 photo=loadImage("1.jpg");
 x1=0.0;
 y=width/2.0;
  x = width;
}

void draw() {
  background(0);
  textFont(f, 56);
  textAlign (LEFT);
  
  translate(x1,y);
  imageMode(CENTER);
  photo.resize(80,80);
  image(photo, 0,0);

x1+= 3.0;
if (x1 > width+photo.width) {
x1 = -photo.width;

    index = (index + 1) % headlines.length;
   text(headlines[index], x, height-20); 
    x = x - 1;
 
  }
}
1 Like
3

Hey @fwtini. I’m moving your question it’s own topic because the guidelines topic is for discussing the site’s guidelines. In future please use the new topic button on the main page to ask questions.

It looks like you’re drawing things might be the problem. The best way I’ve heard the draw loop described is like instructions for a painter, except the painter is a computer. The way it works is the computer reads top to bottom unless instructed otherwise with an if statement. And it doesn’t care what came before so it will draw whatever on top of the last thing. Here’s a basic example to illustrate the idea:

// this is like what you have now
// the rectangle will be on top
void draw() {
  text("Some Text", width/2, height/2);
  rectangle(0, 0, width, height);
}

// this is I think what your looking for
void draw() {
  rectangle(0, 0, width, height);
  text("Some Text", width/2, height/2);
}
1 Like
4

Thank you but I want the image to follow the letters