Degradado en fondo con temblor (Gradient in background with tremor)

Processing Coding Questions
1

Hi guys,

I have a problem with the background of my program. If it is a solid color, everything works, buti if I draw a gradient, animation trembles. Can you recomend me any solution? Thank you very much.

int x;
int sentido;


void setup(){
  size(360,720);
  x=80;
  sentido=1;
  frameRate(10);
  smooth();
  ellipseMode(RADIUS); 
  background(255,78,78);
  float l = width/255;
  for(int i = 0; i<width; i++) {
  stroke(253,176,71,255-i/(l));
  line(i,0,i, height);
}
 
}

void draw(){
   background(255,78,78);
  float l = width/255;
  for(int i = 0; i<width; i++) {
  stroke(253,176,71,255-i/(l));
  line(i,0,i, height);
}
  noFill();
  strokeWeight(2);
  stroke(255);
  ellipse(180, 420, x, x);
  ellipse(180, 420, x, x);
  ellipse(180, 300, x, x);
  ellipse(232, 390, x, x);
  ellipse(232, 330, x, x);
  ellipse(128, 390, x, x);
  ellipse(128, 330, x, x);
  
  if ((x>width-270) || (x<80)){
    
    sentido=-sentido;
    
  }
  
  x += 1 * sentido;
 

}
1 Like
2

sorry, i have a other way, but can not say that it is better
as i not see much difference, so please check.

int x;
int sentido;

PGraphics bg;

void make_bg() {
  bg = createGraphics(width, height);
  bg.beginDraw();
  bg.background(255,78,78);
  float l = width/255;
  for (int i = 0; i < width; i++) {
    bg.stroke(253, 176, 71, 255 - i/l);
    bg.line(i, 0, i, height);
  }
  bg.endDraw();
}

void setup() {
  size(360, 720);
  x=80;
  sentido=1;
  frameRate(10);
  ellipseMode(RADIUS); 
  make_bg();
}

void draw() {
  image(bg,0,0);
  noFill();
  strokeWeight(2);
  stroke(255);
  ellipse(180, 420, x, x);
  ellipse(180, 420, x, x);
  ellipse(180, 300, x, x);
  ellipse(232, 390, x, x);
  ellipse(232, 330, x, x);
  ellipse(128, 390, x, x);
  ellipse(128, 330, x, x);

  if ((x>width-270) || (x<80)) sentido=-sentido;
  x += 1 * sentido;
}
3

Thank you kll, I see the same vibration that I didnt see when the background was a solid color, its like you are watching the animation loading again and again, or maybe I have a so fast retina.

1 Like
4

Is this what you want? :sweat_smile: :sweat_smile: I’m not sure about what you want

int x;
int sentido;


void setup(){
  size(360,720);
  x=80;
  sentido=1;
  smooth();
  ellipseMode(RADIUS); 
  background(255,78,78);
  float l = width/255;
  for(int i = 0; i<width; i++) {
  stroke(253,176,71,255-i/(l));
  line(i,0,i, height);
}
 
}

void draw(){
   background(255,78,78);
  float l = width/255;
  for(int i = 0; i<width; i++) {
  stroke(253,176,71,255-i/(l));
  line(i,0,i, height);
}
  noFill();
  strokeWeight(2);
  stroke(255);
  ellipse(180, 420, x, x);
  ellipse(180, 420, x, x);
  ellipse(180, 300, x, x);
  ellipse(232, 390, x, x);
  ellipse(232, 330, x, x);
  ellipse(128, 390, x, x);
  ellipse(128, 330, x, x);
  
  if ((x>width-270) || (x<80)){
    
    sentido=-sentido;
    
  }
  
  x += 1 * sentido;
 
}
5

You took out the low frame rate, where lies the whole flickering problem.
My solution is to slow down the sketch with small intervals between ellipse drawing.
Edit Code deleted. Not a valid solution.

6

Sometimes you just don’t see how simple it is.

float x, sentido;
PImage pi; 

void setup() { 
  size(360, 720); 
  x = 80; 
  sentido = 1; 
  smooth(); 
  ellipseMode(RADIUS); 
  background(255, 78, 78); 
  float l = width/255; 
  for (int i = 0; i<width; i++) { 
    stroke(253, 176, 71, 255-i/(l)); 
    line(i, 0, i, height);
  } 
  pi = get(0, 0, width, height); 
  noFill(); 
  strokeWeight(2); 
  stroke(255);
}

void draw() {
  set(0, 0, pi);
  ellipse(180, 420, x, x);
  ellipse(180, 420, x, x);
  ellipse(180, 300, x, x);
  ellipse(232, 390, x, x);
  ellipse(232, 330, x, x);
  ellipse(128, 390, x, x);
  ellipse(128, 330, x, x);
  if ((x>width-270) || (x<80)) {
  sentido =- sentido;
  }
  x += 0.2 * sentido;
}
2 Likes
7

yes , the PImage img = get(x,y,w,h); and set(x,y,img); is fantastic
much more easy as my PGraphics example. ( but should look same? )

8

No, that wasn’t the problem. I just don’t like to draw a bunch of lines over and over.
The solution however is to take smaller steps with x increments. A frame rate of 10 is like seeing an old super 8 movie.

9

Thanks, but I dont want to accelerate speed.

10

Thanks, but I still see flickering.

11

I Know, but, how can I keep the same slow motion using a higher frame rate?

12

In my code I have no frameRate reduction, and you can even slow down more by setting for instance
x += 0.02 * sentido;.
I saw your first code flickering on my tablet, but with my code absolutely not.

13

I have tried this code in mi pc, but flickering remains. Firstly I drawed a black background and everything was ok, but with another solid color or gradient I see flickering :frowning:

14

I have used your code, deleting gradient, in order to make it simpler, but the flickering remains. If you use a black background, you’ll see a clear animation, but it doesn’t work with another color.

float x, sentido;

void setup() { 
  size(360, 720); 
  x = 80; 
  sentido = 1; 
  smooth(); 
  ellipseMode(RADIUS); 
  background(255, 95, 95); 
  noFill(); 
  strokeWeight(2); 
  stroke(255);
}

void draw() {
  background(255,95,95);
  ellipse(180, 420, x, x);
  ellipse(180, 420, x, x);
  ellipse(180, 300, x, x);
  ellipse(232, 390, x, x);
  ellipse(232, 330, x, x);
  ellipse(128, 390, x, x);
  ellipse(128, 330, x, x);
  if ((x>width-270) || (x<80)) {
  sentido =- sentido;
  }
  x += 0.2 * sentido;
}
15

Sorry, can’t help further. Maybe it’s device dependent. Recorded video below is worse than playing sketch on tablet, but this what I get.

16

wait, did you say retina display?
can there be a
https://processing.org/reference/displayDensity_.html
issue?