p5.js传入参数调用point()方法无法绘制点的问题求助

你的代码本身语法没有错误，点不显示是位置和运动逻辑的问题：

• 初始粒子y坐标设为height（你的画布高度为400，height值为400），p5.js画布坐标原点在左上角，y轴向下递增，有效可视像素的y坐标范围是0 ~ height-1，y=400已经处于画布边界外。你设置了strokeWeight(10)，点的绘制以传入坐标为中心，所以整个点只有极少部分可能落在可视区域，极易被完全裁剪。
• 你没有给粒子设置初始的向上速度，也没有施加任何作用力，粒子的速度、加速度始终为0，会一直停留在初始的底部边缘位置，不会移动到画布可视区域内。
• 原更新方法的运动逻辑顺序有误，先更新位置再更新速度会导致运动效果有一帧延迟，初始速度为0的情况下第一帧位置完全不会变化。

你之前测试用固定值100作为坐标能正常显示，就是因为100处于画布可视区域的中间位置，没有被裁剪。

1. 调整初始y坐标，或者给粒子添加向上的初始速度，让粒子进入画布可视区域
2. 调整运动更新顺序，按需给粒子添加重力等作用力，实现正常运动效果

修改后可正常运行的参考代码 #

var firework;
// 重力常量，可按需调整
const gravity = createVector(0, 0.2);

function setup() {
    createCanvas(500, 400);
    stroke('purple');
    strokeWeight(10);
    firework = new Particle(random(width), height);
    // 给粒子设置向上的初始速度，y为负数代表向上移动
    firework.velocity = createVector(0, -10);
}

function draw() {
    background(51);
    // 给粒子施加重力
    firework.applyForce(gravity);
    firework.update();
    firework.show();
}

function Particle(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(0, 0);
    this.acceleration = createVector(0, 0);

    this.applyForce = function(force) {
        this.acceleration.add(force);
    }

    this.update = function() {
        // 调整顺序：先更新速度再更新位置
        this.velocity.add(this.acceleration);
        this.position.add(this.velocity);
        this.acceleration.mult(0);
    };

    this.show = function() {
        point(this.position.x, this.position.y);
    };
}

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