​

​

​

// via https://stackoverflow.com/questions/8619879/javascript-calculate-the-day-of-the-year-1-366

​

Date.prototype.isLeapYear = function() {

    var year = this.getFullYear();

    if((year & 3) != 0) return false;

    return ((year % 100) != 0 || (year % 400) == 0);

};

​

// Get Day of Year

Date.prototype.getDOY = function() {

    var dayCount = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];

    var mn = this.getMonth();

    var dn = this.getDate();

    var dayOfYear = dayCount[mn] + dn;

    if(mn > 1 && this.isLeapYear()) dayOfYear++;

    return dayOfYear;

};

​

​

const fullDayMinute = 24 * 60;

​

const sunriseMinute = [433, 434, 434, 434, 434, 433, 433, 433, 433, 433, 432, 432, 432, 431, 431, 430, 430, 429, 429, 428, 428, 427, 426, 425, 425, 424, 423, 422, 421, 420, 419, 418, 417, 416, 415, 414, 413, 412, 410, 409, 408, 407, 405, 404, 403, 401, 400, 398, 397, 396, 394, 393, 391, 390, 388, 387, 385, 383, 382, 380, 379, 377, 375, 374, 372, 370, 369, 367, 365, 364, 362, 360, 359, 357, 355, 353, 352, 350, 348, 347, 345, 343, 341, 340, 338, 336, 334, 333, 331, 329, 327, 326, 324, 322, 321, 319, 317, 316, 314, 312, 311, 309, 307, 306, 304, 302, 301, 299, 298, 296, 295, 293, 292, 290, 289, 287, 286, 284, 283, 282, 280, 279, 277, 276, 275, 274, 272, 271, 270, 269, 268, 267, 265, 264, 263, 262, 261, 260, 260, 259, 258, 257, 256, 255, 255, 254, 253, 253, 252, 251, 251, 250, 250, 250, 249, 249, 248, 248, 248, 248, 247, 247, 247, 247, 247, 247, 247, 247, 247, 247, 248, 248, 248, 248, 248, 249, 249, 249, 250, 250, 251, 251, 252, 252, 253, 254, 254, 255, 255, 256, 257, 258, 258, 259, 260, 261, 262, 262, 263, 264, 265, 266, 267, 268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293, 294, 296, 297, 298, 299, 300, 301, 302, 303, 304, 305, 306, 307, 308, 309, 310, 311, 312, 313, 314, 316, 317, 318, 319, 320, 321, 322, 323, 324, 325, 326, 327, 328, 329, 330, 331, 332, 333, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345, 347, 348, 349, 350, 351, 352, 353, 354, 356, 357, 358, 359, 360, 361, 363, 364, 365, 366, 367, 369, 370, 371, 372, 373, 375, 376, 377, 378, 380, 381, 382, 383, 385, 386, 387, 388, 390, 391, 392, 393, 395, 396, 397, 398, 400, 401, 402, 403, 404, 406, 407, 408, 409, 410, 411, 412, 413, 414, 416, 417, 418, 419, 419, 420, 421, 422, 423, 424, 425, 425, 426, 427, 428, 428, 429, 429, 430, 430, 431, 431, 432, 432, 432, 433, 433, 433, 433];

​

const sunsetMinute = [982, 983, 984, 985, 986, 987, 988, 989, 990, 991, 992, 993, 995, 996, 997, 998, 999, 1000, 1002, 1003, 1004, 1005, 1007, 1008, 1009, 1010, 1012, 1013, 1014, 1016, 1017, 1018, 1019, 1021, 1022, 1023, 1025, 1026, 1027, 1029, 1030, 1031, 1032, 1034, 1035, 1036, 1038, 1039, 1040, 1041, 1043, 1044, 1045, 1046, 1048, 1049, 1050, 1051, 1053, 1054, 1055, 1056, 1058, 1059, 1060, 1061, 1062, 1063, 1065, 1066, 1067, 1068, 1069, 1071, 1072, 1073, 1074, 1075, 1076, 1077, 1079, 1080, 1081, 1082, 1083, 1084, 1085, 1086, 1088, 1089, 1090, 1091, 1092, 1093, 1094, 1095, 1097, 1098, 1099, 1100, 1101, 1102, 1103, 1104, 1106, 1107, 1108, 1109, 1110, 1111, 1112, 1113, 1115, 1116, 1117, 1118, 1119, 1120, 1121, 1122, 1124, 1125, 1126, 1127, 1128, 1129, 1130, 1131, 1132, 1133, 1134, 1136, 1137, 1138, 1139, 1140, 1141, 1142, 1143, 1144, 1145, 1146, 1147, 1147, 1148, 1149, 1150, 1151, 1152, 1153, 1153, 1154, 1155, 1156, 1156, 1157, 1158, 1158, 1159, 1160, 1160, 1161, 1161, 1162, 1162, 1163, 1163, 1163, 1164, 1164, 1164, 1165, 1165, 1165, 1165, 1165, 1165, 1165, 1165, 1165, 1165, 1165, 1165, 1165, 1164, 1164, 1164, 1163, 1163, 1163, 1162, 1162, 1161, 1161, 1160, 1159, 1159, 1158, 1157, 1157, 1156, 1155, 1154, 1153, 1152, 1151, 1150, 1149, 1148, 1147, 1146, 1145, 1144, 1143, 1142, 1141, 1139, 1138, 1137, 1135, 1134, 1133, 1131, 1130, 1129, 1127, 1126, 1124, 1123, 1121, 1120, 1118, 1117, 1115, 1114, 1112, 1110, 1109, 1107, 1106, 1104, 1102, 1101, 1099, 1097, 1095, 1094, 1092, 1090, 1089, 1087, 1085, 1083, 1082, 1080, 1078, 1076, 1075, 1073, 1071, 1069, 1068, 1066, 1064, 1062, 1060, 1059, 1057, 1055, 1053, 1052, 1050, 1048, 1046, 1045, 1043, 1041, 1039, 1038, 1036, 1034, 1033, 1031, 1029, 1028, 1026, 1025, 1023, 1021, 1020, 1018, 1017, 1015, 1014, 1012, 1011, 1009, 1008, 1006, 1005, 1003, 1002, 1001, 999, 998, 997, 996, 994, 993, 992, 991, 990, 989, 988, 987, 986, 985, 984, 983, 982, 981, 980, 979, 979, 978, 977, 977, 976, 976, 975, 975, 974, 974, 973, 973, 973, 972, 972, 972, 972, 972, 972, 972, 972, 972, 972, 972, 972, 973, 973, 973, 974, 974, 974, 975, 975, 976, 976, 977, 978, 978, 979, 980, 981, 981];

​

const monthdayptr = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];

//as an afterthought I used the same script to parse the civil twilight...

const twilightStartMinute = [402, 402, 402, 402, 402, 402, 402, 402, 402, 401, 401, 401, 401, 400, 400, 400, 399, 399, 398, 398, 397, 396, 396, 395, 394, 394, 393, 392, 391, 390, 389, 388, 387, 386, 385, 384, 383, 382, 381, 380, 379, 377, 376, 375, 374, 372, 371, 370, 368, 367, 366, 364, 363, 361, 360, 358, 357, 355, 354, 352, 351, 349, 347, 346, 344, 342, 341, 339, 337, 336, 334, 332, 331, 329, 327, 326, 324, 322, 320, 319, 317, 315, 313, 312, 310, 308, 306, 304, 303, 301, 299, 297, 296, 294, 292, 290, 289, 287, 285, 283, 282, 280, 278, 277, 275, 273, 272, 270, 268, 267, 265, 263, 262, 260, 259, 257, 256, 254, 252, 251, 250, 248, 247, 245, 244, 242, 241, 240, 239, 237, 236, 235, 234, 232, 231, 230, 229, 228, 227, 226, 225, 224, 223, 222, 221, 221, 220, 219, 218, 218, 217, 217, 216, 216, 215, 215, 214, 214, 214, 213, 213, 213, 213, 212, 212, 212, 212, 212, 212, 213, 213, 213, 213, 213, 214, 214, 214, 215, 215, 216, 216, 217, 217, 218, 219, 219, 220, 221, 221, 222, 223, 224, 225, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 243, 244, 245, 246, 247, 248, 249, 250, 252, 253, 254, 255, 256, 257, 259, 260, 261, 262, 263, 264, 266, 267, 268, 269, 270, 271, 272, 274, 275, 276, 277, 278, 279, 280, 281, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 294, 295, 296, 297, 298, 299, 300, 301, 302, 303, 304, 305, 307, 308, 309, 310, 311, 312, 313, 314, 315, 316, 317, 318, 320, 321, 322, 323, 324, 325, 326, 327, 329, 330, 331, 332, 333, 334, 335, 336, 338, 339, 340, 341, 342, 343, 345, 346, 347, 348, 349, 350, 352, 353, 354, 355, 356, 357, 359, 360, 361, 362, 363, 364, 366, 367, 368, 369, 370, 371, 372, 374, 375, 376, 377, 378, 379, 380, 381, 382, 383, 384, 385, 386, 387, 388, 389, 390, 390, 391, 392, 393, 394, 394, 395, 396, 396, 397, 397, 398, 399, 399, 399, 400, 400, 401, 401, 401, 401, 402];

const twilightStopMinute = [1014, 1015, 1016, 1017, 1018, 1019, 1020, 1021, 1022, 1023, 1024, 1025, 1026, 1027, 1028, 1029, 1030, 1031, 1032, 1034, 1035, 1036, 1037, 1038, 1039, 1041, 1042, 1043, 1044, 1045, 1047, 1048, 1049, 1050, 1052, 1053, 1054, 1055, 1057, 1058, 1059, 1060, 1062, 1063, 1064, 1065, 1066, 1068, 1069, 1070, 1071, 1073, 1074, 1075, 1076, 1077, 1079, 1080, 1081, 1082, 1083, 1084, 1086, 1087, 1088, 1089, 1090, 1091, 1093, 1094, 1095, 1096, 1097, 1098, 1100, 1101, 1102, 1103, 1104, 1105, 1107, 1108, 1109, 1110, 1111, 1112, 1114, 1115, 1116, 1117, 1118, 1119, 1121, 1122, 1123, 1124, 1125, 1126, 1128, 1129, 1130, 1131, 1132, 1134, 1135, 1136, 1137, 1138, 1140, 1141, 1142, 1143, 1144, 1146, 1147, 1148, 1149, 1151, 1152, 1153, 1154, 1155, 1157, 1158, 1159, 1160, 1161, 1163, 1164, 1165, 1166, 1167, 1169, 1170, 1171, 1172, 1173, 1174, 1175, 1176, 1178, 1179, 1180, 1181, 1182, 1183, 1184, 1185, 1186, 1187, 1187, 1188, 1189, 1190, 1191, 1191, 1192, 1193, 1194, 1194, 1195, 1195, 1196, 1197, 1197, 1197, 1198, 1198, 1199, 1199, 1199, 1199, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1199, 1199, 1199, 1199, 1198, 1198, 1198, 1197, 1197, 1196, 1196, 1195, 1194, 1194, 1193, 1192, 1191, 1191, 1190, 1189, 1188, 1187, 1186, 1185, 1184, 1183, 1182, 1181, 1179, 1178, 1177, 1176, 1175, 1173, 1172, 1171, 1169, 1168, 1166, 1165, 1164, 1162, 1161, 1159, 1158, 1156, 1154, 1153, 1151, 1150, 1148, 1146, 1145, 1143, 1141, 1140, 1138, 1136, 1135, 1133, 1131, 1129, 1128, 1126, 1124, 1122, 1121, 1119, 1117, 1115, 1114, 1112, 1110, 1108, 1106, 1105, 1103, 1101, 1099, 1097, 1096, 1094, 1092, 1090, 1088, 1087, 1085, 1083, 1081, 1080, 1078, 1076, 1074, 1073, 1071, 1069, 1068, 1066, 1064, 1062, 1061, 1059, 1058, 1056, 1054, 1053, 1051, 1050, 1048, 1047, 1045, 1044, 1042, 1041, 1039, 1038, 1036, 1035, 1034, 1032, 1031, 1030, 1029, 1027, 1026, 1025, 1024, 1023, 1022, 1020, 1019, 1018, 1017, 1016, 1016, 1015, 1014, 1013, 1012, 1011, 1011, 1010, 1009, 1009, 1008, 1007, 1007, 1006, 1006, 1006, 1005, 1005, 1005, 1004, 1004, 1004, 1004, 1004, 1004, 1003, 1003, 1004, 1004, 1004, 1004, 1004, 1004, 1005, 1005, 1005, 1005, 1006, 1006, 1007, 1007, 1008, 1008, 1009, 1010, 1010, 1011, 1012, 1012, 1013];

​

​

function setup() {

  createCanvas(365, 365);

}

​

const DELTAPIX = 4;

​

function draw() {

  background(50, 50, 100);

​

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

    const twitop = map(twilightStartMinute[i], 0, fullDayMinute, 0, height);

    const twibot = map(twilightStopMinute[i], 0, fullDayMinute, 0, height);

    stroke(150, 50, 150);

    line(i, twitop, i, twibot);

​

    const top = map(sunriseMinute[i], 0, fullDayMinute, 0, height);

    const bot = map(sunsetMinute[i], 0, fullDayMinute, 0, height);

    stroke(200, 200, 50);

    line(i, top, i, bot);

​

​

​

  }

  const amBase = height * 7/16;

  const pmBase = height * 5/8;

  strokeWeight(3);

  for (let i = 0; i < 365; i += 7) {

    const compI = (i + 7) % 365

    const amDelta = abs(sunriseMinute[i] - sunriseMinute[compI]);

    const pmDelta = abs(sunsetMinute[i] - sunsetMinute[compI]);

​

    stroke(255);

    line(i, amBase - amDelta * DELTAPIX, i,amBase);

    line(i, pmBase - pmDelta * DELTAPIX, i, pmBase);

    //line(i, height / 2 - (amDelta + pmDelta) * DELTAPIX, i, height/2);

  }

​

  strokeWeight(2);

  const todayDayNum = new Date().getDOY();

  stroke(255,100);

  line(todayDayNum,0,todayDayNum,height);

​

  noLoop();

}

​