“类型错误：c1.levels是未定义”在p5.js绘制三角形时

Question

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

它基于code I found，由Mike Brondbjerg在codepen.io上编写，但是当我正在浏览它时，我改变了一些东西。当我第一次尝试在自己的计算机上直接从他的项目中运行代码时，它根本不起作用，所以我花了早上编辑它成为这个新版本，如下所示。

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变量未定义。