„Typeerror: c1.levels ist nicht definiert“, wenn Dreiecke in p5.js

Question

Zeichnung Ich habe versucht, ein Programm in p5.js neu zu erstellen, die Dreiecke auf dem Bildschirm zieht, ähnlich wie folgt aus:

Es basiert auf code I found auf codepen.io von Mike Brondbjerg, aber ich änderte ein paar Dinge, während ich es durchging. Als ich versuchte, den Code direkt von seinem Projekt auf meinem eigenen Computer auszuführen, funktionierte es überhaupt nicht, also verbrachte ich den Morgen damit, es zu bearbeiten, um diese neue Version zu werden, die unten gezeigt wird.

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

     } 
    } 
} 

Allerdings, wenn ich es in meinem Browser versuchen läuft, es gibt mir einen Fehler, ich habe nie, nie zuvor gesehen.

Nicht viel kommt entweder in meiner Suchmaschine auf.

Die Dateien werden in meinem Verzeichnis wie folgt organisiert:

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

und die HTML-Datei ist meist leer, asides vom Grundstandardcode. Ich referenzierten die Javascript-Dateien wie folgen aus:

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

Hat jemand wissen, was mir diesen Fehler gegeben haben könnte?

Answer 1

In Ihrer JavaScript-Konsole, auf der rechten Seite des Fehlers, sehen Sie den Teil, der p5.js:6242:5 sagt? Klick es.

Das bringt Sie an die Stelle in p5.js Code, die den Fehler verursacht, der Ihnen dann sagen wird, was in Ihrem Code den Fehler verursacht.

Sie werden sehen, dass Ihr Problem in der lerpColor()-Funktion ist: es sagt Ihnen, dass es ein levels-Feld innerhalb des ersten Parameters erwartet, aber dieses Feld fehlt.

Mit anderen Worten: Ihr Problem ist hier:

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

Die img.get() Funktion gibt einen Array, das die R, G, B und A-Wert hält. Die lerpColor() Funktion funktioniert jedoch nicht mit Arrays. Es funktioniert nur mit dem Typ.

Sie müssen die Arrays unter Verwendung der color()-Funktion in Color-Typen konvertieren. Dann passieren diese Color Typen in die lerpColor() Funktion:

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

Ihr Fehler passiert, weil die lerpColor() Funktion die levels Variable zu verwenden versucht, die innerhalb des Color Typ definiert ist. Da Sie jedoch ein Array anstelle eines übergeben, ist die Variable levels undefiniert.