/*
 * val4 is an array of 4 numbers that range from [0,100]
 * size is the number of pixels for width and height
 * use p5.js to draw a round grawscale glpyh within the bounding box
 */ 
function glyph4(values, size) {
  var a,b,c; // For trig
  var radius;

  stroke(0);
  noFill();


  center = size/2;

  ellipse( center, center, values[0]/2 );
  radius = values[0] - 50;
  if( radius < 0 ){ radius = 0; }
  ellipse( center, center, radius )
  radius = values[1];


  for( var i = 0; i < 6; i++ ) {
    push();
      translate(size/2,size/2);
      rotate(radians(i*60));
      // base line ( max size = 30 )
      length = radius;
      if ( radius < 50 ) {
        if ( radius > 30 ) {
          length = 30;
        }
        line( 0, 0, 0, 0 - length );

        length = radius - 25;
        if ( length > 25 ) {
          length = 25;
        }
        a = Math.sin( radians( 25 ) ) * length;
        b = Math.cos( radians( 25 ) ) * length;
        if( radius > 25 ) {
          line( 0, 0 - 25, -a, -b );
          line( 0, 0 - 25, a, -b );
        }
      } else {

        length = radius - 50;
        if ( length > 25 ){
          length = 25;
        }
        a = Math.sin( radians( 25 ) ) * ( 25 - length );
        b = Math.cos( radians( 25 ) ) * ( 25 - length );
        if( radius < 75 ) {
          line( 0, 0 - 25, -a, -b );
          line( 0, 0 - 25, a, -b );
        }
        length = radius - 70;

        if( length > 30 ){
          length = 30;
        }
        line( 0, 0 - 30, 0, 0 - length );
      }
    pop();
      
  }
  for( var i = 0; i < 6; i++ ) {
    push();
      translate(size/2,size/2);
      rotate( radians( 30 ) + radians( i * ( 60 ) ) );
      
      line(0,0,0,0-values[3]/100 * size/2)
      ellipse(0,0-10,10,10)
      if( values[3] > 80 ) {
        fans = values[3] - 80;

        a = Math.sin( radians( 10 ) ) * fans;
        b = Math.cos( radians( 10 ) ) * fans;
        line(0,0- 0.8 * size/2, -a, -b);
        line(0,0- 0.8 * size/2, a, -b);
      }
      
    pop();
      
  }

  for( var i = 0; i < 6; i++ ) {

    push();
      translate(size/2,size/2)
      rotate(radians(i*60));
      ellipse( 0, 0, size/2, ( values[2]/100 ) * size );


    pop();
  }
  
}

/*
 * val8 is an array of 8 numbers that range from [0,100]
 * size is the number of pixels for width and height
 * use p5.js to draw a square color glpyh within the bounding box
 */
function glyph8(values, size) {
  fill(values[5]*2,values[6]*2,values[7]*2,50)
  rect(0,0,size,size)
  push();
  translate(size/2,size/2);
  rotate(radians(values[4]*3.6))
  var a,b,c; // For trig
  var radius;

  stroke(0);
  noFill();


  center = 0;

  fill(0,0,180,50);
  ellipse( center, center, values[1] );
  radius = values[1] - 50;
  if( radius < 0 ){ radius = 0; }
  ellipse( center, center, radius )


  for( var i = 0; i < 6; i++ ) {
    push();
      rotate( radians( 30 ) + radians( i * ( 60 ) ) );
      
      line(0,0,0,0-values[3]/100 * size/2)

      fill(155,0,0,30)
      ellipse(0,0-values[3]/200 * size/2, 50,56);
      if( values[3] > 80 ) {
        fans = values[3] - 80;

        a = Math.sin( radians( 10 ) ) * fans;
        b = Math.cos( radians( 10 ) ) * fans;
        line(0,0- 0.8 * size/2, -a, -b);
        line(0,0- 0.8 * size/2, a, -b);
      }
      
    pop();
      
  }
  fill(180,180,0,30);
  for(var i = 11; i < size; i+= 22){

    ellipse(0, 0,10*values[2]/50,22*values[2]/50);
    ellipse(0, 0,22*values[2]/50,10*values[2]/50);
  }

  for( var i = 0; i < 8; i++ ) {

    push();
      rotate(radians(i*60));
      fill(values[5],values[6],values[7],40);
      var newSize = size/6 * values[0]/100;
      triangle(0,-newSize, -newSize, newSize,newSize)


    pop();
  }
  pop();
}