Hi guys,

I’m trying to code this radio waves animation. I want each circle to fade off towards the end of its cycle so that the opacity change is staggered. Right now, all the circles fade off together which is not the intended effect. What am I doing wrong?

Here’s my code. Any help would be great. Not looking for the solution at the moment but a helpful hint/clue might help me understand how to solve it. Thanks!

``````float circleSize = 0; // starting at size = 0 for the circle
float alphaLevel = 255; //initial alpha or opacity value is maximum

void setup() {
size(800, 800);
background(0);
smooth();
noFill();
}

void draw() {
background(0);
stroke(255, alphaLevel);
strokeWeight(5);
ellipseMode(CENTER);

for (int i = 0; i < circleSize; i = i + 50) {
ellipse(width/2, height/2, circleSize - i, circleSize - i);
}

circleSize = circleSize + 1;

//resetting to size = 0 if circle goes beyond max size = 400
if (circleSize == 400) {
circleSize = 0;
}

//fade out on circle as it goes from size 300 to 400
if (circleSize>300 && circleSize<400) {
alphaLevel = map(circleSize, 300, 400, 255, 0);
} else {
alphaLevel = 255;
}
}
``````
1 Like

Hey,

Not exactly the solution you’re looking for as the circles continuously fade away (not as of 300 pixels), but maybe the code below could be helpful.
As you can see, the alphaLevel simply depends on the distance between the center of the circles and their radius.
In your code this alphaLevel is out of the for loop, so it’s value is the same for all the circles.

``````float circleSize = 0; // starting at size = 0 for the circle
float alphaLevel = 255; //initial alpha or opacity value is maximum

void setup() {
size(800, 800);
background(0);
smooth();
noFill();
}

void draw() {
background(0);
//stroke(255, alphaLevel);
strokeWeight(5);
ellipseMode(CENTER);

for (int i = 0; i < circleSize; i = i + 50) {
float d = dist(width/2, height/2, circleSize - i, circleSize - i);
alphaLevel = map(d,0, 500, 0, 255);
stroke(255, alphaLevel);
ellipse(width/2, height/2, circleSize - i, circleSize - i);
}
circleSize = circleSize + 1;

//resetting to size = 0 if circle goes beyond max size = 400
if (circleSize == 400) {
circleSize = 0;
}
}
``````
``````for (int i = 0; i < circleSize; i = i + 50) {
ellipse(width/2, height/2, circleSize - i, circleSize - i);
}
``````

Compare the above and below code:

`````` //Final fields can be placed in the global scope
final int MAX_ALPHA=255;

for (int i = 0; i < circleSize; i = i + STEP_RADIUS) {
stroke(255, alphaLevel);
ellipse(width/2, height/2, i,i);  //Consider changing the name of i to "rad" for radius
}
``````

Kf

@Zappy Thank you Yes i understand the dist() function so that’s a cool way of doing it. Except that if I wanted a continuous stream and remove

``````  if (circleSize == 400) {
circleSize = 0;
}
``````

then the circles re-appear after some time. Meaning there seems to be a thick black ring around it and it continues.

@kfrajer This is interesting and I hope I was able to push your code through. I’m guessing for circleSize you would want to start from the max intended i.e. 400 and not 0 as in my original example.
I do get the desired result but nothing is animated for some reason. Here is the code implementing what you have suggested. I do hope I got it right though.

``````int circleSize = 400;
float alphaLevel = 255;

final int MAX_ALPHA=255;

void setup() {
size(800, 800);
background(0);
smooth();
noFill();
}

void draw() {
background(0);
//stroke(255, alphaLevel);
strokeWeight(5);
ellipseMode(CENTER);

for (int i = 0; i < circleSize; i = i + STEP_RADIUS) {
stroke(255, alphaLevel);
ellipse(width/2, height/2, i, i);  //Consider changing the name of i to "rad" for radius
}

circleSize = circleSize + 1;
}
``````

How do I get a continuous stream of circles? Thanks for the assist!

Hard to explain about all these changes. I will show you the code for you to study. If you really want to learn this, do the same but either with squares, triangles or, an easy one, use ellipses instead of circles. Notice that you should avoid defining variables in the global scope if they have used in a local scope.

Kf

``````final int CIRCLESIZE = 400;
final int MAX_ALPHA=255;

void setup() {
size(800, 800);
background(0);
smooth();
noFill();

strokeWeight(5);
ellipseMode(CENTER);

}

void draw() {
background(0);
translate(width/2, height/2);

stroke(255, alphaLevel);
}

}
``````

Thanks kfrajer… This is really helpful. Thanks for the tip on the global/local variables as well. Cheers!

``````//Circle Waves ...

float alpha = 255;
float step = 25;
int limit = 400;
float i = 0;

void setup() {
size(400, 400);
frameRate(120);
strokeWeight(2);
noFill();
cursor(HAND);
}

void draw() {
background(0);

for (int j=0; j<limit; j+=25) {
alpha = map(j, 0, 400, 255, 0);
stroke(alpha);
ellipse(mouseX, mouseY, j+i, j+i);
}

i += 0.5;
if (i>25) i = 0;
}

``````

Thanks Kaz… a nice solution!

Interestingly, @kfrajer 's solution is very smooth for the fade out on the outer rings and more closer to the end result. That’s the only difference I can make out currently between the two.

Dear Buddy, kindly visit
[https://github.com/KAZ-SYED-ABUTHAHIR/Circle-Waves/tree/master/CircleWavesOOPs]

for an OOP based solution.

I appreciate @kfrajer solution to the problem apart from one tiny flaw.

For an example radStep is sure to overflow the limits of float in the future. You can calculate yourself when. It would be interesting.

@kfrajer I’m just kidding, your coding is excellent !

And Here is Interference:

``````final int CIRCLESIZE = 400;
final int MAX_ALPHA=255;
final float EASING = 0.1;
float cx = 0, cy = 0;

void setup() {
size(800, 800);
background(0);
smooth();
noFill();

strokeWeight(2);
ellipseMode(CENTER);

}

void draw() {
background(0);
//cx += (mouseX - cx)*EASING;
//cy += (mouseY - cy)*EASING;

translate(width/2, height/2);

stroke(255, alphaLevel);
}

}

``````
1 Like

Whoa KAZ!! This is really very nice! Awesome stuff bro’!

The interference one is also very nice but I totally love what you did with the colors one that’s posted on GitHub.

Great stuff!

@deanomite Thank You For Your Kind Appreciation.

@kfrajer Thanks for liking a fork of your code.