
At first, I wanted to create some wavy lines with arches in different directions. I started with creating code to make pattern.
for (let x = 50; x <= width; x+= 200) {
arc(x,100,100,100,0,PI)}
for (let x = 150; x<=width; x+=200){
arc(x,100,100,100,PI,PI*2)}

Then, I created columns for each arch by writing
let y = 0; y <= height; y += 60
This allowed the code to generate columns and rows of half circles. I didn’t have a clear plan at first, but after observing the patterns, I wanted to make them flip in opposite directions. I searched for references and found that the frameCount() syntax could make this happen. Since I wanted the motion to change every 0.25 seconds, I divided the frame count (originally 60fps) by 15:
let sec = int(frameCount / 15);
let nextFrame = sec % 2 === 0;
Finally, I applied this variable inside an if { } else { } statement. As a result, every 0.25 seconds the arcs switch their direction: the ones that were opening upward flip to face downward, and the ones that were facing downward flip to face upward.
function setup() {
createCanvas(600, 500);
}
function draw() {
background(5,120,255,10);
let sec = int(frameCount / 15);
let nextFrame = sec % 2 === 0;
for (let x = 50; x <= width; x += 200) {
for (let y = 0; y <= height; y += 60) {
if (nextFrame) {
arc(x, y, 100, 100, 0, PI);
} else {
arc(x, y, 100, 100, PI, TWO_PI);
}
}
}
for(let x=150;x<=width;x+=200){
for(let y = 0; y<= height; y+=60){
if (nextFrame){
arc(x, y, 100, 100, PI, PI*2);
}else{
arc(x,y,100,100,0,PI);
}
}
}
}