Please excuse my incapability to address my issue.
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">
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<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>
</head>
<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'
document.getElementById('dalsitl').addEventListener('click', cyklusKroku);
document.getElementById('repeat').addEventListener('click', opakovatKrok);
}
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.
welcome to the forum!