# Ondas Esféricas que se desvanecen en Loop

**URL:** <https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852>\
**Category:** Español\
**Created:** [November 27, 2019, 12:14am UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852 "2019-11-27T00:14:53Z")\
**Posts on this page:** 18\
**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:** [November 27, 2019, 12:14am UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/1 "2019-11-27T00:14:53Z")

</div>

![11_Radiating](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4da2d4f767f71b90777a06676eea7e414e929271.gif)

Hola,  
Estoy intentando crear una animación similar a la adjuntada, pero con circunferencias.  
La idea es que haya:

1. circunferencias que crecen y se van desvaneciendo.
2. que cada segundo, o segundo y medio, surja una circunferencia nueva, en loop infinito.

Lo máximo a lo que he llegado consultando tutoriales es a esto: 💔

```auto
void setup(){
  
  size(270,540);
  background(0,0,0);
  noStroke();
} 

int x=0;

void draw (){
  stroke(255,255,255);
  noFill();
  circle(width/2, height/2, 30);
  circle(width/2, height/2, 30+x);
  x=x+1; 
}

```

¿Alguien puede echarme una mano en cuanto a 1 o 2? ¡Gracias!

---

<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:** [November 27, 2019, 6:27am UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/2 "2019-11-27T06:27:56Z")

</div>

> [@Duración de un elemento y secuencia](https://discourse.processing.org/t/duracion-de-un-elemento-y-secuencia/15646/10):
>
> Gracias, usando background() al principio de draw() lo consigo.

* * *

please post your code into the  
`</> code button from editor menu `

( repair above post )

---

<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:** [November 27, 2019, 12:39pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/3 "2019-11-27T12:39:01Z")

</div>

```auto
void setup(){
  
  size(270,540);
  background(0,0,0);
  noStroke();
} 

int x=0;

void draw (){
background(0,0,0);
  stroke(255,255,255);
  noFill();
  circle(width/2, height/2, 30);
  circle(width/2, height/2, 30+x);
  x=x+1; 
}

```

---

<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:** [November 27, 2019, 12:41pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/4 "2019-11-27T12:41:43Z")

</div>

ok, why not repaired the first post?

so please try a version where you move the line  
`background();`  
from setup() to draw();

---

<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:** [November 27, 2019, 12:51pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/5 "2019-11-27T12:51:38Z")

</div>

```auto
void setup(){
  
  size(270,540);
  background(0,0,0);
  noStroke();
} 

int x=0;

void draw (){
  background(0,0,0);
  strokeWeight(3);
  stroke(255,255,255);
  noFill();
  circle(width/2, height/2, 30);
  circle(width/2, height/2, 30+x);
  x=x+1; 
}

```

Gracias, también necesito:

1. Que las circunferencias se vayan desvaneciendo.
2. Que cada segundo, o segundo y medio, surja una circunferencia nueva, en loop infinito.

---

<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:** [November 27, 2019, 2:52pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/6 "2019-11-27T14:52:20Z")

</div>

Me contesto yo mismo. Que las ondas se desvanezcan lo consigo creando una variable “y” que utilizo para la transparencia del color. Sólo me falta la animación con loop, que preguntare en una nueva consulta.

---

<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:** [November 27, 2019, 9:56pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/7 "2019-11-27T21:56:55Z")

</div>

I really apreciate last answers.

Now I need to repeat indefinitely the second circle of my code, the one that is moving, once every second. Thank you so much.

```auto

float x=0;
float y=255;

void setup(){
  
  size(270,540);
  background(0,0,0);
  noStroke();
} 

void draw (){
  background(0,0,0);
  strokeWeight(3);
  stroke(255,255,255);
  noFill();
  circle(width/2, height/2, height/10);
  
  stroke(255,255,255,y);
  circle(width/2, height/2, height/10+x);
  x=x+1; 
  y=y-1;

}

```

---

<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:** [November 27, 2019, 10:19pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/8 "2019-11-27T22:19:28Z")

</div>

you explicitly say “repeat circle 2”, not a circle 3++!

```auto
float x=0,alpha=255;

void setup() {
  size(270, 540);
} 

void draw () {
  background(0, 0, 0);
  strokeWeight(3);
  stroke(255, 255, 255);
  noFill();
  circle(width/2, height/2, height/10);
  stroke(255, 255, 255, alpha);
  circle(width/2, height/2, height/10+x);
  x++; 
  alpha-=3;
  if ( frameCount%60 == 0 ) { //__ about 1 second or use millis timer
    alpha = 255;
    x=0;
  }
}

```

---

<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:** [November 27, 2019, 11:24pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/9 "2019-11-27T23:24:44Z")

</div>

thanks, but it is not exactly what I need.

I need my first motionless ellipse and second ellipse repeating indefenitely. But that second ellipse takes about 3 seconds to disappear and for those 3 seconds, new ellipses had to appear while second ellipse is expanding itself, and this way successively. I mean, they are like waves in water.

```auto
  size(270,540);
  background(0,0,0);
  noStroke();
} 

void draw (){
  background(0,0,0);
  strokeWeight(3);
  stroke(255,255,255);
  noFill();
  ellipse(width/2, height/2, 50, 50);
  
  stroke(255,255,255,y);
  ellipse(width/2, height/2, 50+x, 50+x);
  x=x+1; 
  y=y-1;

}

```

```auto
type or paste code here

```

---

<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:** [November 28, 2019, 5:19am UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/10 "2019-11-28T05:19:22Z")

</div>

it is a longer way…  
as a second step something with still only one expanding circle,  
but much closer to the posted picture…  
and also with the inner circle ( static )

```auto
float d1 = 60,x1 = 0,d0 = 300, alpha = 255;

void setup() {
  size(400,400);
  noStroke();
} 

void draw () {
  background(0, 0, 0);
  translate(width/2,height/2);
  fill(255, 219, 77);
  circle(0,0,d0); // biggest circle first
  // growing circle
  fill(255, 235, 153,alpha);
  circle(0,0,d1+x1);
  x1++;
  alpha--;
  if ( d1 + x1 > d0 ) {
    x1=0;
    alpha = 255;
  }
  // small center circle
  fill(255, 235, 153);
  circle(0,0,d1);
}

```

the colors not match.

 ![growing_circle](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a371edad1358ae52025ced2a1bcd75e81955169a.png)

* * *

can you try the next step with one more expanding circle?

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 28, 2019, 12:14pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/11 "2019-11-28T12:14:10Z")

</div>

So this does exactly what you see in the gif… i‘m not quite sure what you are looking for if that‘s not it… obviously you‘ll have to change the color to the ones you‘re looking for. You can also change the frequency, size, position, expansion rate. Please tell me where the difference lies.

```auto
Circle[] circles;

void setup() {
   size(screen.width, screen.height);
   
   circles = new Circle[5];
   
   for (int i = 0; i < circles.length; i++) {
      circles[i] = new Circle(screen.width/2,screen.height/2,20, color(255, 0, 0));
   }
}

void draw() {
   background(255);
   stroke(255,255,0,100);
   fill(255,255,0,100);
   ellipse(screen.width/2, screen.height/2, 100, 100);
   for (int i = 0; i < circles.length; i++) {
      circles[i].display();
      //circles[i].move(0, -1);
      circles[i].scale(1); //speed of expansion
      circles[i].fade(3); // speed of diffusion
   }
  fill(255,0,0,255);
   stroke(255,0,0,255);
   ellipse(screen.width/2, screen.height/2, 20, 20);
   
   if (frameCount%40 == 0) { //frequency of new circles
      pushCircles();
   }
   
}

void pushCircles () {
   for (int i = 0; i < circles.length-1; i++) {
      circles[i] = circles[i+1];
   }
   circles[circles.length-1] = new Circle(screen.width/2,screen.height/2,20,color(255,0,0));
}

class Circle {
   PVector pos;
   float s;
   color cFill;
   
   Circle (float x, float y, float s_, color f) {
      pos = new PVector(x, y);
      s = s_;
      cFill = f;
   }
   
   void move(float x, float y) {
      pos.add(new PVector(x, y));
   }
   
   void scale(float s_) {
      s += s_;
   }
   
   void fade(float a) {
      cFill = color(red(cFill), green(cFill) + a <= 255 ? green(cFill) + a : 255, blue(cFill), alpha(cFill) - a >= 0 ? alpha(cFill) - a : 0);
   }
   
   void display() {
      stroke(cFill);
      fill(cFill);
      ellipse(pos.x, pos.y, s, s);
   }
}

```

---

<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:** [November 28, 2019, 9:34pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/12 "2019-11-28T21:34:44Z")

</div>

thank you so much, Lexyth, but my brain is exploding with your code, I just have no knowledges to undestand it.

---

<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:** [November 28, 2019, 9:41pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/13 "2019-11-28T21:41:10Z")

</div>

thank you so much, kll.

I used your code because it solves loop matter. I have tried to repeat waves every second with using for(), but I don’t get it. Is there an easy way to make it with any reference?

Thanks!

```auto
float d1 = 60,x1 = 0,d0 = 300, alpha = 255;

void setup() {
  size(270,540);
  background(0,0,0);
  noStroke();
} 

void draw () {
  background(0, 0, 0);
  translate(width/2,height/2);
  // growing circle
  strokeWeight(3);
  stroke(255,255,255,alpha);
  noFill();
  circle(0,0,d1+x1);
  x1++;
  alpha--;
  if ( d1 + x1 > d0 ) {
    x1=0;
    alpha = 255;
  }
 
  
  // small center circle
  strokeWeight(3);
  stroke(255,255,255);
  noFill();
  circle(0,0,d1);
  }

```

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 28, 2019, 10:46pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/14 "2019-11-28T22:46:38Z")

</div>

Kll and I basically use the same way, just that i packed it in a class (and now even in a Manager cause it makes it simpler and i needed some practice with managers Anyway).

Easier than kll‘s method probably doesn’t exist. It‘s just drawing, setting 2 variables and an if statement that resets it all.

@kll To be honest, i can‘t get my Head around how to do this either, without using a Class or separate variables for each circle and then resetting them with intervals (like reset Circle 1 at 0, c2 at 60 frameCount, c3 at 120 and then c1 again, or something like that…), which just seems way too inefficient compared to using classes…

Anyway, i added a CircleManager class, just for fun and thought i‘d post it too, just in case someone‘s interested.

Note, i‘ll put it in a Spoiler, since we‘re still here to help you learn how to Code, not to do everything… but i really wanna share it, now that i made it 😅

> **CircleManager**
>
> ```auto
> CircleManager cM;
> 
> void setup() {
> size(800, 600);
>    
> cM = new CircleManager(5, 40, 1, 3, 200, 300, 20, color(255, 0, 0));
> // the parameters are :
> // 5 = circleArrayLength (doubt you need more than 5)
> // 40 = frequency
> // 1 = growth
> // 3 = diffusion (color fading)
> // 200, 300 position x, y
> // 20 = initial size
> // color is obvious
>    
> }
> 
> void draw() {
> background(255);
> cM.update();
>    
> }
> 
> class CircleManager {
> Circle circles;
> PVector pos;
> float cSize;
> color cFill;
>    
> int frequency;
> float growth;
> float diffusion;
>    
> CircleManager (int circleLength, int f, float g, float d, float x, float y, float s, color cF) {
> circles = new Circle[circleLength];
> frequency = f;
> growth = g;
> diffusion = d;
> pos = new PVector(x, y);
> cFill = cF;
> cSize = s;
> createCircles();
> }
>    
> void createCircles() {
> for (int i = 0; i < circles.length; i++) {
> circles[i] = new Circle(pos.x,pos.y,cSize, cFill);
> }
> }
>    
> void update() {
> stroke(255,255,0,100);
> fill(255,255,0,100);
> ellipse(pos.x, pos.y, 100, 100);
> for (int i = 0; i < circles.length; i++) {
> circles[i].display();
> //circles[i].move(0, -1);
> circles[i].scale(growth); //speed of expansion
> circles[i].fade(diffusion); // speed of diffusion
> }
> fill(255,0,0,255);
> stroke(255,0,0,255);
> ellipse(pos.x, pos.y, 20, 20);
>       
> if (frameCount%frequency == 0) {
> //frequency of new circles
> pushCircles();
> }
> }
>    
> void pushCircles () {
> for (int i = 0; i < circles.length-1; i++) {
> circles[i] = circles[i+1];
> }
> circles[circles.length-1] = new Circle(pos.x,pos.y,cSize,cFill);
> }
> }
> 
> class Circle {
> PVector pos;
> float s;
> color cFill;
>    
> Circle (float x, float y, float s_, color f) {
> pos = new PVector(x, y);
> s = s_;
> cFill = f;
> }
>    
> void move(float x, float y) {
> pos.add(new PVector(x, y));
> }
>    
> void scale(float s_) {
> s += s_;
> }
>    
> void fade(float a) {
> cFill = color(red(cFill), green(cFill) + a <= 255 ? green(cFill) + a : 255, blue(cFill), alpha(cFill) - a >= 0 ? alpha(cFill) - a : 0);
> }
>    
> void display() {
> stroke(cFill);
> fill(cFill);
> ellipse(pos.x, pos.y, s, s);
> }
> }
> 
> ```

---

<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:** [November 28, 2019, 10:57pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/15 "2019-11-28T22:57:56Z")

</div>

Im really sorry, I didn’t want you to do my work, if you know a good tutorial that I can check or something like that, maybe It will be less abusive. Im really embarrassed, sorry again, and thank you so mucho for your help

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 28, 2019, 11:38pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/16 "2019-11-28T23:38:01Z")

</div>

That was actually a criticism towards myself cause we‘re supposed to lead you towards the right answer/provide you with resources to achieve what you want and not just post some code with little to no explanations 😅

It‘s just pretty hard not to just give out the Code and be done 😅 but that’s just humano nature (couldn‘t resist) 😉

Also, there‘s no need to apologise for asking questions. Everyone needs help and we‘re here just for that 😅

---

<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:** [November 29, 2019, 1:43am UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/17 "2019-11-29T01:43:50Z")

</div>

Thanks, often we run into conflicts,  
and together we must decide what is HELP.

now if i could make a hardcoded third circle  
and it would look like in the picture  
the question might be solved.

or it could only be solved by a arrayList of class circles  
( what die after reaching a certain radius, and auto create a new one )

but again the question is actually not how to solve it,  
it is how to teach  
but that also requires a willing student…

so @humano what you want  
if something can’t be done a easy way you go the hard way,  
and learn the next step.

but @Lexyth the next step learning coding  
would not be CLASS

> must start with variables and functions and arrays  
> find a reason why that is insufficient and take a step back and start fresh  
> learn class  
> and make a array of class.

OR

> someone show me a way to teach class without the prior coding basics steps.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 6, 2019, 6:39pm UTC](https://discourse.processing.org/t/ondas-esfericas-que-se-desvanecen-en-loop/15852/18 "2019-12-06T18:39:58Z")

</div>

> [@humano](#):
>
> this way successively. I mean, they are like waves in water.

Aquí hay un enfoque sin usar clases.

Primero, dibuja tus círculos. Más tarde, cambiará su código para animarlos. En su ejemplo, el espacio entre los círculos permanece igual, pero cada círculo tiene un diámetro que cambia. Describamos estas relaciones en código simple, por ejemplo, así:

```auto
int steps = 3;
float gap;

void setup() {
  size(200, 200);
  noStroke();
  gap = width/steps;
}

void draw() {
  background(0);
  for (int i=steps; i>0; i--) {
    float diam = gap * i; // <-- cambia aqui
    fill(255, 64); // transparent, otherwise large may cover small
    ellipse(width/2, height/2, diam, diam);
  }
}

```

Ahora, podemos animar estos círculos cambiando **solo** la definición de `diam`, solo esa línea. Podríamos agregar un número cada vez más grande, como `frameCount`… pero luego los círculos crecerán fuera de la pantalla y nunca los volveremos a ver.

Una forma es “envolver” cualquier círculo que sea demasiado grande, volviéndolo pequeño. Intente averiguar cómo mirando la referencia del módulo (`%`).

> **[% (modulo) / Reference](https://processing.org/reference/modulo.html)**
>
> Calculates the remainder when one number is divided by another. For example, when 52.1 is divided by 10, the divisor (10) goes into the dividend (52.1) five times (5 \* 10 == 50), and there is a remain…