how do i use nested for loops to create a calendar for 2021 where theres 12 columns of black circles, where the number of circles for each column corresponds to the number of days in that month.
For example, the first column of circles will represent January and will have 31 circles. Each circle should be 10 pixels wide, and the canvas should be 140 X 330 which will allow a space of 10 pixels around the entire set of circles. i also need to indicate what day it is currently with a green circle and im not sure how to write a function for that either
this is all i have:
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();
}
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();
}
This is not the full solution, but it should be good enough to twist it to your own needs.