Create a JSON File

FIRST Watch this video for some additional helpful hints: https://youtu.be/YrqUpFBeT-A

Second, remake this simple example:

create a file called 'flower.json'

{

"name" : "sunflower",

"r" : 255,

"g" : 200,

"b" : 0

}

Here is the main sketch:

var flower;

function preload(){

flower = loadJSON("flower.json");

}

function setup() {

createCanvas(400, 400);

}

function draw() {

background(0);

fill(flower.r, flower.g, flower.b);

text(flower.name,10,50);

}

Third, once you reproduce that on your own then:

Pick something that interests you and try to make a JSON file for it.

Put some data in it.

Fourth, load that data and display something based upon that data.

Here is the GitHub repository that Daniel Shiffman mentioned in the video and maintained by Darius Kazemi:

One example from that repository is this list of elements: