cycloidLights

let a=10;
function setup(){
 createCanvas(windowWidth,windowHeight);
  noStroke() 
}

function draw(){
  background(255,255,255,25);
  t=-frameCount/10;
  a=10+20*abs(sin(t/20))
  translate(width/2,height/2)
  rotate(t/100)
  threeC();
  push()
  scale(1,-1)
  threeC()
  pop()
  push()
  rotate(PI/2)
  threeC()
  pop()
  push()
  scale(-1,1)
  rotate(PI/2)
  threeC()
  pop()
  
}

function cycloid(p,d){  
  beginShape()
  
  for(let i=-p;i<p;i=i+0.1){
    x=a*(i-sin(i+d))
    y=a*(1-cos(i+d))
    vertex(x,y)
  }
  vertex(height,width)
  vertex(-width,height)
  endShape()
}

function threeC(){
  rotate(PI/6*sin(t/10))
  fill(0,0,200,5)
  cycloid(width/2,t/2)
  push()
  fill(0,100,200,10)
  translate(0,height/7)
  rotate(-PI/3*sin(t/10))
  cycloid(width/2,t)
  pop()
  push()
  fill(0,150,200,20)
  translate(0,2*height/7)
  rotate(PI/6*sin(t/10))
  cycloid(width/2,t)
  pop()
}