Examples from "Make: Getting Started with p5.js" not working

p5.js Beginners
1

Hi hi, all! I’ve been working with p5 for a few months now. Going through the “getting started with p5.js” book from McCarthy + Reas. I’ve noticed that even if I copy the examples exactly as written, they sometimes don’t work. Case in point → p5.js Web Editor

this is a direct copy of what’s written on pg 147 of said book, a book whose .pdf version may be found via a brief google.

It’s super frustrating for someone that is trying to learn. Are these examples outdated or am I doing something wrong?? Little help?

1 Like
2
  • Neither!! File “films.json” is an array of objects.
  • However loadJSON() is returning an object instead of an array!
  • So filmData.length is zero! Even though it indeed contains 12 objects.
  • According to loadJSON()'s online reference: reference | p5.js
  • it’s supposed to return either an object or an array.
  • So it’s a bug which was introduced later.
  • You should open an issue on its repo:
3

As a temporary workaround you can use Object.values() in order to convert the object returned by loadJSON() to a proper array:

var filmData;

function preload() {
  loadJSON("films.json", json => filmData = Object.values(json));
}
4

Hello @MissAda ,

This worked:

image
image1235×711 94.2 KB

References:

:)

5

Thanks to both GLV and GoToLoop! Your solutions worked and are helping me understanding how the example was supposed to function, as well as looking at alternative ways to approach it. Your help matters - thank you!

1 Like