＆＃34; TypeError：c1.levels未定义＆＃34;在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()函数返回一个包含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变量未定义。