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
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’);
}
}
</>