# Ondas Esféricas que se desvanecen en Loop

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: ``````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!

1 Like

`</> code button from editor menu `

( repair above post )

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

ok, why not repaired the first post?

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

``````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.
1 Like

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.

1 Like

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

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

}
``````

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

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

``````

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.

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

}
``````
``````type or paste code here
``````

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 )

``````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.

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

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.

``````Circle[] circles;

void setup() {
size(screen.width, screen.height);

circles = new Circle;

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
}
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) {
}

void scale(float s_) {
s += s_;
}

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);
}
}
``````
1 Like

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

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!

``````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);
}
``````
1 Like

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
``````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
}
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) {
}

void scale(float s_) {
s += s_;
}

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);
}
}
``````
2 Likes

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

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

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.

1 Like

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í:

``````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 (`%`).