如何在Processing中为日出时间数据点绘制连线？

问题描述 #

我有一个二维数组Info_Sun，每行对应一天的数据：第1列是月份，第2列是日期，第3-5列分别为日出的时、分、秒。目前已完成图形坐标轴与数据点的绘制，但无法将数组中的数据点连接成线。x轴对应一年中的天数，y轴对应日出时间，数组共365行。

修改后的代码 #

int[][] Info_Sun = {
    { 1, 1, 8, 23, 2 },
    { 1, 2, 8, 23, 9 },
    { 1, 3, 8, 23, 13 },
    { 1, 4, 8, 23, 15 },
    { 1, 5, 8, 23, 16 },
    { 1, 6, 8, 23, 14 },
    { 1, 7, 8, 23, 10 },
};

float positionX, positionY;
float sunset_pixel, sunrise_pixel, pixel_X, distance;
PFont f;

void setup(){
    size(1500, 800);
    background(255, 255, 211);
    
    // 绘制坐标轴和刻度
    line(220, height/2+200, width-200, height/2+200);
    line(width/4-155, 55, width/4-155, 600);
    distance = -21.5;
    f = createFont("Consolas", 16, true);
    textFont(f, 14);
    fill(0);
    text("Sortida i posta (hora)", 100, 50);
    text("DIES DE L'ANY", 1200, 615);
    
    for(int s=1; s<25; s++){
        line(220, height/2+200+distance, width-200, height/2+200+distance);
        text(s, 200, height/2+200+distance);
        distance -=21.5;
        point(220, 220);
    }
    
    pixel_X =25;
    // 初始化上一个点的坐标
    float prevX, prevY;
    // 处理第一个点
    prevX = Info_Sun[0][1] +220;
    prevY = Info_Sun[0][2]*pixel_X + (Info_Sun[0][3]*pixel_X)/60 + (Info_Sun[0][4]*pixel_X)/3600;
    strokeWeight(3);
    stroke(255,0,0);
    point(prevX, prevY);
    
    // 从第二个点开始遍历，连线并画点
    for(int i=1; i<Info_Sun.length; i++){
        float currX = Info_Sun[i][1] +220;
        float currY = Info_Sun[i][2]*pixel_X + (Info_Sun[i][3]*pixel_X)/60 + (Info_Sun[i][4]*pixel_X)/3600;
        // 连接上一个点和当前点
        line(prevX, prevY, currX, currY);
        // 绘制当前点
        point(currX, currY);
        // 更新上一个点的坐标
        prevX = currX;
        prevY = currY;
    }
}

关键修改说明 #

• 提前初始化上一个点的坐标：先计算第一个数据点的位置并绘制，避免循环中重复逻辑
• 从第二个数据点开始，使用line()函数连接当前点与上一个点，实现连续连线效果
• 保留原有数据点的绘制逻辑，确保连线同时不丢失数据点的可视化
• 将字体初始化和静态文本绘制移到刻度循环外，避免重复执行冗余操作

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