Image() flickers when changing sketch size with windowResize()

Processing Coding Questions
1

Context: I’m trying to make a demo sketch for the new window methods in Processing 4.0 (which replace the old surface methods).

I’m running in an issue where the image flickers at larger sizes.This happens even if I artificially reduce the frameRate, which makes me think that the resizing of the window might be at fault.

Any idea why that happens?

elephAnt_optimized

1 Like
2

This is what my code looks like:

String elephantEmoji = "🐘";
String antEmoji = "🐜";

PImage elephantImg;
PImage antImg;

int margin = 50; // margin

void setup(){
  windowResizable(true);
  windowRatio(1000,1000);
  elephantImg = loadImage("assets/elephant.png");
  antImg = loadImage("assets/ant.png");
  pixelDensity(1);
}

void draw(){
  float t = millis() * 0.001;

  int wHeight = 130+(int)(nSin(t)*600);
  int wWidth = wHeight;

  int wPosX = 200 + (int)(displayWidth/2-wWidth/2);
  int wPosY = (int)(displayHeight/2-wHeight/2);
  
  boolean isLarge = wHeight > 250;
  PImage bgImg = isLarge ? elephantImg : antImg;
  String wTitle = isLarge ? elephantEmoji : antEmoji;
  
  windowTitle(wTitle);
  windowResize(wWidth,wHeight);
  windowMove(wPosX,wPosY);

  background(255);

  image(bgImg,margin,margin,rwidth-margin*2,rheight-margin*2);
  
}

// Get a value that oscillates between 0.0 and 1.0
float nSin(float theta){
  return (sin(theta)+1.0)/2.0;
}
2 Likes
3

Hello @sableRaph,

My exploration of this:

// windowResize Flicker
// v1.0.0
// GLV 2022-09-23

//References:
// https://forum.processing.org/one/topic/flickering-when-using-the-java-frame-resize-method#25080000001705051.html
// https://github.com/processing/processing4/blob/main/build/shared/revisions.md

PImage img1;
int sz;

void setup()
  {
  windowResizable(true);
  img1 = loadImage("frog.png");
  sz = 200;
  windowResize(sz, sz);
  delay(12);
  frameRate(60);
  }
  
void draw()
  {
  println(sz, width);
  image(img1, 20, 20, sz-2*20, sz-2*20);
  sz = 200 + frameCount%200;
  windowResize(sz, sz);
  delay(12);
  }

I gleaned some insight from here:

https://forum.processing.org/one/topic/flickering-when-using-the-java-frame-resize-method#25080000001705051.html

The delay got rid of the flicker.

:)

1 Like
4

This works perfectly on my end too (macOS Monterey) :+1: Thanks for your help glv!

Note: the order of operations seems to matter:

  1. Draw the image
  2. Resize the window
  3. Set the delay

220924_elephAnt_noFlicker

4 Likes
5

Absolutely!

I remember working through this and was preparing notes to add later about this.

I appreciated you adding these additional and necessary notes.

Working through a similar issue at the moment and remembered this challenge.

:)

1 Like