Error With Table: Cannot read property 'toString' of undefined

httpwilfred

Trying to create a basic decimal ASCII table to be used in some other sketches. It was working fine 2 hours ago but I changed up my input array and suddenly p5 starts throwing errors.

Here's my code:

var characterLibrary = new p5.Table();
var input = [];

function setup() {
    createCanvas(1, 1);
    console.log("program started");               
    input = [" ", "!", "\"", "#", "$", "%", "&", "\'", "(", ")", "*", "+", ",", "-", ".", "/", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ":", ";", "<", "=", ">", "?", "@", "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", "{", "|", "}", "~"];
    characterLibrary.addColumn("index");
    characterLibrary.addColumn("character");
    for(var i = 32; i < input.length + 32; i++) {
        var rowIndex = i-32;
        characterLibrary.addRow();
        characterLibrary.setNum(rowIndex, "index", i);
        characterLibrary.setString(rowIndex, "character", input[i]);
    }
    console.log(millis());
    saveTable(characterLibrary, "characterLibrary.csv");
}

Error I get in chrome:

Uncaught TypeError: Cannot read property 'toString' of undefined
    at p5.TableRow.setString (VM344 p5.js:59736)
    at p5.Table.setString (VM344 p5.js:59407)
    at setup (VM347 generateCharacterLibrary.js:20)
    at p5.<anonymous> (VM344 p5.js:44882)
    at p5.<anonymous> (VM344 p5.js:44810)
    at new p5 (VM344 p5.js:45103)
    at _globalInit (VM344 p5.js:46862)

I've also gotten this error earlier in the day, but went away when I restarted my computer:

VM423 p5.js:59391 Uncaught TypeError: Cannot read property 'setNum' of undefined
    at p5.Table.setNum (VM423 p5.js:59391)
    at setup (VM426 generateCharacterLibrary.js:21)
    at p5.<anonymous> (VM423 p5.js:44882)
    at p5.<anonymous> (VM423 p5.js:44810)
    at new p5 (VM423 p5.js:45103)
    at _globalInit (VM423 p5.js:46862)

Things I've tried:

-console logged all vars, they seem to be performing as expected

-quadruple checked syntax

-tried using simple input array to see if it was a problem with one of my strings

input = ["A", "B", "C"];

-restarted code editor

-tried running html outside code editor

-tried firefox, opera

-restart computer

-switched from p5.js lib on github to build from processing.org

Is something wrong with my code? Or is something up with p5?

httpwilfred

Ended up with a solution. Went back to the last commit and rewrote code. Here's the result and it works fine.

var characterLibrary = new p5.Table();

var input = [" ", "!", "\"", "#", "$", "%", "&", "\'", "(", ")", "*", "+", ",", "-", ".", "/", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ":", ";", "<", "=", ">", "?", "@", "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", "{", "|", "}", "~"];

var asciiIndex;

function setup() {
    createCanvas(200, 200);
    console.log("program started");               

    characterLibrary.addColumn("index");
    characterLibrary.addColumn("character");
}

function draw() {
    console.log("started generateSpots");

    for(var i = 0; i < input.length; i++) {
        asciiIndex = i+32;
        characterLibrary.addRow();
        characterLibrary.setNum(i, "index", asciiIndex);
        characterLibrary.setString(i, "character", input[i]);
    }

    console.log(millis());
    saveTable(characterLibrary, "characterLibrary.csv");
    noLoop();
}

Still not entirely sure what I was doing wrong, think it was something to do with the vars I was using. If someone wants to tell me that would be great. It would be good to know so I can avoid it in the future.

blindfish

You're making things complicated for yourself by starting your loop variable at 32. This looks like the cause of the error:

characterLibrary.setString(rowIndex, "character", input[i]);

...where the i referenced in input[i] starts at 32 - which will take you out of your input array bounds.

This works for me:

var characterLibrary;
var input;

function setup() {
    createCanvas(1, 1);
    input = [" ", "!", "\"", "#", "$", "%", "&", "\'", "(", ")", "*", "+", ",", "-", ".", "/", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ":", ";", "<", "=", ">", "?", "@", "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", "{", "|", "}", "~"];

    characterLibrary = new p5.Table();
    characterLibrary.addColumn("index");
    characterLibrary.addColumn("character");

    for(var i = 0; i < input.length; i++) {
        characterLibrary.addRow();
        // if you want index to start at 32 
        // it's far simpler to just add 32 here...
        characterLibrary.setNum(i, "index", i+32);
        characterLibrary.setString(i, "character", input[i]);
    }

    // saveTable(characterLibrary, "characterLibrary.csv");
    // if you log the table you can inspect it directly in the browser console ;)
    console.log(characterLibrary);
}

Note you can also declare multiple variables inside a for loop. i and j are just conventions, but you can give them meaningful names...

for(var i=0, charIndex=32; i<input.length; i++, charIndex++) {
  // use i for array index and charIndex where needed
}

httpwilfred

That makes sense. Thanks for the help I appreciate it! I was really making it harder than it had to be.

koogs

Why do you have an array of strings(!) of characters? What's up with fromCharCode()?

https://www.w3schools.com/jsref/jsref_fromCharCode.asp

httpwilfred

I'm new to javascript. I didn't know that existed. Thanks for the heads up. That will make it a lot easier.