Week 4

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);
    }
     
 }
}
  
}