createCanvas(600, 600, WEBGL);

  angleMode(DEGREES);

}

​

function draw() {

  background(0);

  rotateX(60);

  noFill()

  stroke(255,0,0);

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

    var r = map(sin(frameCount/2),-1,1,50,200);

    var g = map(i,0,50,50,200);

    var b = map(cos(frameCount/2),-1,1,50,200);

    stroke(r,g,b);

    // rotate(frameCount/10);

    beginShape();

    for(let j = 0; j < 360; j+=4){

      var rad = i*4; 

      // The polar function of 3-leave shapes: r = cos(2*k); k ∈ [0, 2*PI]; you can change this to any polar function;

      // to convert polar coordinates to Cartestian, using the following:

      // x = r * cos(theta); here r is the function in polar coordinates, theta ∈ [0, 2*PI]

      // y = r * sin(theta);

      var x = rad *cos(j*2) * cos(j);

      var y = rad *cos(j*2) * sin(j);

      var z = sin(frameCount*2 + i*5)*50+25;

      vertex(x,y,z);

      // // Normal circle loops in polar function:  r = 1 * const;

      // var x = rad *1 * cos(j) ;

      // var y = rad *1 * sin(j) ;

      // var z = sin(frameCount*2 + i*5)*50+25; // z ∈ [-25,25]

      // vertex(x,y,z);

    }

    endShape(CLOSE);    

  }

}