​

let distance = 0

let downer = 0

let heightArea = 0

​

const ringHeight = 4

let radius = 0

​

function setup() {

  createCanvas(400, 400, WEBGL);

  noStroke()

  heightArea = height * 0.7

  distance = heightArea / sliceCount

  radius = width/3.5

}

​

function draw() {

  background(50);

  translate( 0, height * 0.7 * -0.5 - distance, 0 )

​

  translate( 0, downer, 0 )

  for (let i = 0; i < sliceCount; i++){

    let calcDistance = i * distance

    let calcDistance2 = (i+1) * distance

    let t = sin( i/sliceCount * PI )

    let t2 = sin( (i+1)/sliceCount * PI )

    // let diamStart = cos( (i/sliceCount) * PI + HALF_PI ) * radius

    // let diamEnd   = cos( (i+1/sliceCount) * PI + HALF_PI ) * radius

    let diamStart = t * radius * cos( asin(t) + HALF_PI )

    let diamEnd   = t2 * radius * cos( asin(t2) + HALF_PI )

    let counter = (downer / ( heightArea / sliceCount) )

    let diam = map( counter, 0, 1, diamStart, diamEnd )

    translate( 0, distance, 0 )

    fill('#FFA500')

    cylinder(diam, ringHeight);

    fill(50)

    cylinder(diam*0.95, ringHeight+1);

  }

  downer++

  if( frameCount % (heightArea / sliceCount) == 0 ){

    downer = 0

  }

}