/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://p5js.sketchpad.cc/sp/pad/view/ro.FPbKJn1JQcL/rev.1450
 * 
 * authors: 
 *   Mimarik
 *   

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   https://creativecommons.org/licenses/by-sa/3.0/ 
 */ 



/* 
  Pressing Control-R will render this p5.js sketch.hide
  p5.js, p5.dom.js, and p5.sound.js libraries are already loaded.
  To load more libraries/resources, use the "HTML" menu.
  To upload resources (including scripts), use the "Files" menu. 
*/

var level = 0;
var lastascension = 0;
var elapsed = 0;
var r1 = 100;
var r2 = 50;
var i = 0;
var area;
var perimeter;

// this is run once.   
function setup() {  
      
    // set the size of the canvas inside the window.
    cnv = createCanvas(600, 600);
    cnv.mouseClicked(clicked);
      
    // set the background color
    background(64,128,255);
    
    // smooth edges
    smooth();
    
    // limit the number of frames per second
    frameRate(30);
    
    levelup();
} 


// this is run repeatedly.  
function draw() {
    elapsed = int(millis()-lastascension);

    background(64,128,255);
    textFont("Source Code Pro");
    rectMode(CENTER);
    strokeWeight(12);
    strokeJoin(ROUND);
    
    if (level < 2) {
        fill(0);
        rect(width/2,height/2,width/2,height/4);
        fill(255);
        textAlign(CENTER,CENTER);
        textSize(64);
        text("PLAY",width/2,height/2);
    } else {
        // draw the being
        push();
        translate(width/2,height/2);
        scale(width/6/r1);
        fill(0);
        stroke(0);
        beginShape(TRIANGLE_FAN);
        vertex(0,0);
        for (i = 0; i < level; i++) {
            vertex(r1*sin(TWO_PI*i/level),-r1*cos(TWO_PI*i/level));
            vertex(r2*sin(TWO_PI*(i+.5)/level),-r2*cos(TWO_PI*(i+.5)/level));
        }
        vertex(0,-r1);
        endShape();
        pop();
        // calculate the properties
        area = int(level*r1*r2*sin(PI/level));
        perimeter = int(2*level*sqrt(r1*r1+r2*r2-2*r1*r2*cos(PI/level)));
        // display the properties
        textAlign(LEFT,TOP);
        textSize(32);
        text("DIAMETER: "+2*r1+"\nAREA: "+area+"\nPERIMETER: "+perimeter,0,0);
    }
    
    if (elapsed < 2048 && int(elapsed/256) & 1) {
        fill(0);
        textAlign(CENTER,CENTER);
        textSize(64);
        text("LEVEL "+level+" REACHED",width/2,height-32);
    }
    
}
    
function levelup() {
    level++;
    lastascension = millis();
}

function clicked() {
    if (level < 2) {
        if ( abs(mouseX-width/2) < width/4 && abs(mouseY-height/2) < height/8 ) {
            levelup();
        }
    } else {
        levelup();
    }
}