# Cannot find 'length' of undefined

**URL:** <https://discourse.processing.org/t/cannot-find-length-of-undefined/28008>\
**Category:** Coding Questions\
**Created:** [February 22, 2021, 7:55pm UTC](https://discourse.processing.org/t/cannot-find-length-of-undefined/28008 "2021-02-22T19:55:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![adworetzky](https://avatars.discourse-cdn.com/v4/letter/a/7bcc69/32.png) [@adworetzky](https://discourse.processing.org/u/adworetzky)\
**Post date:** [February 22, 2021, 7:55pm UTC](https://discourse.processing.org/t/cannot-find-length-of-undefined/28008/1 "2021-02-22T19:55:33Z")

</div>

I’m trying to get my noisy type generator to iterate over multiple letters. But I seem to be stuck at the 2dimesional array. It keeps throwing the error “Uncaught TypeError: Cannot read property ‘length’ of undefined (sketch: line 266)”. I know I’ve loaded an external font so I have attached the link to the webeditor file with it already loaded.  
[https://editor.p5js.org/adworetzky/sketches/yOiVNA12N](https://editor.p5js.org/adworetzky/sketches/yOiVNA12N)  
If anyone could help, its really the last thing before I can start doing spacing. Thank you

\</\>  
// IBM Plex Mono but drawn with lines on its interior, with parametric controls over position, noise scale, number of sampling points, stroke weight. and some noise based animation  
// -------------  
// Press enter to save out canvas without controls  
// -------------  
// Written by Adam Dworetzky  
// Generative Typography  
// Feb 2021

let ibmplexmono;  
let aArray, bArray, cArray, dArray, fArray, gArray, hArray, iArray, jArray, kArray, lArray, mArray, nArray, oArray, pArray, qArray, rArray, sArray, tArray, uArray, vArray, wArray, xArray, yArray, zArray  
let fontSize = 500;  
let strokeyBois = .1;  
let initialLetter = [“A”, “B”, “C”, “D”, “E”, “F”, “G”, “H”, “I”, “J”, “K”, “L”, “M”, “N”, “O”, “P”, “Q”, “R”, “S”, “T”, “U”, “V”, “W”, “X”, “Y”, “Z”, “a”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”, “k”, “l”, “m”, “n”, “o”, “p”, “q”, “r”, “s”, “t”, “u”, “v”, “w”, “x”, “y”, “z”, “0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”];  
let spacing = 100  
let numPointsFactor = .5;  
let noiseFactor = 20;  
let noiseIncriment = .01;  
let centeredBigChar;  
let charTyped = false;  
let curveTightnessTemp;

let drawButton;  
let randomLetterButton;  
let noiseSeedButton;  
let firstLevel = [];

let xPosSlider = 0;  
let yPosSlider = 0;  
let noiseSlider, numPointsSlider, strokeWeightSlider, curveTightnessSlider, scaleSlider;  
let sliderTextOffset = 10;  
let xPosText, yPosText, scaleSliderText, noiseSliderText, numPointsSliderText, strokeWeightSliderText, curveTightnessSliderText  
let sliderGutter = 35  
let animator = 0;  
let animate = false;  
let checkbox;

// load font  
function preload() {  
ibmplexmono = loadFont(‘IBMPlexMono.ttf’);  
}

function setup() {  
createCanvas(900, 600);  
// pixelDensity(-1);  
// smooth();

// draw controls to the DOM  
input = createInput(‘HI’);  
input.position(10, 10);  
input.size(30, 15);  
// input.value(random(initialLetter));

drawButton = createButton(‘Draw’);  
drawButton.position(input.x + input.width, input.y);  
drawButton.mousePressed(updateEvent);

randomLetterButton = createButton(‘Random Letter’);  
randomLetterButton.position(drawButton.x + drawButton.width, drawButton.y);  
randomLetterButton.mousePressed(newRandomLetterEvent);

noiseSeedButton = createButton(‘New Noise Seed’);  
noiseSeedButton.position(randomLetterButton.x + randomLetterButton.width, randomLetterButton.y);  
noiseSeedButton.mousePressed(newNoiseSeedEvent);

checkbox = createCheckbox(‘Animate’, false);  
checkbox.position(noiseSeedButton.x + noiseSeedButton.width, noiseSeedButton.y);  
checkbox.changed(animateEvent);

xPosSlider = createSlider(-1000, 1000);  
xPosSlider.position(input.x, input.y + sliderGutter + 20);  
xPosSlider.style(‘width’, ‘80px’);  
xPosText = createSpan(“X Position”);  
xPosText.position(xPosSlider.x - 15, xPosSlider.y - sliderTextOffset);  
xPosText.style(‘width’, ‘120px’);

yPosSlider = createSlider(-1000, 1000);  
yPosSlider.position(xPosSlider.x, xPosSlider.y + sliderGutter);  
yPosSlider.style(‘width’, ‘80px’);  
yPosText = createSpan(“Y Position”);  
yPosText.position(yPosSlider.x - 15, yPosSlider.y - sliderTextOffset);  
yPosText.style(‘width’, ‘120px’);

scaleSlider = createSlider(0, 3, 1, .01);  
scaleSlider.position(yPosSlider.x, yPosSlider.y + sliderGutter);  
scaleSlider.style(‘width’, ‘80px’);  
scaleSliderText = createSpan(“Letter Scale”);  
scaleSliderText.position(scaleSlider.x - 15, scaleSlider.y - sliderTextOffset);  
scaleSliderText.style(‘width’, ‘120px’);

noiseSlider = createSlider(0, 100, 20);  
noiseSlider.position(scaleSlider.x, scaleSlider.y + sliderGutter);  
noiseSlider.style(‘width’, ‘80px’);  
noiseSliderText = createSpan("Noise Scale: " + noiseSlider.value());  
noiseSliderText.position(noiseSlider.x - 15, noiseSlider.y - sliderTextOffset);  
noiseSliderText.style(‘width’, ‘120px’);

numPointsSlider = createSlider(.01, 1, 0.5, .0001);  
numPointsSlider.position(noiseSlider.x, noiseSlider.y + sliderGutter);  
numPointsSlider.style(‘width’, ‘80px’);  
numPointsSliderText = createSpan("Resolution: " + numPointsSlider.value());  
numPointsSliderText.position(numPointsSlider.x - 15, numPointsSlider.y - sliderTextOffset);  
numPointsSliderText.style(‘width’, ‘120px’);

strokeWeightSlider = createSlider(.01, .5, 0.1, .001);  
strokeWeightSlider.position(numPointsSlider.x, numPointsSlider.y + sliderGutter);  
strokeWeightSlider.style(‘width’, ‘80px’);  
strokeWeightSliderText = createSpan(“Stroke Weight”);  
strokeWeightSliderText.position(strokeWeightSlider.x - 15, strokeWeightSlider.y - sliderTextOffset);  
strokeWeightSliderText.style(‘width’, ‘120px’);

curveTightnessSlider = createSlider(-10, 10, 1, .1);  
curveTightnessSlider.position(strokeWeightSlider.x, strokeWeightSlider.y + sliderGutter);  
curveTightnessSlider.style(‘width’, ‘80px’);  
curveTightnessSliderText = createSpan(“Curve Tightness”);  
curveTightnessSliderText.position(curveTightnessSlider.x - 15, curveTightnessSlider.y - sliderTextOffset);  
curveTightnessSliderText.style(‘width’, ‘120px’);

textFont(ibmplexmono);  
textSize(fontSize);  
noFill();

// generate array of letterforms  
// aArray = generateLetterPointsArray(“A”,100,200,fontSize);  
// bArray = generateLetterPointsArray(“B”,200,200,fontSize);  
// cArray = generateLetterPointsArray(“C”,300,200,fontSize);  
// dArray = generateLetterPointsArray(“D”,400,200,fontSize);  
// eArray = generateLetterPointsArray(“E”,500,200,fontSize);  
// fArray = generateLetterPointsArray(“F”,100,500,fontSize);  
// gArray = generateLetterPointsArray(“G”,500,height/2,fontSize);  
// hArray = generateLetterPointsArray(“H”,500,height/2,fontSize);  
// iArray = generateLetterPointsArray(“I”,500,height/2,fontSize);  
// jArray = generateLetterPointsArray(“J”,500,height/2,fontSize);  
// kArray = generateLetterPointsArray(“K”,500,height/2,fontSize);  
// lArray = generateLetterPointsArray(“L”,500,height/2,fontSize);  
// mArray = generateLetterPointsArray(“M”,500,height/2,fontSize);  
// nArray = generateLetterPointsArray(“N”,500,height/2,fontSize);  
// oArray = generateLetterPointsArray(“O”,500,height/2,fontSize);  
// pArray = generateLetterPointsArray(“P”,500,height/2,fontSize);  
// qArray = generateLetterPointsArray(“Q”,500,height/2,fontSize);  
// rArray = generateLetterPointsArray(“R”,500,height/2,fontSize);  
// sArray = generateLetterPointsArray(“S”,500,height/2,fontSize);  
// tArray = generateLetterPointsArray(“T”,500,height/2,fontSize);  
// uArray = generateLetterPointsArray(“U”,500,height/2,fontSize);  
// vArray = generateLetterPointsArray(“V”,500,height/2,fontSize);  
// wArray = generateLetterPointsArray(“W”,500,height/2,fontSize);  
// xArray = generateLetterPointsArray(“X”,500,height/2,fontSize);  
// yArray = generateLetterPointsArray(“Y”,500,height/2,fontSize);  
// zArray = generateLetterPointsArray(“Z”,500,height/2,fontSize);  
}

function draw() {  
// push changes in sliders to label text  
numPointsSliderText.html("Resolution: " + round(numPointsSlider.value(), 2));  
noiseSliderText.html("Noise Scale: " + noiseSlider.value());

// Update Variables from sliders  
noiseFactor = noiseSlider.value();  
let xPosTemp = xPosSlider.value();  
let yPosTemp = yPosSlider.value();  
numPointsFactor = numPointsSlider.value();  
strokeyBois = strokeWeightSlider.value();  
curveTightnessTemp = curveTightnessSlider.value();  
scaleFactor = scaleSlider.value();

background(255);  
noFill();  
let tempText = input.value();  
// generate new point array every loop through so the values update with the sliders  
centeredBigChar = generateLetterPointsArray(tempText, width / 2 - fontSize / 3, height / 2 + fontSize / 4, fontSize);

// draw letter forms with noise as pShapes  
push();  
translate(xPosTemp, yPosTemp);  
scale(scaleFactor);  
strokeWeight(strokeyBois);  
drawLetterForms(centeredBigChar);  
pop();  
// if animate is checked, add the animator value  
if (animate) {  
animator += .01;  
}  
console.log(centeredBigChar);

// drawLetterForms(aArray);  
// drawLetterForms(bArray);  
// drawLetterForms(cArray);  
// drawLetterForms(dArray);  
// drawLetterForms(eArray);  
// drawLetterForms(fArray);  
// drawLetterForms(gArray);  
// drawLetterForms(hArray);  
// drawLetterForms(iArray);  
// drawLetterForms(jArray);  
// drawLetterForms(kArray);  
// drawLetterForms(lArray);  
// drawLetterForms(mArray);  
// drawLetterForms(nArray);  
// drawLetterForms(oArray);  
// drawLetterForms(pArray);  
// drawLetterForms(qArray);  
// drawLetterForms(rArray);  
// drawLetterForms(sArray);  
// drawLetterForms(tArray);  
// drawLetterForms(uArray);  
// drawLetterForms(vArray);  
// drawLetterForms(wArray);  
// drawLetterForms(xArray);  
// drawLetterForms(yArray);  
// drawLetterForms(zArray);  
}

// change noise seed  
function newNoiseSeedEvent() {  
noiseSeed(random(0, 100));  
}

// update character typed  
function updateEvent() {  
charTyped = true;  
centeredBigChar = generateLetterPointsArray(input.value(), width / 2 - fontSize / 2, height / 2 + fontSize / 4, fontSize);  
}

// random letter button  
function newRandomLetterEvent() {  
input.value(random(initialLetter));  
centeredBigChar = generateLetterPointsArray(input.value(), width / 2 - fontSize / 2, height / 2 + fontSize / 4, fontSize);  
}

function animateEvent() {  
if (checkbox.checked()) {  
animate = true;  
} else {  
animate = false;  
}  
}

// function to generate array of letterform  
function generateLetterPointsArray(letter, x, y, letterScale) {  
let letterArray = [];  
for (i of letter) {  
let lArray = ibmplexmono.textToPoints(i, x, y, letterScale, {  
sampleFactor: numPointsFactor,  
simplifyThreshold: 0  
});  
letterArray.push(lArray)  
}  
return letterArray;  
}

// Function to draw letter forms with noise as pShapes  
// let firstLevel=[];  
function drawLetterForms(letterFormArray) {  
for (let j = 0; j \<= letterFormArray.length; j++) {  
beginShape();  
firstLevel = letterFormArray[j];  
for (let i = 0; i \< (firstLevel.length) / 2; i++) {  
curveTightness(curveTightnessTemp);  
let distortion1 = (noise(animator + i \* noiseIncriment) - 1) \* noiseFactor;  
let distortion2 = (noise(animator + firstLevel.length - (i \* noiseIncriment)) - 1) \* noiseFactor;  
curveVertex(firstLevel[i].x + (distortion2), firstLevel[i].y + (distortion1));  
curveVertex(firstLevel[firstLevel.length - 1 - i].x + (distortion1), firstLevel[firstLevel.length - 1 - i].y + (distortion2));  
}  
endShape();  
}  
}

// Save out the canvas  
function keyPressed() {  
if (keyCode === ENTER) {  
saveCanvas(‘Form’, ‘png’);  
}  
}  
\</\>

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 22, 2021, 9:01pm UTC](https://discourse.processing.org/t/cannot-find-length-of-undefined/28008/2 "2021-02-22T21:01:50Z")

</div>

in the link you posted your Sketch has only 258 lines (you wrote your error is in line 266?) and a } seems to be missing

It doesn’t crash but it doesn’t show anything

---

<div class="post-metadata">

**Author:** ![OMG](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/omg/32/12073_2.png) [@OMG](https://discourse.processing.org/u/OMG)\
**Post date:** [February 23, 2021, 12:25am UTC](https://discourse.processing.org/t/cannot-find-length-of-undefined/28008/4 "2021-02-23T00:25:57Z")

</div>

> [@adworetzky](#):
>
> function drawLetterForms( **letterFormArray** ) {  
> for (let j = 0; j \<= **letterFormArray.length** ; j++) {  
> beginShape();  
> firstLevel = **letterFormArray[j]**;

I might be missing something, but it looks like “letterFormArray” isn’t declared anywhere, just appears in the part of the code that I quoted above. Since it’s not declared, could that be the undefined item that ‘length’ can’t be read from?