P5.js绘图工具报错：Cannot read property 'value' of undefined求助

你遇到的 Uncaught TypeError: Cannot read property 'value' of undefined 报错，核心原因是 nHexagonSlider 和 HexagonSizeSlider 这两个滑块变量根本没有被正确初始化——当你调用 .value() 时，它们还是 undefined 状态。

问题根源分析 #

看你的代码结构，你把 p5.js 的 preload 和 setup 生命周期函数嵌套在了 HexagonTool 构造函数内部，但 p5.js 只会执行全局作用域下的 preload/setup，完全不会识别构造函数内部的这两个函数。这就导致：

1. 滑块控件从未被创建，变量保持 undefined
2. 六边形图片也没被加载，后续绘图也会出问题
3. 所有定义在构造函数内部的局部变量，在 draw 方法里的作用域也有问题

修复后的代码方案 #

我们需要调整变量作用域，把初始化逻辑移到正确的位置，确保 p5 能正常创建控件和加载资源：

function HexagonTool() {
    // 工具的基础属性
    this.icon = "assets/shapes.jpg";
    this.name = "shapes";
    
    // 把需要跨方法访问的变量挂载到实例上（用this.）
    this.hexagonImg;
    this.sizeSlider;
    this.countSlider;

    // 自定义初始化方法，替代嵌套的preload/setup
    this.init = function() {
        // 加载六边形图片，用回调确保加载完成
        this.hexagonImg = loadImage('assets/Hexagon.png', () => {
            console.log("六边形图片加载完成");
        });
        
        // 创建尺寸滑块并绑定到指定DOM容器
        this.sizeSlider = createSlider(5, 60, 20);
        this.sizeSlider.parent("#sizeOfHexagonControl");
        
        // 创建数量滑块并绑定到指定DOM容器
        this.countSlider = createSlider(1, 25, 5);
        this.countSlider.parent("#numberOfHexagonsControl");
    };

    this.draw = function() {
        // 先检查资源和控件是否初始化完成，避免报错
        if (!this.hexagonImg || !this.sizeSlider || !this.countSlider) return;
        
        if (mouseIsPressed) {
            const hexCount = this.countSlider.value();
            const hexSize = this.sizeSlider.value();
            
            for (let i = 0; i < hexCount; i++) {
                // 计算随机偏移位置
                const hexX = random((mouseX - hexSize / 2) - 25, (mouseX - hexSize / 2) + 25);
                const hexY = random((mouseY - hexSize / 2) - 25, (mouseY - hexSize / 2) + 25);
                // 绘制六边形图片
                image(this.hexagonImg, hexX, hexY, hexSize, hexSize);
            }
        }
    };
}

// 在全局setup中初始化工具实例
let hexagonTool;
function setup() {
    // 这里放你的全局初始化逻辑，比如createCanvas等
    hexagonTool = new HexagonTool();
    hexagonTool.init();
}

关键修复点说明 #

1. 作用域调整：把滑块、图片变量改为实例属性（this.xxx），确保 draw 方法能正确访问到它们
2. 初始化逻辑迁移：将原本嵌套的 preload/setup 替换为实例的 init 方法，在全局 setup 中调用——此时 p5 环境已经准备就绪，能正常执行 loadImage 和 createSlider
3. 安全检查：在 draw 开头增加资源检查，避免初始化未完成时触发额外报错

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