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

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

please post your code into the
</> 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

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.


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[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);
   }
}
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 :sweat_smile:

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
         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);
   }
}
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 :sweat_smile:

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

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

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.

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