Accessing array give undefined p5.js

Question

this is my second attempt at this question, hopefully, I can be a little clearer as to my problem. I have an initial p5.js setup:

// Setup empty array (I beleive 'position' this is in the global scope?)
let position = []
//p5 setup
function setup(){
  createCanvas(400,400)
  // Simple for loop to create an array of floating random numbers between 5 and 10 using the p5.js random function
  for(let i = 0; i < 10 ; i++){
    let x = random(5,10)
    position.push(x)
  }
}
function draw(){
  background(100)
  text(`This is the implementation of random ${random(5,10)`,10,10)
}
// Loging position unless I am mistaken, does NOT show the array
console.log(position)
// But trying to access an specific value within the array gives an 'undefined'
console.log(position[1])
// Undefined

How would I access an individual value?

let position = []

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 10; i++) {
    let x = random(5, 10)
    position.push(x)
  }
}
console.log(`The position array is ${position}`)
console.log(`The length of the position array is ${position.length}`)
console.log(`The second value in the position array is ${position[1]}`)

function draw() {
  background(200)
  text(`This is the implementation of random ${random(5,10)}`,10,10)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>

You aren't actually calling `setup()` anywhere. Fix your indentation, and it becomes obvious. Snippets have a "Tidy" button that does it for you. — , Jan 09 '18 at 13:53
It looks like you haven't really grasped the point of having a function in the first place. You don't just wrap code in a function to make it prettier, the point is to be able to run the code multiple times without actually duplicating it. Code inside a function doesn't run unless the function is called. — , Jan 09 '18 at 13:59
I believe that setup() is called by the p5.js framework probably on windowload? — James, Jan 09 '18 at 14:02
Maybe, but your `console.log()`s are called *immediately* after `let position = []`, while it's still empty. Move the log calls to the end of your setup function, and it will work fine. — , Jan 09 '18 at 14:04
Thanks Chris it worked. As you suggest I moved the log calls inside the setup() and they worked as expected. I just don't understand why? — James, Jan 09 '18 at 14:19

score 0 · Accepted Answer · answered Jan 09 '18 at 17:50

Please understand the order that code executes. Consider this basic example:

console.log('one');

function setup(){
  console.log('two');
}

function draw(){
  console.log('three');
}

When your code is loaded, this happens:

The first console.log() statement is run and 'one' is printed.
The setup() function is defined but not run yet.
The draw() function is defined but not run yet.
Later, the setup() and draw() functions are called.

Now consider this example, which is closer to what you have:

function setup(){
  console.log('two');
}

console.log('one');

function draw(){
  console.log('three');
}

When you run this code, the following happens:

The setup() function is defined but not run yet.
The console.log('one') statement is run and 'one' is printed.
The draw() function is defined but not run yet.
Later, the setup() and draw() functions are called.

In other words, code you have outside a function runs before those functions are automatically called by the P5.js library. In your case, you're running code that accesses an array before you add anything to it.

To fix the problem, move the code inside the setup() function. That's the whole point of it.

Accessing array give undefined p5.js

1 Answers1