"TypeError: c1.levels is undefined" when drawing triangles in p5.js

Question

我一直在尝试在 p5.js 中重新创建一个在屏幕上绘制三角形的程序，就像这样：

它基于 Mike Brondbjerg 在 codepen.io 上的 code I found，但我在阅读它的过程中做了一些更改。当我第一次尝试 运行 直接从他的项目代码在我自己的电脑上时，它根本不起作用，所以我花了一个上午的时间将它编辑成这个新版本，如下所示。

var img;
var xPos = [];
var yPos = [];
var sampleRate = 8; 
var shapePoints = 3; 

var frames = 0;

function preload() {
    img = loadImage("zebra.png");
}

function setup() {
    createCanvas(800, 600);
    smooth();
    noStroke();
    background(0);
}

function draw() {

    frames = frames + 1;

    if (frames >= sampleRate) {

        frames = 0;

        xPos.push(mouseX);
        yPos.push(mouseY);

        if (xPos.length >= shapePoints) {
            var pixelA = img.get(xPos[xPos.length-1], yPos[yPos.length-1]);
            var pixelB = img.get(xPos[xPos.length-2], yPos[yPos.length-2]);
            var inbetweenCol = lerpColor(pixelA, pixelB, .5);
            fill(inbetweenCol);

        beginShape();
            for(var v=0; v<shapePoints; v++)
            {
                var arrayPos = xPos.length-1 - v;
                vertex(xPos[arrayPos],yPos[arrayPos]);
              }
        endShape(CLOSE);

        }
    }
}

但是，当我在我的浏览器中尝试 运行 它时，它给了我一个我以前从未见过的错误。

我的搜索引擎中也没有太多内容。

文件在我的目录中是这样组织的：

directory_name 
 |__ lib
 |     |__ p5.js
 |___ index.html
 |___ sketch.js
 |___ zebra.png

并且 html 文件除了基本的样板代码外大部分是空的。我这样引用 javascript 文件：

<script language="javascript" type="text/javascript" src="/lib/p5.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>

有人知道是什么导致了我这个错误吗？

Answer 1

在您的 JavaScript 控制台中，在错误的右侧，看到显示 p5.js:6242:5 的部分了吗？点击它。

这会将您带到 p5.js 代码中导致错误的位置，然后它会告诉您代码中的什么导致了错误。

您会发现您的问题出在 lerpColor() 函数中：它告诉您它期望第一个参数中有一个 levels 字段，但该字段丢失了。

也就是说，你的问题出在这里：

var pixelA = img.get(xPos[xPos.length-1], yPos[yPos.length-1]);
var pixelB = img.get(xPos[xPos.length-2], yPos[yPos.length-2]);
var inbetweenCol = lerpColor(pixelA, pixelB, .5);

img.get() 函数 returns 一个包含 R、G、B 和 A 值的数组。 lerpColor() 函数不适用于数组。它仅适用于 Color 类型。

您需要使用 color() 函数将数组转换为 Color 类型。然后将那些 Color 类型传递给 lerpColor() 函数：

var pixelA = img.get(xPos[xPos.length-1], yPos[yPos.length-1]);
var pixelB = img.get(xPos[xPos.length-2], yPos[yPos.length-2]);
var colorA = color(pixelA[0], pixelA[1], pixelA[2]);
var colorB = color(pixelB[0], pixelB[1], pixelB[2]);
var inbetweenCol = lerpColor(colorA, pixelB, .5);

您的错误发生是因为 lerpColor() 函数正在尝试使用 levels 变量，该变量是在 Color 类型中定义的。但是由于您传递给它的是数组而不是 Color，因此 levels 变量未定义。