# How to have circles increase their radius

I cant figure out how to have a certain amount of semicircles increase their radius without needing to define a new var for ever new circle. I am trying to recreate this:

(the semicircles generate with delay but with a constant speed)
so far I managed to make it work for 3 circles with this:

``````function digLine2(){
//let kruh =0;
xu += 2; // Pohyb čáry zleva doprava
if (yd < height / 2) {
yd += 2;
}
// Zvětšení xd a označení, že xd bylo zvětšeno
if (!zvetseno && yd >= height / 2){
//  console.log(xd);
xd += 2;
if (xd >= xu){
zvetseno = true;
}

noFill();
// strokeWeight(0.5)ž;
if(xd>20){
kruh += 1;
arc(20, height/2, kruh, kruh, PI, 0);}
if(xd>40){
kruh1 += 1;
arc(40, height/2, kruh1 , kruh1, PI, 0);}
if(xd>200){
console.log("xd je >60")
kruh2 += 1;
arc(200, height/2, kruh2, kruh2, PI, 0);}

line(xd, yd, xu, yu);
``````

but I need many more semicircles than that and I don’t know how to automatize it

1 Like

Hi welcome to the forum!

Perhaps it would be helpful if you could post the working code so that others can try. The code snippet is incomplete and difficult for others to pin point the problem.

I assume you need a loop to make multiple circles, but I’m not sure what you are trying to achieve. Do you need to make an animation?

4 Likes

I am trying to recreate an animation (with all its steps) from this site: Reflection and Refraction of Light Waves (Huygens' Principle)
As mentioned before, I am struggling with the semicircles part.
I know how to make one but I don’t know how to generate them all once the diagonal line in my animation crosses the small green dot in “step 3”
My entire code looks like this:

``````<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Maturitní Projektíček :3</title>
<style>
body { margin: 0; }
canvas{
position: absolute;
top: 50px;
left: 50px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<body>
<div id="canvasContainer">
<button id="dalsitl">next</button>
<button id="repeat">previous</button>
</div>
<script>
let xd = 0; // Počáteční X, jakože dolní /s tarting X for diagonal line
let yd = 0; // starting Y for diagonal line
let xu = 0; // upper
let yu = 0; // ypsilon upper
let zvetseno = false; // Indikátor, zda je xd zvětšeno / indicator if xd is rising
let xk = 20;
let step = 0;

function setup(){
let canvas = createCanvas(900, 400);
canvas.parent("canvasContainer"); // Přiřazení plátna k div s ID 'canvasContainer'
}
function draw(){
background (255,);
strokeWeight(0);
fill("rgba(70, 108, 54, 0.52)");
rect(0,0,width, 200)
fill("rgba(138, 168, 255, 0.8)");
rect(0,200,width,400);
strokeWeight(5);
fill(255);
line(0,height/2,width,height/2);
dalsiObrazek();
}

function dalsiObrazek(){ //next part of animation
switch (step){
case 0:
digLine();
break;
case 1:
digLine();
kresliKruhy();
break;
case 2:
digLine2();
kresliKruhy();
break;
case 3:

break;
}
}

function digLine(){
xu += 2; // Pohyb čáry zleva doprava / animation of the line to make it go from left to right
if (yd < height / 2) {
yd += 2;
}
// Zvětšení xd a označení, že xd bylo zvětšeno
if (!zvetseno && yd >= height / 2){
//  console.log(xd);
xd += 2;
if (xd >= xu){
zvetseno = true;
}
//       if(xd == 20){
console.log("jsem u prvního") // tady budu volat vykreslovaní pulkruhu //}

}

line(xd, yd, xu, yu); // AI řeklo, že to musí být tady aby to fungovalo

//Bůh ví co tohle dělá
return createVector((xd + xu) / 2, (yd +yu) /2)
}

// here I am defining radius for each semicircle
let kruh =0;
let kruh1=0;
let kruh2=0;
function digLine2(){
//let kruh =0;
xu += 2; // Pohyb čáry zleva doprava
if (yd < height / 2) {
yd += 2;
}
// Zvětšení xd a označení, že xd bylo zvětšeno
if (!zvetseno && yd >= height / 2){
//  console.log(xd);
xd += 2;
if (xd >= xu){
zvetseno = true;
}

noFill();
// strokeWeight(0.5)ž;
if(xd>20){
kruh += 1;
console.log("hodnota kruhu pro první kruh je"+kruh)
arc(20, height/2, kruh, kruh, PI, 0);}
if(xd>40){
kruh1 += 1;
arc(40, height/2, kruh1 , kruh1, PI, 0);}
if(xd>200){
console.log("xd je >60")
kruh2 += 1;
console.log("hodnota kruhu pro třetí kruh je"+kruh)                                        }
arc(200, height/2, kruh2, kruh2, PI, 0);}

line(xd, yd, xu, yu); // AI řeklo, že to musí být tady aby to fungovalo

//Bůh ví co tohle dělá
return createVector((xd + xu) / 2, (yd +yu) /2)
}

// draw those small green circles on the horizontal line
function kresliKruhy() {
fill("rgba(15, 238, 30, 0.8)");
strokeWeight(1);
for (let i = 20; i < width; i += 40){
ellipse(i, height / 2, 10);
}
}
//aby digLine začínala pokažde od znova / reset values of the Diagonal Line
function resetHodnot(){
xu = 0;
yu = 0;
xd = 0;
yd = 0;
zvetseno = false;
}

//opakování 4 členného cyklu / button for next animation
function cyklusKroku(){
resetHodnot();
step = (step +1)%4; // když se bude zbytek rovnat 0, tak se
}

// button for previous animation
function opakovatKrok() {
resetHodnot();
// funkce talčítka opakovat
if (step === 0) {
return;
}
step--;
}
console.log(xd);

</script>
</div>
</body>
</html>
``````

I put the entire code here because I don’t know what all is important. I would also like to apologize for not giving my function an English name.

1 Like
``````
....

// draw those small green circles on the horizontal line
function kresliKruhy() {
fill("rgba(15, 238, 30, 0.8)");
strokeWeight(1);
for (let i = 20; i < width; i += 40) {
ellipse(i, height / 2, i);
}
}

``````

Chrisir

1 Like

I think the idea is nice but the OP wants to animate it, I assume.

Perhaps this part

``````if(xd>20){
kruh += 1;
console.log("hodnota kruhu pro první kruh je"+kruh)
arc(20, height/2, kruh, kruh, PI, 0);}
if(xd>40){
kruh1 += 1;
arc(40, height/2, kruh1 , kruh1, PI, 0);}
if(xd>200){
console.log("xd je >60")
kruh2 += 1;
console.log("hodnota kruhu pro třetí kruh je"+kruh)                                        }
arc(200, height/2, kruh2, kruh2, PI, 0);}

``````

has to be refactored with a for loop to cover all the points on the line. But then you don’t want to define `kruh, kruh1, kruh2, ...` so you need to pack them in an array.

I would like to thank to all of you who tried to help, now I have solved my problem due to you being helpful.

1 Like