var maxPUNTI=32;
var minPUNTI=8;
var PUNTI = 12;
var RUOTA,
    xc, yc,
    raggio1,
    raggio2;
var cresce=true;

function setup()
{
   createCanvas(360, 360);
   stroke(255);   

   xc = width/2.0;
   yc = height/2.0;
   raggio1 = 0.95*xc;
   raggio2 = 0.5*xc;
   RUOTA=360.0/PUNTI;
   
   noLoop();
}

function keyPressed()  { cresce=false; }
function keyReleased() { cresce=true;  }

function mousePressed()
{
   if(cresce && PUNTI < maxPUNTI)
   {
	  PUNTI+=2;
	  RUOTA=360.0/PUNTI;
	  redraw();
   }
   else if(!cresce && PUNTI > minPUNTI)
   {
	  PUNTI-=2;
	  RUOTA=360.0/PUNTI;
	  redraw();
   }   
}

function draw()
{
   background(100);

   var px=0, py=0, angolo=0;   
   beginShape(TRIANGLE_STRIP); 
   for(var i=0; i < PUNTI; i++)
   {
	  fill(255, 255, 0);
	  px = xc+cos(radians(angolo))*raggio2;
	  py = yc+sin(radians(angolo))*raggio2; 
	  vertex(px, py);
	  angolo += RUOTA;      

	  fill(0, 0, 255);
	  px = xc+cos(radians(angolo))*raggio1;
	  py = yc+sin(radians(angolo))*raggio1; 
	  vertex(px, py); 
	  angolo += RUOTA;
   }
   endShape();
}