Concentric Circles Animation doubt

p5.js Coding Questions
1

Hi All.

Is it possible to do this kind of animation smoothly with code in p5.js

Rosca

Thanks for any help.

2

Hello @JoseRocha

Some additional clarification is needed.
You’ve tagged this as “processing”, but your question is “p5.js”.

Can you show your code so we know what you have attempted so far?
:nerd_face:

3

Hello @debxyz,

New to this hole thing.

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(0);
  
  noFill();
  strokeWeight(4);
  stroke(255);
  
  for (let i = 0; i < 400; i++){
    
    circle (300, 300, 30 + i);
    
  } 
}

Not working at all.

Thanks

4

Hello @JoseRocha

See comments next to relevant lines for explanation.

let grow = 1;

function setup() {
createCanvas(600, 600);
}

function draw() {
background(0);

noFill();
strokeWeight(4);
stroke(255);

for (let i = 0; i < 3; i++){ //use for loop to count the number of circles you want
if (i == 0){//depending on iteration of "i", set starting circle size
  s = 0;
} else if (i == 1){
    s = 30;
} else {
  s = 60;
}

circle (300, 300, s+grow);
 grow+=1; //grow variable increases by 1 with each draw loop, creating the animation
}
}

Hope this helps!
:nerd_face:

1 Like
5

Perfect @debxyz

Now I will try to loop it.

Thank you very much.

2 Likes
6

Hello @JoseRocha ,

Yes it is!

I often use frameCount (or you can use a counter) and the modulo % operator.

Consider this for the circle size in your draw():

  let r1 = frameCount%360;
  let r2 = (frameCount+60)%360;

You may want to print values to console to see change in variables over time.

Add a few more circles and voila!

image
image638Ă—624 50.4 KB

This animates nicely and is very smooth!

:)

2 Likes
7

Hi @glv

Thanks for the tip.

1 Like