Text drawing seems to be happening out of order, compared to a filter(BLUR)

[interstar]

I’m trying to generate a static image with a blurred background and some unblurred text in front of it.

Here’s my code

  void drawIt() {
    background(0);
    strokeWeight(4);

    pushMatrix();
    for (int j=0; j<20; j++) { 
      for (int i=0; i<20; i++) {
        fill(150, random(200), 30);
        stroke(150, random(200), 30);
        line(random(width), random(height), random(width), random(height));
      }
      filter(BLUR);
      rotate(j*0.4);
    }
    popMatrix();
    fill(255,255,255,255);
    stroke(255,255,255,255);
    textSize(48);
    text(name, 40, 100);     
  }

It’s doing what I’d expect, EXCEPT that the text which I think I’m drawing at the end, is a) blurry, and b) seems to be BEHIND some of the lines I’m drawing.

I’m mystified by this. Never seen anything like it before.

This is all happening within a single frame and the image is saved directly afterwards

[mnse]

Hi,

Sorry! deleted my prior post as it seems not being correct …
I’ve tested your code and for me it is working as expected !?
Lines getting more and more blured and the text isn’t blured at all onto the top of the image.
Maybe the issue is in the code you’ve not provided here …

Cheers
— mnse

[interstar]

Yes. I just tested it and you are right.

That’s even weirder!!!

In a stand alone sketch, this code works exactly as expected.

But in the context of my sketch it doesn’t???

The main app is a musical one, dealing with MIDI and recording audio files, so it’s a bit complex to go into here. But I can’t see any reason why it should be different. The main draw() of the sketch is

void draw() {
  background(0); 
  stroke(255);
 
  // draw the audio waveforms
  for(int i = 0; i < in.bufferSize() - 1; i++) {
    line(i, 50 + in.left.get(i)*50, i+1, 50 + in.left.get(i+1)*50);
    line(i, 150 + in.right.get(i)*50, i+1, 150 + in.right.get(i+1)*50);
  }
   robbie.step();
}

And it’s in that robbie.step() call, that, when the sketch finally finishes the other stuff it’s doing, which is all audio, it calls this function :

  void drawIt() {
    background(0);
    strokeWeight(4);

    pushMatrix();
    for (int j=0; j<20; j++) { 
      for (int i=0; i<20; i++) {
        fill(150, random(200), 30);
        stroke(150, random(200), 30);
        line(random(width), random(height), random(width), random(height));
      }
      filter(BLUR);
      rotate(j*0.4);
    }
    popMatrix();
    fill(255,255,255,255);
    stroke(255,255,255,255);
    textSize(48);
    text(name, 40, 100);    
    saveFrame("background.png");
  }

Which is exactly the same except for two things :

• the text() call takes a variable rather than a literal
• I saveFrame() at the end of it.

Otherwise it’s identical to the one that runs correctly as a stand-alone.

And here’s its output …

What the … ???

[The_Traveler]

The main app is a musical one, dealing with MIDI and recording audio files,

With midi and recording your also dealing with more system interrupts than just a standalone dealing with drawing to a surface.

The traditional way of debugging it would be to comment out parts of your midi/recording code one part at a time until you isolate the offending code. Cheers.

[glv]

Hello,

The framerate drops significantly with filter(BLUR).

You are doing a rotation about the origin (0, 0) in the corner and won’t see all of the lines.

I was trying to improve performance:

• I removed the rotate() and used smaller loop iterations.
• You could extend the random limits beyond the sketch window for a similar effect.

Test code:

String name = "Hello";

void setup()
 {
 size(800, 800, P2D);
 textSize(48);
 }

void draw()
  {
  background(0);
  drawIt();
  println(frameRate);
  }

void drawIt() {
    background(0);
    strokeWeight(4);

    pushMatrix();
    for (int j=0; j<10; j++) 
      { 
      for (int i=0; i<10; i++) 
        {
        fill(150, random(200), 30);
        stroke(150, random(200), 30);
        line(random(width), random(height), random(width), random(height));
        }
      filter(BLUR);
      //rotate(j*0.4);
      }
    popMatrix();
    fill(255, 255, 255, 255);
    stroke(255, 255, 255, 255);
    //textSize(48);
    text(name, 40, 100);    
    //saveFrame("background.png");
  }

The loading of this loop and resulting slow frameRate should be considered.

Try it commenting the filter(BLUR) and see what happens.

I don’t think this is related but sharing nonetheless:

Blurry Text Solution

I was using different text sizes in a recent project and was getting blurry fonts. I solve this issue by setting the largest text size in setup() and problem solved! Here is the code I used to test this: /* Project: Blurry Text Author: GLV Date: 2019-05-15 Version: 01 */ void settings() { size(1024, 768, P3D); } void setup() { textSize(128); // Set to largest text size used to prevent blurring of text } void draw() { background(0); text24(); t…

:)

[mnse]

Hi,

would you please try to put the saveFrame out of your function and put it at the end of draw after robbie.step, put a noLoop after it and look for the result if it is still such messed up.
Afterwards remove the noLoop but instead call the saveFrame by adding some hashes ie. “background-#####.png”, run it for some seconds and look if the generated pictures are ok or still messed up.

Cheers
— mnse

[glv]

Hello @interstar,

Another tip for saving frames…

See comments here:

:)

[interstar]

OK.

I’ve just discovered that one of the other issues is that I was using P3D as the renderer in my sketch.

If I take this option out, the problem seems to disappear. But I have also changed the architecture so that instead of doing it in a single frame I now draw it over multiple frames with the blur happening once per frame.

What’s definitely true though, is that it was the P3D which seemed to be putting the text BEHIND some of the lines.

Thank you everyone for your ideas. They were all very useful helping me to think about this.

[interstar]

In fact here’s a complete sketch without any frames at all where P3D still seems to have this effect

String name = "Hello World";
size(812, 375, P3D);


background(0);
strokeWeight(4);

pushMatrix();
for (int j=0; j<20; j++) { 
  for (int i=0; i<20; i++) {
    fill(150, random(200), 30);
    stroke(150, random(200), 30);
    line(random(width), random(height), random(width), random(height));
  }
  filter(BLUR);
  rotate(j*0.4);
}
popMatrix();
fill(255, 255, 255, 255);
stroke(255, 255, 255, 255);
textSize(48);
text(name, 40, 100);

[glv]

Hello,

See this in code:

// Either one of these work:
//hint(DISABLE_DEPTH_TEST);
translate(0, 0, 1)

Give this a try:

String name = "Hello World";
size(812, 375, P3D);

background(0);
strokeWeight(4);

pushMatrix();
for (int j=0; j<20; j++) { 
  for (int i=0; i<20; i++) {
    //fill(150, random(200), 30);
    stroke(150, random(200), 30);
    line(random(width), random(height), random(width), random(height));
  }
  filter(BLUR);
  rotate(j*0.4);
}
popMatrix();

// Either one of these work:
//hint(DISABLE_DEPTH_TEST);
translate(0, 0, 1);

fill(255, 255, 255, 255);
//stroke(255, 255, 255, 255);
textSize(48);
text(name, 40, 100);

I commented out some of the unnecessary color settings.

Reference:
https://processing.org/reference/hint_.html

:)