process json

Shows how to load and process a .json file

sketch.js

var data;
function preload(){
  var url = "data.json";
  data = loadJSON(url);
}
// getting started with p5js
function setup(){
  // executed once
  var canvas = createCanvas(300,100);
  canvas.parent('sketch');
  var step = 255/data.coords.length;
  for(var i = 0; i < data.coords.length;i++){
    fill(step);
    step+=step;
    var p = data.coords[i];
    rect(p.x,p.y, p.x, p.y);

  }
}
function draw(){
  // executed all the time
}

data.json

{
  "coords": [
    {
      "x": 10,
      "y": 10
    },
    {
      "x": 20,
      "y": 10
    },
    {
      "x": 30,
      "y": 10
    }
  ]
}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{page.title}</title>
    <meta name="description" content="something">
    <meta name="author" content="me">
  </head>
  <body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.min.js"></script>
    <script type="text/javascript" src="sketch.js"></script>
    <div id="sketch"></div>
  </body>
</html>