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;
}
}
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;
final int STEP_RADIUS=50;
final int DELTA_ALPHA=int(MAX_ALPHA/(float(circleSize)/STEP_RADIUS));
for (int i = 0; i < circleSize; i = i + STEP_RADIUS) {
alphaLevel=MAX_ALPHA - (i/STEP_RADIUS)*DELTA_ALPHA;
stroke(255, alphaLevel);
ellipse(width/2, height/2, i,i); //Consider changing the name of i to "rad" for radius
}
@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;
final int STEP_RADIUS=50;
final int DELTA_ALPHA=int(MAX_ALPHA/(float(circleSize)/STEP_RADIUS));
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) {
alphaLevel=MAX_ALPHA - (i/STEP_RADIUS)*DELTA_ALPHA;
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;
final int STEP_RADIUS=50;
final int DELTA_ALPHA=int(MAX_ALPHA/(float(CIRCLESIZE)/STEP_RADIUS));
final float DELTA_RADIUS=0.5;
float radStep;
void setup() {
size(800, 800);
background(0);
smooth();
noFill();
strokeWeight(5);
ellipseMode(CENTER);
radStep=0;
}
void draw() {
background(0);
translate(width/2, height/2);
for (int rad = 0; rad < CIRCLESIZE; rad += STEP_RADIUS) {
float rad2=(rad+ radStep)%CIRCLESIZE;
float alphaLevel=MAX_ALPHA - (rad2/STEP_RADIUS)*DELTA_ALPHA;
stroke(255, alphaLevel);
ellipse(0, 0, rad2, rad2); //Consider changing the name of i to "rad" for radius
}
radStep=(radStep+DELTA_RADIUS);
}
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.
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