Создание Абстрактного календаря в P5JS

#javascript

Вопрос:

как использовать вложенные циклы for для создания календаря на 2021 год, в котором 12 столбцов черных кругов, где количество кругов для каждого столбца соответствует количеству дней в этом месяце.

Например, первый столбец кругов будет представлять январь и будет содержать 31 круг. Каждый круг должен иметь ширину 10 пикселей, а размер холста должен быть 140 Х 330, что позволит разместить 10 пикселей вокруг всего набора кругов. мне также нужно указать, какой сегодня день, с помощью зеленого круга, и я тоже не уверен, как написать функцию для этого

это все, что у меня есть:

     var numDays; 

function setup() {
    createCanvas(140, 330);
    background(220);

}

function draw () { 
    fill(0);
    for (let m = 1; m <= 12; m  =1 ) {
        //set the variable numDays here 


    for (let d = 1; d <= numDays; d  = 1) {
            //black circles
        }
    }
    fill (0, 255, 0);  
    //green circle

    noLoop();

}
 

Ответ №1:

 function setup() {
  createCanvas(400, 400);
}

function drawCircleRow(quantity, diameter, space, xOffset, yOffset, dayColoredOtherwise) {
  for(let i = 0; i < quantity; i  ) {
    if (dayColoredOtherwise - 1 === i) {
      fill(127);
    } else {
      fill(0);
    }
    circle(xOffset   (diameter   space) * i, yOffset, diameter);
  }
}

function draw() {
  background(255);
  const daysPerMonth = [31, 28, 31, 30];
  const monthIndex = 2;
  const day = 5;
  
  for (let i = 0; i < daysPerMonth.length; i  ) {
    const days = daysPerMonth[i];
    drawCircleRow(days, 5, 5, 5, 10 * (i   1), monthIndex === i ? day : -1);
  }
  
  noLoop();
}
 

Это не полное решение, но оно должно быть достаточно хорошим, чтобы приспособить его к вашим собственным потребностям.