/* change default application behavior */
var defaultMode = "random";
var defaultSize = 128;
var defaultDisplay = "both"
var defaultEmoji = 100;
var backgroundColor = "hsb(0, 0%, 94%)";

function Glyph() {
  /*
   * values is an array of 3 numbers: [hue, saturation, lightness]
   *   + hue ranges from 0..360
   *   + saturation ranges from 0..100
   *   + lightness ranges from 0..100
   *
   * size is the number of pixels for width and height
   *
   * use p5.js to draw a round grayscale glyph
   * the glyph should stay within the ellipse [0, 0, width, height]
   * this is a grayscale glyph, so only lightness can be adjusted.
   * the range for lightness is 0..100
   *
   * When setting the lightness of stroke or fill always use either strokeUniform()
   * or fillUniform() calls. Each takes one arguement - the lightness from
   * 0 to 100. Examples:
   *       - fillUniform(50);    // ranges from 0-100
   *       - strokeUniform(100); // white
   */ 
  this.draw = function(values, size) {
    let s2 = size/2;
    translate(s2, s2, 0);

    // map lightness to large circle shade
    let spin = map(values[0], 0, 360, 0, 2*PI)
    rotate(spin)

    let bg = map(values[1], 0, 100, 50, 100);
    let fg = map(values[2], 0, 100, 50, 0);

    fillUniform(bg);
    ellipse(0, 0, size, size);
    fillUniform(0);
    ellipse(0, -(2*s2/3), s2/3, s2/3);

    fillUniform(fg);
    arc(0, 0, size, size, 0, PI);
  }  
}