olivia ross olivia ross - 4 months ago 14
HTML Question

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

I've been trying to recreate a program in p5.js that draws triangles on your screen, much like this:

Picture of polygon demo from code.pen

It's based on code I found on codepen.io by Mike Brondbjerg, but I changed a few things while I was going through it. When I first tried running the code straight from his project on my own computer, it didn't work at all, so I spent the morning editing it to become this new version, shown below.

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);

}
}
}


However, when I try running it in my browser, it gives me an error that I've never, ever seen before.

Error message as it appears on my browser's console

Not much is coming up in my search engine either.

Search engine results

The files are organized in my directory like this:

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


And the html file is mostly empty, asides from the basic boilerplate code. I referenced the javascript files like this:

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


Does anyone know what could have given me this error?

Answer

In your JavaScript console, to the right of the error, see the part that says p5.js:6242:5? Click it.

That will take you to the place in p5.js code that's causing the error, which will then tell you what in your code is causing the error.

You'll see that your problem is in the lerpColor() function: it's telling you that you're passing in an undefined value for the first parameter.

In other words, your problem is here:

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);

The img.get() function returns an array that holds the R, G, B, and A values. the lerpColor() function doesn't work with arrays though. It only works with the Color type.

You need to convert the arrays to Color types, using the color() function. Then pass those Color types into the lerpColor() function:

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);

Your error is happening because the lerpColor() function is trying to use the levels variable, which is defined inside the Color type. But since you're passing it an array instead of a Color, the levels variable is undefined.

Comments