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

**URL:** <https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134>\
**Category:** Coding Questions\
**Created:** [December 5, 2019, 1:23am UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134 "2019-12-05T01:23:11Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [December 5, 2019, 1:23am UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/1 "2019-12-05T01:23:11Z")

</div>

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.

```auto
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;
 

}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 5, 2019, 2:44am UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/2 "2019-12-05T02:44:58Z")

</div>

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

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [December 5, 2019, 3:13am UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/3 "2019-12-05T03:13:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [December 5, 2019, 7:48am UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/4 "2019-12-05T07:48:46Z")

</div>

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

```auto
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;
 
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 5, 2019, 9:03am UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/5 "2019-12-05T09:03:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 5, 2019, 11:07am UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/6 "2019-12-05T11:07:49Z")

</div>

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

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 5, 2019, 11:54am UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/7 "2019-12-05T11:54:23Z")

</div>

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? )

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 5, 2019, 11:59am UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/8 "2019-12-05T11:59:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [December 5, 2019, 2:59pm UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/9 "2019-12-05T14:59:00Z")

</div>

> [@Waboqueox](#):
>
> ```auto
> 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;
>  
> }
> 
> ```

Thanks, but I dont want to accelerate speed.

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [December 5, 2019, 3:02pm UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/10 "2019-12-05T15:02:13Z")

</div>

> [@noel](#):
>
> 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; }

Thanks, but I still see flickering.

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [December 5, 2019, 3:04pm UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/11 "2019-12-05T15:04:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 5, 2019, 3:10pm UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/12 "2019-12-05T15:10:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [December 5, 2019, 10:07pm UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/13 "2019-12-05T22:07:12Z")

</div>

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 ☹

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [December 5, 2019, 10:17pm UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/14 "2019-12-05T22:17:03Z")

</div>

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.

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 6, 2019, 10:07am UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/15 "2019-12-06T10:07:12Z")

</div>

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.

[![](https://img.youtube.com/vi/y8gDk_p7j7g/maxresdefault.jpg "Rings") ](https://www.youtube.com/watch?v=y8gDk_p7j7g)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 6, 2019, 10:37am UTC](https://discourse.processing.org/t/degradado-en-fondo-con-temblor-gradient-in-background-with-tremor/16134/16 "2019-12-06T10:37:27Z")

</div>

wait, did you say retina display?  
can there be a  
[https://processing.org/reference/displayDensity\_.html](https://processing.org/reference/displayDensity_.html)  
issue?