如何修改Processing代码将圆弧可视化改为蓝黄矩形？

原代码通过调用API获取指定地点每月15日的昼夜时长，并用环形圆弧展示。要改成蓝黄矩形可视化，核心是把时间占比从角度转换为矩形长度，下面是修改后的完整代码及关键说明：

//Bergen, NORWAY
String LAT = "60.39097752046264";   
String LONG = "5.310058600685323";

//Kuala Lumpur, MALAYSIA
//String LAT = "3.1573573549026794";   
//String LONG = "101.71161402234756";

String[] month = {"01", "02", "03", "04", "05", "06", 
                  "07", "08", "09", "10", "11", "12"};

JSONObject myData;
int[] dayLengthInSeconds = new int[12];
float twentyfourhoursInSeconds = 0.0;
// 定义配色：黄色=白天，蓝色=夜晚
color dayColor = color(253, 216, 53);
color nightColor = color(25, 118, 210);

void setup(){  
  size(500, 500);
  
  for (int i=0; i<12; i++){
    String DATE = "2022-" + month[i] + "-15";
    String URL = "https://api.sunrise-sunset.org" +
                 "/json?lat=" + LAT + "&lng=" + LONG + "&date=" + DATE;
    
    myData = loadJSONObject(URL);
    JSONObject results = myData.getJSONObject("results");
    String myDayLength = results.getString("day_length");
    String[] thisData = split(myDayLength, ":");
    int HH = int(thisData[0]);
    int MM = int(thisData[1]);
    int SS = int(thisData[2]);
    
    dayLengthInSeconds[i] = HH*60*60 + MM*60 + SS;
  }
  
  twentyfourhoursInSeconds = 24*60*60;
  noStroke(); // 去掉矩形描边，让填充更干净
}

void draw(){
  background(255);
  
  float barHeight = height / 12 * 0.8; // 每个条形的高度，留间距
  float barYOffset = height / 12 * 0.1; // 上下间距
  
  for(int i=0; i<12; i++){
    // 计算当前月份条形的Y坐标
    float y = i * (height/12) + barYOffset;
    
    // 计算白天时长占24小时的比例，转换为矩形宽度
    float dayWidth = width * (dayLengthInSeconds[i] / twentyfourhoursInSeconds);
    
    // 绘制白天矩形（黄色）
    fill(dayColor);
    rect(0, y, dayWidth, barHeight);
    
    // 绘制夜晚矩形（蓝色），从白天结束的位置开始
    fill(nightColor);
    rect(dayWidth, y, width - dayWidth, barHeight);
  }
}

关键修改说明： #

• 配色替换：定义明确的昼夜配色，用fill()填充矩形替代原有的stroke()描边圆弧
• 布局调整：将环形布局改为垂直排列的12个条形，每个条形对应一个月份，通过height/12计算每个条形的位置和高度
• 比例转换：把原有的角度比例（radians(...)）转换为矩形宽度比例，直接用width * 时间占比得出白天矩形的长度，夜晚矩形填充剩余宽度
• 细节优化：去掉原代码的noFill()和strokeWeight()，改用noStroke()让矩形边缘更整洁，同时给条形留上下间距避免拥挤

如果需要横向排列或其他布局，只需调整rect()的参数即可。垂直条形是最直观的新手友好方案。

内容的提问来源于stack exchange，提问作者Zarr Reese