​

function setup() {

  createCanvas(600, 600);

  noLoop();

}

​

function drawMonths(date, x,y,w,h) {

  let gap = w / 12;

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

    rect(x + (gap * i), y, gap, h);

  }

  // fill the months

  let currentMonth = date.getMonth();

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

    fill(0);

    rect(x + (gap * i), y, gap, h);

  }

  let numberOfDaysInMonth = getDaysInThisMonth(date);

  let currentDay = date.getDate();

  let currentMonthHeight = map(currentDay, 0, numberOfDaysInMonth, 0, h);

  fill(0);

  rect(x + (gap * currentMonth), y + h - currentMonthHeight, gap, currentMonthHeight);

}

​

function draw() {

  background(220);

  rect(width / 2 - rectangleSize / 2, height / 2 - rectangleSize / 2, rectangleSize, rectangleSize);

  drawMonths(new Date(), width / 2 - rectangleSize / 2, height / 2 - rectangleSize / 2, rectangleSize, rectangleSize);

}

​

function getDaysInThisMonth(date) {

  const year = date.getFullYear(); // Get the current year

  const month = date.getMonth(); // Get the current month (0-based index)

​

  // Create a date for the first day of the next month, then subtract one day

  const lastDayOfThisMonth = new Date(year, month + 1, 0);

​

  return lastDayOfThisMonth.getDate(); // Returns the number of days in the month

}

​