OpenProcessing 2.5D引擎射线绘制异常：线条显示为点求助

核心错误点 #

• 循环变量冲突：rays()里两层for循环都用了i，内层循环会覆盖外层的循环变量，导致射线遍历逻辑完全混乱，射线数量、角度计算全部出错。
• 颜色判断逻辑错误：if(c===127, 127, 127, 127)是语法错误，p5.js的get()返回的是颜色对象，不能直接用逗号分隔值来比较，需要单独提取RGBA通道值判断。
• 错误调用setup()：draw()里每次调用setup()会重复初始化画布、加载图像，直接导致画面闪烁，甚至重置玩家位置等变量。
• 射线起点未重置：内层循环没有每次将rx、ry重置为玩家当前位置，导致射线从上一条的终点开始延伸，而不是从玩家出发。
• FOV角度增量错误：FOV是60度，循环60次的话每次角度增量应该是1度（60/60），而不是2度，否则会跳过大量角度，且超出设定的FOV范围。

修复后的完整代码 #

let fov, x, y, dir, img;

function preload(){
    fov = 60;
    x = windowWidth / 2;
    y = windowHeight / 2;
    angleMode(DEGREES);
    dir = 0;
    img = loadImage('eeee.png');
}

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function draw() {
    background(127);
    image(img, 0, 0);
    
    // 玩家控制
    if(keyIsDown(UP_ARROW)){
        x += 2 * sin(dir);
        y += 2 * cos(dir);
    }
    if(keyIsDown(RIGHT_ARROW)){
        dir += 1;
    }
    if(keyIsDown(LEFT_ARROW)){
        dir -= 1;
    }
    
    rays();
}

function rays(){
    let rdir = dir - fov / 2;
    // 外层循环用i，内层改用j避免变量冲突
    for(let i = 0; i < fov; i++){
        // 每条射线都从玩家位置出发，重置rx、ry
        let rx = x;
        let ry = y;
        // 限制射线最大长度，避免无限循环
        for(let j = 0; j < 350; j++){
            let c = img.get(rx, ry);
            // 正确判断颜色是否为灰色(127,127,127,127)
            if(red(c) === 127 && green(c) === 127 && blue(c) === 127 && alpha(c) === 127){
                line(x, y, rx, ry);
                break; // 碰到墙体就停止这条射线的延伸
            }else{
                rx += sin(rdir);
                ry += cos(rdir);
            }
        }
        // 即使没碰到墙体，也绘制到最大长度的射线
        line(x, y, rx, ry);
        rdir += 1; // 每次增量1度，覆盖完整FOV
    }
}

修复说明 #

1. 提前声明全局变量，避免隐式全局变量导致的意外问题。
2. draw()里去掉erase()和setup()调用，改用background(127)每次清屏，保证画面稳定。
3. 内层循环改用j作为变量，避免和外层的i冲突。
4. 每条射线开始时重置rx、ry为玩家当前位置，确保射线从玩家出发。
5. 用red(c)、green(c)等方法正确判断颜色，碰到墙体后break终止内层循环，避免无效计算。
6. 调整角度增量为1度，确保60条射线覆盖完整的60度FOV。

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