[

      ["jan", "31"],

      ["feb", "28"],

      ["mar", "31"],

      ["apr", "30"],

      ["may", "31"],

      ["jun", "30"],

      ["jul", "31"],

      ["aug", "31"],

      ["sep", "30"],

      ["oct", "31"],

      ["nov", "30"],

      ["dec", "31"],

    ]

​

let topMargin = 100;

let sidePadding = 100;

​

function setup() {

  createCanvas(700, 400);

  ellipseMode(CENTER);

  rectMode(CENTER);

}

​

function draw() {

  background(30,30,80);

  let tableH = height - topMargin;

  let tableW = width - sidePadding;

  let radius = 10;

  // numbers

  textSize(8)

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

    let tx = sidePadding/2 + tableW/31*i + radius /2;

    let ty = topMargin;

    text(i, tx, ty);

  }

  // months

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

    let tx = sidePadding/2 - radius;

    let ty = topMargin + tableH/12 * i + radius;

    text(months[i][0], tx, ty);

  }

  // moons

  let moonDay = 0;

  let moonCycle = 29.5;

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

    for(let j = 0 ; j < months[i][1] ; j++){

​

      let posX = tableW  / 31 * j + width / 31 / 2 + sidePadding/2;

      let posY = tableH / 12 * i + tableH / 12 / 2 + topMargin;

      noFill();

      stroke(255);

      rect(posX, posY,radius*2);

      if(moonDay < moonCycle / 4){

        let phase = map(moonDay%(moonCycle/4), 0, moonCycle/4, radius, 0)

        if(Math.abs(phase - radius) > 1){

         arc(posX, posY, radius , radius, 3 * PI/2, PI/2);// right side

         arc(posX, posY, phase , radius, 3 * PI/2, PI/2);// left side         

        }

      }

      else if(moonDay < 2*(moonCycle / 4)){

        let phase = map(moonDay%(moonCycle/4), 0, moonCycle/4, 0, radius)

        if(Math.abs(phase - radius) > 1){

         arc(posX, posY, radius , radius, 3 * PI/2, PI/2 );// right side

         arc(posX, posY, phase , radius, PI/2, 3 * PI/2 );// left side

        }

      }

      else if(moonDay < 3*(moonCycle / 4)){

        let phase = map(moonDay%(moonCycle/4), 0, moonCycle/4, radius, 0)

        arc(posX, posY, phase  , radius, 3 * PI/2, PI/2 );// right side

        arc(posX, posY, radius , radius, PI/2, 3 * PI/2 );// left side 

      }

      else{

        let phase = map(moonDay%(moonCycle/4), 0, moonCycle/4, 0, radius)

        arc(posX, posY, phase , radius, PI/2, 3 * PI/2 );// right side

        arc(posX, posY, radius , radius, PI/2, 3 * PI/2 );// left side   

      }

​

      moonDay++;

      if(moonDay > moonCycle){moonDay = 0;}

    }

  }

}